Featured image block has no size selector in Site Editor

[Humanify-nl]

Description

Recently I was happy to find that the featured image can finally be supplied with a preset image size.

However, this is only possible in the page-editor views, and not in the site / template editor. This defeats the whole purpose of setting featured image sizes for templates.

This is a major gripe as a featured image is probably the most-used block for singles, and having to resort to classic templates or custom blocks to just set image size (an age old WP standard feature) is really not the way we want to go, but reality for 2 years now.

The way it works now is you have to set all the image sizes for each single template by hand in the actual post. How is this a good idea for sites with 100 singles?

I can't just let clients have their way with images without setting a size. It creates uncontrollable design problems.

Also, when site editor and page editor have such discrepancies in how they deal with the same blocks, we create a bad UX where expectancy of how things work is constantly defied by the editor 'doing it differently, or restricting certain options for no apparent reason'.

Step-by-step reproduction instructions

1. Add a new single template.
2. Add a featured image block.
3. See the block inspector and only find these settings (screenshot).

4. Compare this with page editor:

5. Another weird quirk is that the image size selector only appears when an image is added.

Screenshots, screen recording, code snippet

No response

Environment info

• WP 6.1.1
• Default theme.
• No gutenberg.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[luisherranz]

Confirmed that differences exist between the different environments. There are also differences depending on whether the Featured Image block is inside a Query block, but only in the Site Editor.

• Post Editor

  No differences.

  No scale option, only height and width.

  • Outside of a Query block
    • Before adding a featured image
      • Height and width
    • After adding a featured image
      • Height and width
  • Inside of a Query block
    • Height and width
  Screen.Capture.on.2022-11-24.at.13-45-04.mov

• Site Editor

  Differences depending on if the block is inside a Query block or not.

  • Outside of a Query block
    • No options (height or width)
  • Inside a Query block
    • Height, width and scale
  Screen.Capture.on.2022-11-24.at.13-47-47.mp4

[Humanify-nl]

Thanks for confirming.

It would be great if we can control the appearance of these settings in theme.json, instead of predefined rules (that are inconsistent).

It is currently not possible to only give user control of preset image-sizes (and remove custom height / width). This is a much needed feature, because incorrect sized images destroys layouts and site performance.

[DAreRodz]

This part seems to be related to the "Image Sizes" option not appearing.

gutenberg/packages/block-library/src/post-featured-image/edit.js

Lines 82 to 89 in e291564

	const imageSizeOptions = imageSizes
	.filter( ( { slug } ) => {
	return media?.media_details?.sizes?.[ slug ]?.source_url;
	} )
	.map( ( { name, slug } ) => ( {
	value: slug,
	label: name,
	} ) );

The image size option list is generated using the available sizes for the media object being rendered in the editor. As single templates don't show any image (there's no postId), that list of available sizes is empty, and therefore that setting is hidden.

I am not sure if this is intended; I agree it would be helpful to allow this kind of setting even when no image is being rendered.

[DAreRodz]

5. Another weird quirk is that the image size selector only appears when an image is added.

I can confirm this. The option only appears when an image is rendered.

Home template

Post content editor

[carolinan]

The scale settings only shows if the height of the image is adjusted.
The reason why the scale setting shows in the Site Editor query example in Twenty Twenty Three,
is that the height is already adjusted in the markup of the template:
<!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"max(15vw, 30vh)","align":"wide"} /-->
The editor height setting does not display the custom height value from the template (max(15vw, 30vh).

I think showing and hiding the scale settings this way is confusing and could perhaps be improved by a help text below the height and with setting?

[carolinan]

I have tried to solve the image size issue in #46848, it could use a sanity check to see if I understood the logic correctly because there are so many conditions.