Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

List view: Show placeholder material when a block is in placeholder state #64531

Open
jasmussen opened this issue Aug 15, 2024 · 3 comments
Open
Labels
Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.

Comments

@jasmussen
Copy link
Contributor

When an image block is in a placeholder state, it shows a literal gray-with-diagonal-line placeholder material to indicate what it is. Shown here, an image, and a placeholder image:

image and placeholder

In the list view, images have little thumbnails that show up next to them:

List view before

Because images in a placeholder state are not that useful, it might be useful to further highlight that, by showing the same placeholder material for blocks in said state:

List view after

@WordPress/gutenberg-design

@jasmussen jasmussen added Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement. labels Aug 15, 2024
@hanneslsm
Copy link

One argument against adding a placeholder thumbnail in the list view is that blocks without content are not rendered on the front end.
I feel like adding a thumbnail would not differentiate the block enough from ones that have content.
However, additionally the Image Block (and any other blocks without content) could be greyed out in the list view to indicate that they need to be filled.

@richtabor
Copy link
Member

One argument against adding a placeholder thumbnail in the list view is that blocks without content are not rendered on the front end.

I wonder if there should be a condition where image blocks without images do render on the front-end. Like if there's an aspect ratio, or a hidden attribute. That way you could share designs with folks, even without imagery.

However, additionally the Image Block (and any other blocks without content) could be greyed out in the list view to indicate that they need to be filled.

But then it may just as well feel disabled, indicating you can't upload an image.

@jasmussen
Copy link
Contributor Author

I wonder if there should be a condition where image blocks without images do render on the front-end. Like if there's an aspect ratio, or a hidden attribute. That way you could share designs with folks, even without imagery.

Would that be a prerequisite for this issue, you think? And it sounds useful to me. Can even be something like <img data-is-placeholder alt="" [...] />, with a special CSS style for the empty image.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants