[Proposal] Allow easier setting of Featured Image

[iamthomasbishop]

Problem

The current Featured Image flow has a few issues:

• Featured Image is only available in Post Settings screens, which means it can get buried and not easy to locate

• If you've set an image from the post body as a Featured Image, it's not obvious which image is selected because there is no visual cue

Solution

To solve the above issues, we should we should supply an intuitive "shortcut" of sorts to achieve this – in context. This could be on the first image of the post, which is typically the image users expect to use.

• Add a quick action button to the Image block settings sheet

• Add an indicator over the image that is being used as the Featured Image – similar indication that we have on GIFs in Aztec

• Optionally, if the Featured Image is already set, we could display a dialog that confirms whether the user wants to replace the current image.

It might look something like this:

Aztec

If we do any work on the Aztec end, I'd recommend we simply add the Featured badge to the image that's being used as the Featured Image.

[hypest]

May I suggest adding the in-content shortcut way as a complementary to the one via the Post Settings? Reason is that via the Post Settings, the user can select any image the image picker can offer (local device, Free Photo Library, taking a new photo, WP Media library), while the in-content shortcut will obviously be for the images already in the post.

[iamthomasbishop]

@hypest To be clear, this proposal wasn’t meant to be a replacement for the UI in Post Settings, but as a complimentary piece to better align with user expectations.

[SiobhyB]

Just making a note of the relevant open issue for the web here: WordPress/gutenberg#13795

@iamthomasbishop, it's mentioned in the comments of that issue that a common error around featured images comes from themes defining specific sizes:

How should we account for those errors?

[jd-alexander]

At @SiobhyB @iamthomasbishop I am looking at the flow here and I have some questions I wanted to ask both of you so I can be on the same page as I will be doing a pair programming session with @SiobhyB to navigate this task. My questions are as follows:

1. Would the "Set as featured image" button would be dynamic? Meaning would it contain the text "Clear featured image" or "Remove featured image"? the reason I am asking this is since we are adding the featured image behavior to an existing Image / Image block and we arent adding a Featured Image block, so I want to understand if when we clear/remove a featured image the only thing we are doing is removing that flag from the image and the Image will remain.

2. Along with the question above, I am wondering how we will go about replacing the featured image. Would it be best if the user followed the normal image edit flow of using the settings tooltip to launch media options? "

3. Since we are allowing the first post in the image to be set as featured image what happens if that image is set as the featured image and then the user moves another image block above the featured image - image block? Is that the reason why we need to "Replace current" dialog? And are we saying that the "set as featured image" should only shown in the image block that's at the top? and any featured image - image block that already exists would only contain the set as featured image button?

Let me know if my questions are clear or if I need to expound anymore.

[SiobhyB]

Noting that I did more digging into the The featured image should have a size of at least.. notice that I touched on here.

We don't currently display this error/notice in the normal flow for setting a featured image within the app and it's not critical i.e. the featured image is still set but some themes simply may not display it on the frontend if it doesn't meet size requirements. It also seems like most newer themes will automatically adapt to the image's size. Although I don't think there's a need to account for this message as a part this PR, the notice does give users a good idea of best standards that may help with search results, I've therefore created enhancement requests for Android here and for iOS here.

TL;DR: I don't feel like we need to account for the The featured image should have a size of at least... notice in this PR, as it isn't accounted for in the app's main featured image flow and doesn't prevent a featured image being set. Let me know if you have any further thoughts on that!

[SiobhyB]

👋 @iamthomasbishop, I wanted to check in with you on the state of this feature so far. From the designs, I saw there was a Clear all Settings button but wasn't sure how to implement this with the feature. After chatting with @jd-alexander, I went with a Remove as Featured Image button that only displays if an image is already featured, else the Set as Featured Image button displays:

Set as Featured Image	Remove as Featured Image

The basic "replace" dialog from the mockup is also in place, with a Featured banner that overlays the image block when an image is featured. When the Set as Featured Image button is tapped, the bottom sheet closes and the snack bar displays confirmation:

Replace Dialog	Confirmation Dialog

Does this seem like it's on the right track so far to you? Looking forward to hearing any suggestions or guidance for improvements. :)

[iamthomasbishop]

I saw there was a Clear all Settings button but wasn't sure how to implement this with the feature. After chatting with @jd-alexander, I went with a Remove as Featured Image button that only displays if an image is already featured, else the Set as Featured Image button displays:

@SiobhyB It makes sense to swap the button for “remove as...” when set, good thinking.

Replace Dialog

The Dialog looks good, I have a suggestion, but it is beyond scope of the original proposal, so if necessary we can break it off into another ticket:

It may be useful in this context to see a small thumbnail of the current featured image on the “replace” Dialog so that you can easily reference it without having to dig through post/page settings. Perhaps it could look similar to how we are showing the focal point on an image on Cover block settings (sans the crosshairs and top-right button):

with a Featured banner that overlays the image block when an image is featured

Is there any way we use the Badge (unsure of proper name?) component here? I thought we were showing it on the top left corner of GIFs, but maybe that’s only on the native Media Library side 🤔. If we don’t have a component for that, we can use what you’ve got here, with one small request: can we round the corners to the same radius as the mover buttons on Gallery images?

When the Set as Featured Image button is tapped, the bottom sheet closes and the snack bar displays confirmation:

Instead of a Snackbar, would it be possible to use the Compact Notice component here? I realize the original idea used a Snackbar, but we’ve since introduced this more compact component. 😀

Does this seem like it's on the right track so far to you?

Definitely, it's looking great! One more small request: can we please add a border at top of the “set as”/“remove as” action button to add some separation?

Thanks for the ping, let me know if you have any other questions and/or need further review!

[SiobhyB]

Thank you for this, @iamthomasbishop! :) I've taken the following actions based on your comment:

• I've created a new GitHub issue to keep track of your suggestion at Mobile: Add image previews to Image block "Replace Featured Image" prompt WordPress/gutenberg#30410.
• I couldn't find a Badge component, or similar, so I repurposed the FeaturedImageBanner component into one in order to make it more re-usable. I also copied the styles from the buttons being used over the gallery block, so that the corners are rounded.
• I removed the snackbar so that we're using the new compact notice you mentioned.
• I added a border to the top of the button.

Set as Featured Image	Remove as Featured Image

Replace Dialog	Confirmation Dialog

[hypest]

Reopening as it was inadvertently closed by a PR merge.

[SiobhyB]

I'm closing this as the new button was added to iOS in #3449 and to Android in WordPress/gutenberg#31705. There are a few outstanding enhancements, but those are tracked in separate issues.