Skip to content

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

@jameskoster

Description

@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.

Screenshot 2022-01-07 at 18 34 45

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

Screenshot 2022-01-11 at 11 57 35

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)

Screenshot 2022-01-11 at 12 33 47

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] CommentsAffects the Comments Block - formerly known as Comments Query Loop[Block] Query LoopAffects the Query Loop Block[Feature] Site EditorRelated to the overarching Site Editor (formerly "full site editing")[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions