Supplementary editing flow for "The Loop" template

[mtias]

The template contained within the Query and Loop blocks is a very powerful feature that already works great. In some cases, when there are too many posts rendered in the view, someone editing it might want to focus just on the inner blocks template in a singular view.

Perhaps there could be a way to open a modal from the Loop toolbar that renders a single post and allows modifying the template in a more focused way. This is a supplementary action and show not remove the current editing flow, which works well.

[rmorse]

Hey @mtias

I've been following the query block closesly as I've been creating a plugin which in effect does things in a similar way.

I've even gone as far as launching a modal to redesign the contents of the individual post template within my loop/layout.

Something that has been occuring to me on my journey (and as Gutenberg is moving forward), is the overlap between these inner blocks + re-usable blocks (and a need to have another way of accessing / editing them).

For example, a re-usable block currently has an editing experience where it is grouped as a re-usable block, but you can edit the content of that via another screen to update all instances across the site (could that actually be a modal too?).

Maybe we could use this as a way of unifying the editing experience across both concepts - for me, the re-usable block concept and editing an inner block via a modal could have a lot of overlap.

[mtias]

@rmorse definitely! We also have the concept of "isolated editing" which is currently in use for template parts. See #29148. This is conceptually similar to the modal with some specific characteristics.

[jameskoster]

Since this issue and #32317 are very closely related, some of the ideas that I shared there overlap with potential solutions here.

In this comment I'll cherry-pick the relevant parts so that we can discuss whether they are adequate solutions to this problem on their own, or whether a truly dedicated loop-editing view is required (be it supplementary on singular).

Highlight associated blocks

In the context of a non-isolated view for editing the loop template, the primary consideration is how we visually communicate the relationship between the document, the Query, and the loop template:

1. When editing the query / loop it must be clear where the document ends and the Query begins (and vice versa)
2. When editing blocks in the loop template, it should be clear that changes will apply to all posts returned by the query

The first requirement is shared with template parts, so we can potentially take the explorations we've done in the Site Editor and apply them here. Namely: When a child block is selected, the parent exhibits a dotted outline.

The second requirement is new and (to my knowledge) there is no existing pattern to take inspiration from. My initial thought is to use a different outline to highlight the same block-type across templates.

In the screenshot above the Post Title block inside the Posts block (a Query variation) is selected. Therefore:

1. The root-level parent (Posts block) exhibits a dotted outline
2. Other Post Title blocks in the Query exhibit a dashed outline. This is just an initial idea, there are probably many other visual treatments to explore. Edit: I remember now that I opened an issue for this exact requirement some time ago :)

---

One key thing that differentiates the loop template from other templates is its local nature. This "template" isn't reusable in the traditional sense unless it is explicitly saved as a template part. Instead it will always be unique to the document it exists within. For that reason I'm a little more hesitant to utilise the isolated editing view as that feels like a global editing heuristic.