Editor settings — Featured image UI differences vs dotorg

[ciampo]

Originally reported in p1618262639053800-slack-CRNF6A9DX

Steps to reproduce the behavior

• In WordPress.com, edit a post
• Click the cog icon in the top right to open the sidebar
• Under the Post tab, open the "Featured Image" section and add a featured image
• Notice differences with dotorg

What I expected to happen

The Featured Image section looks and behaves like in the dotorg counterpart

What actually happened

• The two-button thing definitely looks wrong.
• The featured image size looks off in comparison.
• There’s some weird interactions with the image replace outside of the visual aspect that I haven’t commented on yet that are maybe related to it being custom?

Context

Browser / OS version

All browsers

Is this specific to the applied theme? Which one?

All themes

Does this happen on simple or atomic sites or both?

All issues appear on simple, but only some on Atomic sites (to be investigated)

Is there any console output or error text?

No

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

Affects all sites, but does not prevent users to upload / change featured image

Reproducibility (Consistent, Intermittent) Leave empty for consistent.

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

[ciampo]

Here's a more detailed analysis of the differences that I've found between WPcom and Gutenberg for the Featured Image section:

What	Gutenberg screenshot	WPCom screenshot
No featured image selected
With featured image selected

Additional "Selecting a featured image is recommended for an optimal user experience." text when there's no selected featured image (marked with 1 in screenshots)

The additional text seems to come from the AMP plugin.

Extra "Select Image" primary button (marked with 2 in the screenshots above)

This button is added by the Jetpack plugin, but it seems like a bit of a repetition. The difference with the "Replace Image" button is that, while the "Replace Image" opens the media gallery directly when clicked, the "Select Image" button first shows a dropdown allowing the user to choose between different sources of images

Those same sources can be also selected from the media gallery modal itself, which is why I believe we could simply remove this button from the Featured Image section

The featured image preview in WPCom does not entirely fill its designated area (marked with 3 in the screenshots above)

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

[simison]

Those same sources can be also selected from the media gallery modal itself, which is why I believe we could simply remove this button from the Featured Image section

I think there was a project in the past to bring those media source selections to editor canvas for a reason;

• E.g. some sites that aren't iframed (many more as 3rd party cookies become reality) are not getting the Calypso media modal, hence they lose those features.
• They're easier to discover in editor canvas rather than in media library. The dropdown is present also in image block, cover block, etc.

I see it works on my Atomic site likely as intended:

[ciampo]

I think there was a project in the past to bring those media source selections to editor canvas for a reason

I see the benefits of adding such a button. But in the context of the featured image, this button is adding a lot of duplicated functionality (e.g. in the screenshots that you posted, clicking or dragging an image on "Set featured image" would already work).

Regarding this this specific matter, what should we do then?

1. We could remove the Jetpack "Select Image" button from the featured image section, and get back to parity with dotorg
2. We can keep the "Select Image" button from Jetpack. If we do so, we could look into improving the current situation by removing the "Replace Image" button when the "Select Image" is rendered.
3. Any other "in-between" approached

Personally, I like option 1 more — it removes complexity and get closer to the dotorg experience.

[simison]

I would expect;

• No duplicate "Replace image" button
• Only "Select image" button, but it opens up the dropdown
• Image preview width work just like it does in core

It's not as much a question of .org consistency (after all we have our own custom media library) but more of a question of keeping things consistent across .com. Here's the same feature for image block:

Note that the feature isn't shipping to Jetpack sites — only in Jetpack codebase for .com sites (Simple & Atomic).

[simison]

No duplicate "Replace image" button
Only "Select image" button, but it opens up the dropdown

I looked closer and understood a bit better the crust of the problem:

• When no featured image is selected, this works well. We have "select image" button with a dropdown appearing.
• When an image is selected, we have two buttons. We should have only "replace image" _with dropdown", no "select image" button.
• There might be some small alignment issues with buttons.

@ciampo does this sound accurate / clear?

[ciampo]

@ciampo does this sound accurate / clear?

I think so. I opened Automattic/jetpack#19555 to track this separately.

I will proceed and do the same to track the preview image size separately too, and then I will close this issue

[ciampo]

Opened #52010 to track the preview image sizing.

Closing this issue in favour of the 2 smaller issues linked above

[simison]

Split another issue to Gutenberg about the blurb above the featured image area: WordPress/gutenberg#30904