Skip to content

Forms: prepare Forms header for Next Admin visually #44242

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: trunk
Choose a base branch
from

Conversation

simison
Copy link
Member

@simison simison commented Jul 9, 2025

Since we've moved under "Jetpack", the Jetpack logo and "Jetpack" prefix in front of "Forms" becomes less critical for brand regognition.

To align more closely with design language of (still evolving) upcoming we can also adjust things like spacing. Here's Gutenberg's experimental "posts" page using DataViews:

Screenshot 2025-07-09 at 15 21 52

The styles and component structure are taken from the above page (as of July 9, 2025), and adopted for our use:

Result is slightly more compact than what we had before.

Later we can componentise this within Jetpack in short term, and eventually hopefully use components from Gutenberg directly as componentry evolves.

Proposed changes:

  • Rewrite header area of Forms dashboard layout

Before

Screenshot 2025-07-09 at 15 23 44 Screenshot 2025-07-09 at 15 26 24

After

Screenshot 2025-07-09 at 15 14 16 Screenshot 2025-07-09 at 15 27 00

Other information:

  • Have you written new tests for your changes, if applicable?
  • Have you checked the E2E test CI results, and verified that your changes do not break them?
  • Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

  • Go to 'Jetpack -> Forms'

@simison simison requested review from keoshi and ilonagl July 9, 2025 12:31
@simison simison added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Status] In Progress [Package] Forms labels Jul 9, 2025
Copy link
Contributor

github-actions bot commented Jul 9, 2025

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

  • To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the update/forms-dashboard-header branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack update/forms-dashboard-header

Interested in more tips and information?

  • In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
  • Read more about our development workflow here: PCYsg-eg0-p2
  • Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

Copy link
Contributor

github-actions bot commented Jul 9, 2025

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  • ✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  • ✅ Add testing instructions.
  • ✅ Specify whether this PR includes any changes to data or privacy.
  • ✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖


Follow this PR Review Process:

  1. Ensure all required checks appearing at the bottom of this PR are passing.
  2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
  3. You can use GitHub's Reviewers functionality to request a review.
  4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

@simison
Copy link
Member Author

simison commented Jul 9, 2025

@ilonagl @keoshi before I continue fixing some small scroll quirks, I'd like if you can take a look from design perspective? Thanks!

Copy link

jp-launch-control bot commented Jul 9, 2025

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

@keoshi
Copy link
Contributor

keoshi commented Jul 16, 2025

First off, apologies for the delay here.

Looks good in my testing. Only have two minor comments about the resulting layout.

Tabs not aligning with the title

Could we use the version of the tabs where there's no horizontal spacing and see how it looks? Relevant Linear issue: https://linear.app/a8c/issue/DS-202/tabs-create-a-variant-where-tabs-do-not-have-horizontal-padding

image

Overall layout not aligning with header

Only the Responses tab content aligns with the new header. There's a bigger disparity of the layout in the Integrations page, but it's also applicable to the About page. The headers have been optimized for wider pages, so not sure if we need to solve this (or how we'd solve this), so just noting in case there's any ideas floating around.

image image

More importantly, how soon are we planning to land this?

This is one of those changes that sounds great in theory but in practice it falls a bit short for now. If shipped right away, it creates inconsistency with other Jetpack analog pages that do have a branded header. Forms would be the only one that looks different, for no apparent reason. Especially since the Next Admin hasn't landed yet either.

This is a change needed across the entire suite of products, so I wonder if we could apply this effort in a unified way. That would enable to update all of them at the same time, and be prepared for when Next Admin ships.

@simison
Copy link
Member Author

simison commented Jul 16, 2025

Thanks for sharing!

More importantly, how soon are we planning to land this?

I'd rather get it solid polish-wise before landing, but otherwise no blockers for getting this as soon in as we're ready. Next release in August?

I'm not too concerned about inconsistencies across because managing those tends to hold us back more than I think it's worth in gains with consistency, but I do appreciate leaving things in half-state would not be great either.

Would it help if we componentize this for Forms, and then it's ready to be picked for other headers? What if Zap updates a few products too?

Forms would be the only one that looks different, for no apparent reason. Especially since the Next Admin hasn't landed yet either.

Goal is to start preparing for Next Admin as we'll need to be ready for testing it early with CIAB where Jetpack Forms will be present. So now is the time, not later. :-)

@simison
Copy link
Member Author

simison commented Jul 16, 2025

Note to self: explore if DataViews has (or will soon have) the header as ready-to-use component, or otherwise avoid needing to create a temporary component just within Jetpack.

@keoshi
Copy link
Contributor

keoshi commented Jul 16, 2025

Would it help if we componentize this for Forms, and then it's ready to be picked for other headers?

This would be fantastic, thank you.

What if Zap updates a few products too?

This would obviously be the best! Perhaps creating the component and documenting its use would be a solid MVP?

@simison simison changed the title Forms: match dashboard header with typical WP dataviews headers Forms: prepare Forms header for Next Admin visually Jul 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Contact Form [Package] Forms [Status] In Progress [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants