Add Image Size dropdown for Media & Text block

[david-szabo97]

Closes: #24688

Description

Add an Image Size dropdown for Media & Text block. We can change the size of the image for the Image block, but we didn't have the option to do the same for Media & Text block. Which caused the Media & Text block to always render the full-size image.

NOTE: Default value for Image Size is Full. I think Large would be better in general, but that would break existing posts.

How has this been tested?

1. Open Editor
2. Add Media & Text Block
3. Select an image from the media library
4. Make sure Media & Text Block is in focus
5. You should see an Image Size dropdown in the right sidebar

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[david-szabo97]

@ockham Thanks for the feedback! Replaced them with shorthand.

[jeyip]

I'm not sure this is behaving as I'd expect. It looks like the "Thumbnail, Medium, Large, Full" dropdown only modifies the media resolution, and not the media dimensions (Ex. Width / Height). I'm still wrapping my head around the block editor user experience and all of its quirks, so someone else may have more insight. Maybe @ockham ? 🙂

Media & Text Block	Image Block

[david-szabo97]

@jeyip Actually, that's the correct behaviour here. The dimensions of the media is controlled by the Media & Text Block. Might seem strange but the image always fits it's cell so the Image Size won't affect the dimensions.

[jeyip]

I see why, from a technical perspective, the dimensions don't change.

I, however, as a WordPress user, would expect the image to resize appropriately. The reason I think this is because if the images don't resize, the only feature this introduces is the ability to display a set of more or less pixelated images. Although there might be a use case, I don't think this captures the intention of the original issue. @nosolosw or @deskoj would either of you be able to speak more about your expectations?

[Copons]

I think this has lots of value, but I agree that "image size" sets the wrong expectation.
What about "image quality" instead?

[david-szabo97]

I'm not sure what would be the best approach to present this to the user. It's more like manual image optimization since the block itself can't decide which size of the image should be used.

What about "image quality" instead?
I think this would make sense!

[jeyip]

I think this has lots of value, but I agree that "image size" sets the wrong expectation.
What about "image quality" instead?

I think this would make sense!

I think renaming it image quality makes a lot of sense too 👍

I'm still curious about the value proposition, and I think I might be missing something. @david-szabo97 or @Copons would you mind elaborating a little bit about the use case for image quality? (Thank you ahead of time for the patience 🙏 ) Is it to improve frontend loading speed?

The code looks good, so this has my +1 when we resolve this conversation.

[Copons]

I'm still curious about the value proposition, and I think I might be missing something. @david-szabo97 or @Copons would you mind elaborating a little bit about the use case for image quality? (Thank you ahead of time for the patience 🙏 ) Is it to improve frontend loading speed?

Yeah, pretty much.
Let's say your content is 700px wide, and the image in the Media & Text is half that, 350px.
You upload a 1 bazillion megapixel image. The block uses it at full size, causing visitors to hit their monthly data limit, when a smaller version of that image would have done just as nicely.
(It should also improve the editor speed, but I'd have to double check this.)

It's also good to have the same options for similar features.
It makes the UX less inconsistent, especially in consideration of the fact that users does not need to know or understand that Image and Media & Text are different under the hood.

[jeyip]

Let's say your content is 700px wide, and the image in the Media & Text is half that, 350px.
You upload a 1 bazillion megapixel image. The block uses it at full size, causing visitors to hit their monthly data limit, when a smaller version of that image would have done just as nicely.

Thanks for the explanation. Much appreciated :)

[david-szabo97]

@jeyip @Copons

I think renaming it image quality makes a lot of sense too 👍

+1, what do you think about merging this and I'll follow-up with a PR for the rename?

The label is hardcoded, so I'd make it configurable via prop in a separate PR.

gutenberg/packages/block-editor/src/components/image-size-control/index.js

Line 40 in b506d04

label={ __( 'Image size' ) }

[Copons]

Sure @david-szabo97 sounds good to me! ✨