Polish the flow to set the featured image as the cover background

[jameskoster]

This is an awesome feature, but the design could perhaps use a little polish. Here's the current implementation:

I didn't spot it at first – my eye mistook the "[icon] Add media" area of the toolbar for a single button.

An alternative would be to add an option in the "Add media" (and subsequent "Replace") popover:

I think the label can be helpful here. Additionally we might surface the option in the placeholder state:

The description should be updated too :)

---

Finally, in the site editor it would be nice to have some visual feedback on the canvas when the featured image is set to be used by a Cover block. At the moment it looks empty:

Perhaps we can re-use the Featured Image placeholder treatment:

[jasmussen]

One of the design solutions we explored was this one:

Essentially:

• If a featured image is set in the inspector, then the replace button will show the toggle
• If you untoggle, the image is just removed

The benefit of this approach is that it doesn't expand the block toolbar (despite being in the mockpus, I don't think we should change the "Replace" label), and it would scale for any media block that has a "Replace" in the toolbar.

[jameskoster]

Oh yeah, that's virtually the same idea :D I don't know that we need to hide the other options (upload / open media lib) when the featured image is being used though?

[jasmussen]

I don't know that we need to hide the other options (upload / open media lib) when the featured image is being used though?

I like them hidden, because it simplifies what happens if you choose any of those options. I.e. what happens to the toggle if you upload an image?

[jameskoster]

what happens to the toggle if you upload an image?

I don't think anything needs to happen?

The popover is exposed in two flows: 1. Choose media, 2. Replace media. In both flows I would expect to see all options immediately. Incidentally this is how these flows work currently, and I'm not sure that the introduction of the featured image option warrants any changes 🤔

[jasmussen]

Well the toggle would need to be untoggled, if you replaced the featured image with a single one, right?

One additional gotcha we ran into on the PR, is that we can't necessarily "remember", at least beyond a single-session basis, what image was set before the toggle was flipped. So in some most cases, doing so will just remove the image, reverting to a setup state or solid Cover bg color.

[jameskoster]

Well the toggle would need to be untoggled, if you replaced the featured image with a single one, right?

I'm probably missing something obvious but why is that a problem?

So in some most cases, doing so will just remove the image, reverting to a setup state or solid Cover bg color.

Doesn't this issue exist with the current implementation as well? In any case I think that's a symptom of the featured image option behaving as a toggle. Maybe it doesn't need to. Another option would be to include a 'Clear media' option in the 'Replace' popover.

[jasmussen]

I'm probably missing something obvious but why is that a problem?

It might not be in practice! I feel like it might confuse you with the ability to upload a new featured image from there. It seems like if that's a flow we want to enable, the dropdown (and initial setup state) likely needs additional context and a rearrangement to handle that.

[jameskoster]

Perhaps It should only be possible to instruct the Cover to use the featured image when one has already been set. In fact that highlights another issue with the current implementation:

cover.mp4

In the video above I can't edit the contents of the cover after setting it to use the featured image, because a featured image hasn't been set yet.

I suppose another option would be to trigger a "choose a featured image" UI.

[jasmussen]

Perhaps It should only be possible to instruct the Cover to use the featured image when one has already been set. In fact that highlights another issue with the current implementation:

Yes, the challenge there is using the Cover for featured images in archive templates where it will only be filled out in the right contexts. Another option is to show dashed lines to indicate the state:

That's Media & Text instead of Cover, but the principle would be the same.

[jameskoster]

Yep, I think that makes sense. We might even do something similar in the post editor if you set the cover to use the featured image, but one isn't set yet...

Here are some prototypes.

Post editor, featured image is set

featured-image-post.mp4

Post editor, featured image is not set

post-editor-no-featured-image.mp4

An alternative to the dashed placeholder here would be to simply open the media library and ask the user to select or upload a featured image.

Site editor

featured-image-site.mp4

Try the prototypes here.

[jasmussen]

An alternative to the dashed placeholder here would be to simply open the media library and ask the user to select or upload a featured image.

The problem with this is that if you save the page in this state, then reload, the media library will pop up for every block that has this state. Unless we build gnarly smarts.

I like your prototypes! I'd keep a singular "Replace" word instead of "Replace media", though.

[jameskoster]

The problem with this is that if you save the page in this state, then reload, the media library will pop up for every block that has this state. Unless we build gnarly smarts.

Oh no, I meant that the modal would appear when you actively click "Use featured image". If you were to then exit the media library without setting a featured image the block would simply remain unchanged. Just for completeness, here's a video:

post-editor-featured-image.mp4

[draganescu]

@javierarce one issue with the media replace flow integrating the use featured image option is that use featured image is a toggle menu item, while the others are normal menu items that action something else. That means the only item that gets a pressed state is this one, while the others never are pressed.

[jameskoster]

Why is that a problem? 🤔

I'd expect the menu to look something like this:

Clicking the "Use featured image" menu item would toggle the option off – effectively its the same as clicking "Clear media".

Choosing either of the other options would also toggle the "User featured image" option off after uploading / choosing an alternative from the media library.