Query Loop Block: develop a content-only representation

[annezazu]

Similar to #65699, we need to think about the experience of interacting with the Query Loop block when in Write mode/content only. As it stands right now, the experience is quite confusing as the only items you can edit or change when viewing a homepage aren't items most will need to change. For example, here's a video showing how in Write mode, the only piece you can edit is the no results message:

no.results.found.query.loop.content.only.mov

When testing this with loved ones (I can ask for permission to share some of the video), repeatedly folks would edit this text as it was the only thing offered to them to edit in much of the homepage! Similar to the navigation block, we need to find a way to open up some controls and options while also clarifying the current limitations to know when to switch into Design mode.

[richtabor]

What about surfacing alternate designs, like here: #63497, so you can essentially swap out blog designs. We already have "Replace" in the toolbar.

[jasmussen]

I like that, and it pairs well with the fact that the loop placeholder block also allows you to pick from those options.

[richtabor]

Let's try that to start, before surfacing additional controls in write mode.

[ramonjd]

Let's try that to start, before surfacing additional controls in write mode.

I started a WIP PR for #63497 over at #66993

[ramonjd]

I attached this issue to the audit tracking issue:

• Audit blocks for writing and contentOnly modes #65778

[annezazu]

Happy to open this as a separate issues if we need it but I wanted to note that it's also really frustrating right now where if you swap between certain patterns in the query loop block, you suddenly can't see the "replace" option in the toolbar:

no.longer.can.replace.patterns.mov

This is using TT5 with GB 19.8.

[ramonjd]

if you swap between certain patterns in the query loop block, you suddenly can't see the "replace" option in the toolbar:

🤔 It looks like the query loops is being replaced by a pattern with no content blocks (??)

So selecting the pattern is only selecting its container block. If you enter Design mode again, the query loop is inside the pattern.

But when I add a group block with a query block inside it's also not accessible.

Kapture.2024-12-10.at.13.22.49.mp4

Does this mean query loops should always be accessible in write mode for the purposes of changing their designs?

[ramonjd]

But when I add a group block with a query block inside it's also not accessible.

@talldan just pointed out to me the significance of the main section, which, according to the editor is the first container block (usually group) that has a tagName of main.

The query block will only be shown as a child in Write mode when its inside a main section AND that main section is the first one in the tree.

Kapture.2024-12-10.at.16.19.52.mp4

Whether this is a useful constraint/intuitive design pattern is another discussion 😄