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
FSE: Most site building blocks need previews and placeholders #30029
Comments
Some initial ideas for simplest text-based blocks:
|
I am wondering about this |
I was thinking about it from the hypothetical visitors perspective, who in most cases will be logged out. It's not a strong feeling though. "Log out" works too :) |
I wonder what scope there is for these "post" block placeholders to be dynamic. While thinking about the template mosaic view for instance, it would be potentially confusing to see "The post title" in the page template. If not dynamic, they perhaps need to be even more generic. Consider the singular template which can display posts and pages. What should the Post Title block placeholder display in that case? Maybe something simpler like "The title" would work better? |
Excluded some of the comment related blocks as these will need to be broken down in to smaller pieces (see #24101). |
I worked on designs for the text-based site blocks in figma. I removed the Post Comments Form, Query, and Template Part blocks from the OP for now as they are bit more complex and I suspect they will need dedicated issues to explore in detail. Site LogoSite TitleSite TaglineLogin/outNext / Previous postPost TitlePost ContentPost AuthorPost Comments CountPost DatePost ExcerptPost TagsPost CategoriesArchive TitleTerm Description |
Do we just add an empty example in index.js to these blocks, and adjust the width for some? I can't figure out how to create an example as shown in the images. |
The comment I added above is all about that preview. So a new issue wont help me contribute towards making the preview look like in the image :). Adding a width to block.json, or the empty example to index.js, displays the current tagline. |
Ah sorry, I think I misread your comment.
Is this definitely the behaviour we want, contextual previews? Given our current handling of placeholders the previews could end up being a bit lacklustre. Like the "Write site tagline..." example you shared. As another example, if a featured image isn't set you would end up seeing something like this: An alternative would be to hard code generic previews – which is how previews for regular blocks work. So when I hover Featured Image I would just see an image in the preview, regardless of whether one is set or not. |
But how? :)
|
And I can't find any documentation for the "example" setting in block creation. Guess what shows up if I search for block.json example 😆 |
Good question :D I'm sorry to say I don't know. Perhaps we need to enhance the |
Yes we probably need to invent something new. |
I stumbled across this issue. Unless this has been solved since your comment, I think we do need something new. There are probably quite a few different ways to solve this, but none of them that I could think of are ideal. I think the third option I listed below would be my preferred solution. Any other options anyone can think of? Option 1. Mock block context and entity data in the block definitionThese blocks use block context to indicate which post they should read from. It could be possible to mock this data as part of the block definition: example: {
context: {
postType: 'example',
postId: '1',
},
entities: [
{
type: 'example',
id: '1',
featuredImage: 'https://wordpress.org/example-image.png'
}
],
attributes: { // ... },
innerBlocks: [ // ... ],
} Problems:
Option 2. Overriding values in the block
|
Since this issue was opened we've done quite a bit of work around improving the on-canvas representation of these blocks, accounting for context. For example the Featured Image block now displays a placeholder 'graphic' when appropriate. So perhaps these block previews should just render the block itself (hopefully with the context passed to it). Is that an option? |
👋🏼 Is this issue still relevant? If yes, can we update it? If not, can we close out? |
A lot of site building blocks still don't have previews.
This still feels like the path to explore. |
Here's a figma file where we can work on this.
The text was updated successfully, but these errors were encountered: