External Media / AI Image Generator: update button style

[jeherve]

See #39934

Proposed changes:

Let's change the overall styles of the 2 buttons ("Select Image" and "Generate with AI"):

• the buttons should be 40px high, like in Core. See Components: Logistics for transitioning to new sizes WordPress/gutenberg#46741
• the buttons should use the secondary style variant by default, to match the "Insert from URL" button.
• the buttons should take the full width of the placeholder on mobile devices.

Desktop	Mobile

Warning

This PR only addresses the design issues outlined in the comments of #39934. It does not remove or make any changes to the duplicate "Generate with AI" button or the "Select Image" button, as we discussed in #39934 and #39933. This is something we can do in a follow-up PR, after more discussion if necessary.

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

See conversation in #39934

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

• No

Testing instructions:

Note

This needs to be tested in different enviroments:

• With the latest version of the Gutenberg plugin and the latest version of WordPress, like on WoA on WordPress.com Simple
• On a site using the latest version of WordPress, but not the Gutenberg plugin.
• On a site using WordPress 6.5.

1. Start by connecting your site to your WordPress.com account
2. Go to Posts > Add New
3. Add an Image block
4. View the different options, both on desktop and on mobile.

Once you've done this, you will also want to test the other blocks using the External Media option:

• Core Gallery block
• Tiled Gallery block
• Slideshow block

[github-actions]

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 WordPress.com Simple 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, and enable the fix/external-media-button branch.

• To test on Simple, run the following command on your sandbox:

  bin/jetpack-downloader test jetpack fix/external-media-button
  

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

[github-actions]

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 Team Review, ...).
  
• ✅ 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 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Choose a review path based on your changes:
   • A. Team Review: add the "[Status] Needs Team Review" label
     • For most changes, including minor cross-team impacts.
     • Example: Updating a team-specific component or a small change to a shared library.
   • B. Crew Review: add the "[Status] Needs Review" label
     • For significant changes to core functionality.
     • Example: Major updates to a shared library or complex features.
   • C. Both: Start with Team, then request Crew
     • For complex changes or when you need extra confidence.
     • Example: Refactor affecting multiple systems.
3. Get at least one approval before merging.

Still unsure? Reach out in #jetpack-developers for guidance!

---

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

• WordPress.com Simple releases happen semi-continuously (PCYsg-Jjm-p2).
• WoA releases happen weekly.
• Releases to self-hosted sites happen monthly. The next release is scheduled for November 5, 2024 (scheduled code freeze on November 4, 2024).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[keoshi]

Thanks for spinning this up so quickly, @jeherve! Appreciate you.

Styling

• ✅ With Gutenberg, all buttons look great.
• 🟠 Without Gutenberg, I see the 40px height is being forced, but all other buttons are 36px tall.

Not sure what's the best way to handle this difference; cc'ing @jasmussen for guidance.

With Gutenberg	Without Gutenberg

Spacing

• ✅ All good here!

Breakpoints

• 🟠 Still seeing the buttons next to each other when the image block is included in a narrower parent element (e.g.: columns).

This one is not strictly about media queries and screen sizes, unfortunately. @jasmussen Can you please let us know what's the canonical way Core handles this? Are you using container queries or something else? Thanks in advance.

[jasmussen]

Without Gutenberg, I see the 40px height is being forced, but all other buttons are 36px tall.

Good point. This is going to be addressed in 6.7, releasing Nov 12th. Whether you want to omit those height changes until then, or do something else in the mean-time, not sure what's best.

For what it's worth, it's been a mistake to introduce that height prop the way it was done, this has been acknowledged in the main issues. It was just a height change and should not have been opt-in.

[jasmussen]

Still seeing the buttons next to each other when the image block is included in a narrower parent element (e.g.: columns).

@jeherve this can be solved if you include both .is-small and .is-medium in the responsive rules that stack the buttons. Though in 6.7, on the smallest state, the placeholder isn't even shown at all, it will show only the "Add media" button in the block toolbar.

[keoshi]

This one is not strictly about media queries and screen sizes, unfortunately. @jasmussen Can you please let us know what's the canonical way Core handles this? Are you using container queries or something else? Thanks in advance.

Is this handled by .is-medium perhaps? 🤔

Edit: ignore my comment, Joen responded above.

[jasmussen]

It's a resizeObserver under the hood, that's used for the placeholder componentry. But it adds classes, is-small, is-medium, and is-large depending on the placeholder width. This mainly becomes someting to be aware of when you change the DOM of the plugin, notably the wrapper around the two buttons here looks like it caused some of the incorrect stacking.

[keoshi]

This is going to be addressed in 6.7, releasing Nov 12th.

Thanks for the context, @jasmussen!

@jeherve considering the next Jetpack release is happening on November 5th, I'd say we should include the 40px change. Even if it causes differences in previous versions, that's the most future-proof option.

[jeherve]

his can be solved if you include both .is-small and .is-medium in the responsive rules that stack the buttons.

I just pushed 64dfc80 to attempt to address that.

Without Gutenberg, I see the 40px height is being forced, but all other buttons are 36px tall.
This is going to be addressed in 6.7, releasing Nov 12th. Whether you want to omit those height changes until then, or do something else in the mean-time, not sure what's best.

This is annoying since we ideally want to support both the "soon to be current" version of WordPress (6.7) as well as the previous version (6.6).

[keoshi]

This is annoying since we ideally want to support both the "soon to be current" version of WordPress (6.7) as well as the previous version (6.6).

The way I see it we're still supporting both, only optimizing for the newer version. It's not that different from a progressive enhancement: it won't appear broken in 6.6, but will it definitely look better from 6.7 onwards.

The alternative seems to not overcorrect right now which would mean:

• Buttons won't look right with Gutenberg installed. This includes all WordPress.com sites.
• When 6.7 ships, the buttons won't look right.
• It won't be future-proof, which means we would have to push another update later on.

[keoshi]

Looks great in my testing after the latest change! Thanks again, @jeherve 🌟

[dhasilva]

Code looks good. TIL about __next40pxDefaultSize.

On a fresh JN site I get this when the sidebar is removed, under a narrow range of window widths: