Align placeholder and iIllustration states between Cover and Image blocks

[richtabor]

Description

The Cover block remains in a placeholder state regardless of whether it is selected, whereas the Image block switches to an illustration state when not selected, returning to the placeholder state when selected.

To create a more consistent user experience, I propose aligning the behavior of both blocks so they both display the placeholder state only when selected, and the illustration state when not selected—like the Image block does.

Steps to Reproduce

1. Insert a Cover block and an Image block in the editor.
2. Observe the Cover block remains in placeholder state regardless of selection.
3. Select and deselect the Image block to observe it switching between placeholder and illustration states.
4. Note the inconsistency in behavior between the two blocks.

Expected

Update the Cover block so that the Cover and Image blocks behave consistently, with:

• Placeholder state when actively selected.
• Illustration state when not selected.

Actual

The Cover block stays in placeholder state regardless of selection, while the Image block switches between placeholder and illustration states based on selection.

Visual

CleanShot.2024-11-05.at.12.15.16.mp4

[rohitmathur-7]

Hii @richtabor ,
I have raise a PR for this issue.
Can you please go through the PR and let me know if anything else is required.
Thanks! 🙇

[t-hamano]

Does what is proposed here also apply to the Cover and Image blocks?

PRs have been submitted that attempt to apply a similar approach to the three blocks:

• feature: add consistant illustrator to audio block #66838
• feature: add consistant illustrator to file block #66839
• feature: add consistant illustrator to media text block #66841

[jasmussen]

Hey, thanks for the issue. In principle I agree with bringing some consistent behavior across these. Across a couple of PRs that Aki mentioned above, I've given a bit of conflicting feedback though, so I'd love to outline my thought process here, so it doesn't block anyone. First and foremost being that they are not strong opinions, so I'm happy to defer to someone who has.

My main thought process is that the placeholders in general serve as useful micro-onboarding opportunities. Each of them do. If we are mindful of responsive behavior (#64288), then it's a great opportunity especially for the more uncommon blocks like Cover or others, to surface useful presets or options that might otherwise not have been easy to find. An empty group, for example, is virtually useless when it's just an appender, so the ability to show row/stack/grid shortcuts is an excellent way to bring contextual emphasis to those options. For non-core blocks, this onboarding opportunity might be even more important, coming to mind an OpenStreetMap block that requires an API key in order to function.

That's the motivation for having a placeholder feature in the first place. Where I think it's okay to add the literal placeholder state (aka "illustration state") to some blocks and others, is exactly in differentiating between which basic/complex, and whether that literal placeholder state is actually visually representative of the end result. Context here is that this literal placeholder visual—a box with a line through it—is a callback to desktop publishing and newspaper days, where a similar box would be drawn out in a layout to indicate: visual goes here.

In the case of Video and Image, they are simple: you can drag them from your desktop right into the canvas and you're done. The literal placeholder visual also works well, because it indicates just that: visual goes here.

Cover and Media/Text probably fit that bill too, as far as being visual. But in the case of audio, or even "File" block, this is less the case. Are there other abstract representations of these that would be better fits? I'm mostly seeking to avoid inserting a pattern full of gray blobs, and you've no idea which ones are images or which ones are files, audio, or otherwise. Perhaps we should have a placeholder illustration that matches each filetype category available in the media library?

None of this is blocking, I merely wanted to provide this reasoning in one consistent place. Feel free to blaze a trail!