Query Loop: Remove placeholder state

[jameskoster]

The current Query Loop placeholder breaks the wysiwyg experience in the zoomed out Site View:

Since the Query Loop block now has a "Replace" action in the toolbar which allows you to choose a pattern, we can probably eliminate the current placeholder altogether. Instead of asking the user to choose the initial pattern themselves, we can simply insert a core query pattern and allow them to replace manually if they want/need to.

Original issue

Here's how the Query Loop block appears when empty:

It works well when you're zoomed in editing a template, but less well when you're browsing in the Site Editor:

There are two issues here:

1. The block looks interactive but it isn't until you engage edit mode
2. It looks nothing like what you see on the frontend which kind of breaks the wysiwyg convention inherent to the frame

To improve things here we can potentially find inspiration in the work we did with Image blocks a little while ago. When the block is not selected you see a more visual preview, and the interactive state is only revealed when the block is selected:

If we can do something like this with the Query Loop block, it will work much better in browse view.

cc @WordPress/gutenberg-design

[paaljoachim]

That sounds like a very good idea James!

[jasmussen]

I think it makes a ton of sense. But it seems like we also might want to think through the placeholder strategy a little bit, so we have a system that we can roll out across text and video in addition to images as it is now. The question we have to ask is: does this gray state need more indication of what it's meant to placehold? Or is it fine as is?

Personally I'd lean towards it being okay to try and take this a bit further as-is, and then revisit. But it seems good to just chat through the options, maybe visualize a bit. I think we tried an icon version at one point?

[jameskoster]

Yes good points. There are a couple of things we might try here imo.

One would be to have a 'visual' placeholder state for all blocks, similar to what we've already created for images. We can then assemble a composition of these to act as the de facto Query placeholder.

It may be something as simple as changing the font to something like Flow Block:

Blocks like Query Loop could invoke this placeholder state, to create appearances like so upon insertion:

Then the current placeholder would exposed when you select the Query Loop. Just like how the Image block works.

---

Another option would be to eliminate the Query Loop placeholder altogether and ask the user to select a pattern immediately after inserting the block, similar to what we do when creating a new template:

If they elect to start blank, then the Query Loop would appear that way – an entirely empty container.

[jasmussen]

Nice. In general I think the generic text placeholders have worked well where we use them (i.e. post content) but they probably wouldn't work here since nothing is actually output until you choose a pattern. Unlss

In that light, the abstracted placeholder could be interesting. I wonder if there's a way to take that further. But it would probably have to be the right design — something that distinctly looks like a placeholder, even if it looks differently. I do worry about it missing a boundary 🤔

To take it in a different direction, what if the query loop always output an actual query loop. The most basic one you could have, and on-select you'd be prompted to select from a range of patterns. Not sure if that would be better or worse.

[jameskoster]

There might be something to that last idea. Especially if we're able to utilise wp:pattern (#48458). That would make it easy to shuffle through different Query patterns.

[jameskoster]

Tentatively updated the OP based on the latest discussion in this issue.