Placeholders look broken when block is narrow, e.g. when used in a grid

[noisysocks]

Blocks with placeholder states do not scale to very narrow containers. Example here of an Image placeholder in a narrow grid layout:

There's a separate issue for updating just the Image block has been updated (#54867), but the problem is present for every block that uses the Placeholder component. The same solution can be applied:

Key here is leaning into a few principles:

• The placeholder content (title, text, buttons) are available for large and medium contexts.
• In small contexts, we rely on the block toolbar for having a single primary CTA. This affords a text label that will not be cropped.
• In that same small context, either the gray unselected placeholder material is used, or the entire spot is a plus button that opens the quick inserter (as it is in empty columns or groups, for example).

Figma.

[jasmussen]

Based on the feedback on this thread, I've gone ahead and updated the issue and shuffled the labels! This still needs a dev, although #54867 is underway (and please help that PR land as well), that will only fix the issue for the Image block. It needs to be solved for the general component as well.

[t-hamano]

Update: #54867 added block controls to the Image block to always add media, and in narrow containers, the Image block placeholder always shows with the illustration. A similar approach could be applied to other blocks.

However, there is an issue with slight flashing when inserting blocks in narrow containers:

366028943-3cb45d00-95de-4f89-a397-6ee6da7ae1be.mp4

We've tried to solve this problem in #54867, but haven't found an ideal solution yet.

I'd love your feedback on how to fix this.

[ndiego]

@t-hamano @jasmussen now that #54867 has been merged, can this issue be removed from the 6.7 project board, or punted to 6.8. I know not all of the placeholders have been addressed.

[jasmussen]

Yes, can definitely be removed. Thanks!

[t-hamano]

I agree. This issue could be considered an enhancement and it can be punted since it contains so many tasks.

[jasmussen]

Noting I opened #66563, which is related to this.