Display block placeholder treatments consistently when editing templates in the site editor

[jameskoster]

When you edit something like the single post template, blocks such as Post Title, Featured Image, and Post Content exhibit a placeholder state that helps clarify that they will entertain content from different posts.

We should look to apply this heuristic more consistently across the template editing experience in the site editor.

At the moment I see two key areas where this is not applied.

Queries that inherit from template/url

When you edit primary templates that include a query (e.g. Index, Archive, Search), that query displays the latest posts at the site.

This breaks the heuristic outlined above and can mislead the user in regards to what the template will display on the frontend. Of course these templates can display latest posts, but one of their defining attributes is the ability to resolve to display a variety of post lists: categories, tags, author archives, and so on.

It's extra confusing because (as you can see in the screenshot above), the Featured Image placeholder appears inline with actual content. This could lead folks to believe that the placeholder itself will render on the frontend which of course is not the case.

This should be relatively simple to address, since most blocks that appear in Queries already have placeholder states.

• When editing templates that include a query which inherits from the URL, use placeholder states for blocks inside that query

---

Side note: It might be ok for a template to render content when that template has very specific resolution conditions. For example it would probably be appropriate to see posts published by Admin in the query when editing author-admin.html.

Comments loop(s)

I'm not 100% certain of the logic, but it appears to me that any instance of the new Comments Query Loop block will simply display all comments, ordered reverse chronologically. This makes for a confusing experience when editing things like the Single Post template – you see placeholders for the post content, then actual comments below.

The blocks inside these queries should appear as placeholders. This one will be a bit more involved because I don't think the new comment blocks have placeholder states yet.

• Comment Query Loop inner blocks should display placeholders when editing non-specific templates (Comment Template: Consider using block placeholders when editing a template with no page context #37143)

[cbravobernal]

Great job! I completely agree with improving the template editing experience.

I will provide some context for Comments Query Loop.

By default, Comments Query Loop gets postId block context in order to show the comments and global $post->id for the frontend.

We have a research PR in #38072, where we are trying to get those default placeholders on the site editor, but we are still having small issues with the user experience on the block placeholders.

The new comment blocks have placeholders (avatar needs to improve), but they only appear if we don't have any commentId.

@SantosGuillamot I'm not really sure about what we could do in order to link with our tracking issue of comments, so we don't have duplicate features working on #34994

@jameskoster do you think we could apply some design to give the Comments Query Loop a nice default look? 😅

I did some tests changing the default avatar placeholder to look like the post featured image placeholder, which right now is a text, I will post a PR as soon as possible.

[jameskoster]

@jameskoster do you think we could apply some design to give the Comments Query Loop a nice default look? 😅

I think text-based placeholders – to be consistent with things like Post Title and so on – is fine for now :)

For Comment Author Avatar, perhaps we could use whatever is configured as the 'Default Avatar' in the discussion settings?

[cbravobernal]

For Comment Author Avatar, perhaps we could use whatever is configured as the 'Default Avatar' in the discussion settings

That part is done and already merged 😄