Editor settings: Featured Image preview is too small

ciampo commented 3 years ago

Steps to reproduce the behavior

On a WordPress.com simple site, create a new post
Open the settings sidebar (by clicking the cog icon in the top right of the editor)
Select the "Post" tab and scroll to the "Featured Image" section
Add a Featured Image

What I expected to happen

The Featured Image preview fills up all the available space

What actually happened

The Featured Image preview is too small and doesn't fill all of the available space

Context

This issue was part of a larger exploration (see this GitHub issue) about the discrepancies between .org and .com sites when editing a post's featured image.

Does this happen on simple or atomic sites or both?

Simple sites. Atomic sites seem unaffected

Level of impact (Does it block purchases? Does it affect more than just one site?)

Minor, as it's only aesthetic

Reproducibility (Consistent, Intermittent) Leave empty for consistent.

Screenshot / Video: If applicable, add screenshots to help explain your problem.

ciampo commented 3 years ago

Some additional context from the original exploration:

By default, the featured image preview uses the post-thumbnail version of an image (see gutenberg docs). In Gutenberg, the featured image component first tries to use that value, and otherwise uses the fallback value of thumbnail.

I tried uploading the same image to both a .org and .com site:

On .org sites, the API response for the featured image contains a post-thumbnail image size that is 1568px wide.
On .com sites, the API response for the featured image contains a thumbnail image size that is 150px wide.

The featured image preview on .dom doesn't have a post-thumbnail size, and therefore the thumbnail size option is used, which is only 150px. This causes the actual image to be smaller than the preview "area".

The counterproof is that this issue can be hack-fixed by:

Opening devtool on a dotcom editor page
In the console, switch window context to post.php
execute this code: wp.hooks.addFilter( 'editor.PostFeaturedImage.imageSize', 'my-plugin/with-image-size', () => 'large' );
Upload a featured image

It seems like a potential fix would be to simply add some code similar to wp.hooks.addFilter( 'editor.PostFeaturedImage.imageSize', 'my-plugin/with-image-size', () => 'large' ); to one of the editor plugins (like WPcom Block Editor)

gavande1 commented 3 years ago

I was triaging the issue at my end and here are my findings after reviewing the PR.

The main issue here is post-thumbnail thumbnail size is not returned on wp/v2/media/{media_id} JSON API endpoint which is used by Gutenberg for setting featured post thumbnail. This behavior is consistent with the .org site as well.

Upon further investigation found that, A theme can add support for the post thumbnails feature. The theme can also configure the size of post-thumbnail.

There might be multiple solutions to fix:

Add support of post-thumbnail to the wp/v2/media/{media_id} within WordPress core.
Add support for dedicated custom thumbnail type within the Gutenberg plugin (just like WooCommerce adds custom thumbnail size).
Add custom CSS to cover an empty area within Post Editor.

.editor-post-featured-image .components-responsive-wrapper__content {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

ciampo commented 3 years ago

3. Add custom CSS to cover an empty area within Post Editor.

I would recommend against this solution. It would make the image cover the screen estate, but the image itself would still remain blurry.

gavande1 commented 3 years ago

The other solutions will take significant time to be developed and deployed (In terms of process).

I think adding a patch within the jetpack to add support post-thumbnail JSON API to bring parity between Simple & Atomic sites can be the intermediate solution for time being.

cpapazoglou commented 3 years ago

Add custom CSS to cover an empty area within Post Editor.

I would recommend against this solution. It would make the image cover the screen estate, but the image itself would still remain blurry.

I can see your point that users may think that the actual image will be blurry, the CSS solution would only be an interim solution until the core patch is merged.

It seems to me that ultimately Gutenberg needs an image size that cannot be altered by the user. post-thumbnail doesn't sound like a good candidate cause it's both editable from themes and might be too big (eg 1568px) despite being called "thumbnail". I would suggest:

Adding add_image_size( 'editor-thumb', 250, 9999 ); (300 pixels wide and unlimited height) in our codebase and Hook into the editor.PostFeaturedImage.imageSize Gutenberg filter to change the size used to display the Featured Image preview to be editor-thumb as in #52018
Create a Gutenberg patch that does the above and wait for it to be merged

While writing all the above, I thought that except the width of the image we should also care about the aspect-ratio. The post-thumbnail which is used by themes may have a different aspect-ratio than the original image and because this exact image would be shown in the frontend it makes sense displaying it even if width > 250px. In that case, adding a patch within the jetpack to add support post-thumbnail JSON API seems like the best (?) solution, in the same time we need to define post-thumbnail if it's not already so that:

post-thumbnail not defined by theme or plugin -> 250px in width. We do this for aesthetic reasons only.
post-thumbnail defined by theme or plugin -> keep it as it is.If width > 250px, we are downloading more KBs but we are showing the correct aspect-ratio. If width < 250px, we are still showing what user will get in the frontend.

Automattic / wp-calypso