External Media: remove "Select image" block control and extend Add image block toolbar with Jetpack options

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.

https://jetpack.com/

Other

1.59k stars 798 forks source link

External Media: remove "Select image" block control and extend Add image block toolbar with Jetpack options #39933

Open annezazu opened 4 days ago

annezazu commented 4 days ago

With Jetpack installed, the image block has both "Add image" and "Select Image". These prompts are nearly identical yet have different experiences with "Select Image" offering additional options. In my mind, we should remove the "select image" and extend the "add image" option to include the additional Jetpack powered items:

jeherve commented 3 days ago

The "Add Image" block control was added in https://github.com/WordPress/gutenberg/pull/64320

We could remove it in Jetpack's External Media feature, but it seems like it would undo the work that was done to improve the usability of the block on smaller devices. We would also have to remove it only when no image has been provided yet, since the "Replace" block control would probably have to stay.

With that in mind, I'm not sure what's the best course of action on this. Maybe it would be better to add the additional media sources to the new "Add Image" block control, to bring back some consistency?

@keoshi What would be your take on this?

keoshi commented 2 days ago

I agree with @jeherve that we should probably not undo a usability enhancement that was recently shipped.

Would also agree that the best course of action is to make the dropdown as consistent as possible by bringing in the additional options Jetpack provides.

For what it's worth, I do not see the “Add image” button with Jetpack on a self-hosted site. I do see it on WordPress.com, so I wonder what's causing this difference in UX.

@annezazu Can you explain what the “Current media URL” is used for? Looks very out of place in that menu where the initial prompt is “Add image”.

annezazu commented 2 days ago

Hah! Incredible. This is coming from Gutenberg. I've updated this issue in that case to the following: remove "select image" from Jetpack and extend the add image option to include the additional Jetpack-powered items. @jasmussen does this sound right to you? Right now, the interface is just a bit cluttered with duplicated options and I find it really confusing to navigate with Jetpack installed.

annezazu commented 2 days ago

Opened this in Gutenberg as well since we should only show "add image" on a smaller screen size IMO: https://github.com/WordPress/gutenberg/issues/66619

annezazu commented 2 days ago

Can you explain what the “Current media URL” is used for? Looks very out of place in that menu where the initial prompt is “Add image”.

I'm so sorry. I missed this on the first read somehow trying to bring this together.

This current media URL simply links to the current media item. This is helpful in situations where, for example, a theme provides a site logo and you want to see what image it's linked to OR if a theme has an external image it's referencing.

jeherve commented 2 days ago

remove "select image" from Jetpack and extend the add image option to include the additional Jetpack-powered items.

I think that would make sense for this block. Ideally, we'd want to do the same for the other image-related blocks to ensure consistency.

Edit: I see now that @keoshi made similar observations in https://github.com/Automattic/jetpack/issues/39934#issuecomment-2449565760

Slideshow block (Jetpack)

Tiled Gallery block (Jetpack)

Gallery block (Core)

Featured Image picker (Core)

This one is obviously a bit different since it's not a block itself ; we may not have to make any changes there.

Do you know if there are any plans to make such changes to the Core Gallery block? I couldn't find any references in https://github.com/WordPress/gutenberg/issues/54867

keoshi commented 2 days ago

@annezazu Makes a lot of sense when an image has been selected, but is it not confusing when no image has been picked?

Some of the issues I see are:

Doesn't directly relate to any of the options above and doesn't seem actionable.
- Should the text read something like: Insert media from URL?
The input placeholder reads “Search” but it doesn't seem connected to the Media Library.
- Should it match the placeholder under the “Insert from URL” button and be Paste or type URL?

keoshi commented 2 days ago

Yes, @jeherve, agreed. We should look at making those dropdown options universal and ubiquitous wherever media manipulation is possible. Ideally we could have the same dropdown menu (with additional options of “Upload” and “Insert from URL”) in the “Add image” button.

From https://github.com/WordPress/gutenberg/issues/66619 however, it does sound like @annezazu is suggesting that the “Add image” button should only be available when the placeholder options aren't, so I guess it terms of Jetpack we need to:

Account for both environments — placeholder and toolbar button — depending on screen size.
Align dropdown options between both, potentially considering the additional options needed in smaller screen sizes.

Does this sound right?

jasmussen commented 2 days ago

Created a small PR here, to improve the situation: #39983 —it's unfinished, but it should fix the button appearance for the "Generate with AI" button at least. I'll see if I can reproduce the wrapping at the medium width placeholder breakpoint, locally in Gutenberg.