Query Loop block: improve setup state

[javierarce]

I'd like to propose a couple of small improvements to the current placeholder of the block.

The first one is adding the title of the variation in the carousel view. While I don't think it's a critical improvement, I think it's important that the two views (carousel and grid) are consistent.

I think there are two possible positions. The left one is probably more useful because it allows users to connect the title with the variation right away.

My other proposal would be to improve the "Star blank" placeholder with two things:

• A backlink (so users can go back to the previous state of the placeholder)
• A form to configure the contents of each post.

The form is less confusing than the list of icons with labels (it doesn't require you to scan the full list to see if the combination you want exists) and gives a little bit of extra control without complicating the interface too much.

[shaunandrews]

The checkboxes are way easier to understand, and seem like they provide more flexibility to choose elements. Love it.

[ntsekouras]

A backlink (so users can go back to the previous state of the placeholder)

There is an issue for this here: #31593.

[annezazu]

Wanted to share feedback here from the nineteenth call for testing for the FSE Outreach Program:

I am always confused by this modal. Why is there an arrow, except when the grid button is selected? What are the different options? Why are the arrows so far from the title of the modal, which tells me to choose a pattern? Maybe if each pattern option had a displayed name it would be clearer where I am in this modal and what I have selected.

More feedback:

I found having the Query Loop pattern modal showing the content full width a little jarring. The first example had the heading flush with the edge of the modal which just looked a but messy. It took me a few moments to see the left/right arrows for the fullscreen patterns – to know I could scroll through options. I particularly like the grid view – this worked really nicely.

& more

I experimented with the Replace option on the Query loop and found the patterns confusing. I couldn’t easily tell where one pattern ended and another began, and after I selected some of them, they looked different than I expected. For example, I selected one pattern that looked like the images would be below the titles, but after I selected it, the images were on the left and the titles on the right. I also selected one pattern with a black background and then after that, every pattern I selected still had a black background.

& once more:

The ‘list view’ vs ‘grid view’ to show patterns for the query loop is not intuitive. It is not clear that the ‘list view’ is showing a single pattern option, with the ability to scroll sideways to view others. When first seeing the ‘list’ vs ‘grid’ tabs in Choose Pattern, I would have expected that to have ‘single’ vs ‘grid’ pattern options – Similar to how the same buttons in the Query Loop toolbar determine whether they will appear in a list or grid view. None of the pattern options show ‘Grid with Images’; aka what shows up when you click the Grid button in the Block toolbar.

& once more:

Browsing patterns for query block is not very intuitive

& once more:

I was also a bit confused when picking patterns that in the carousel view I had to click a button and in the Grid view I could click on the actual pattern. Also, option description was not very visible: https://cloudup.com/cYECQ3pMB6S

Here's the current state in Gutenberg 14.8.4 for context:

[apeatling]

What about using a pared down version of the pattern explorer in place of the carousel view? This would match the experience with selecting patterns elsewhere.

To start it could remove the category and search sidebar that you get in the explorer, keeping things simple:

I think ideally over time the pattern selection and insertion experience becomes synced and consistent regardless of where you're triggering it from.

[annezazu]

I want to say we started with something similar to this but let me cc @jameskoster into this as this also ties into the broader issue around these modals #39308

[SaxonF]

+1 on establishing a consistent way of selecting/replacing patterns of any type. I like @jameskoster solution here which looks close to @apeatling proposal above. We can use left sidebar to introduce filtering in future if needed.

[talldan]

I left some feedback on some of the problems with the carousel mode in a separate issue, I'll copy it here to consolidate, but I think it was mostly mentioned elsewhere:

In every other block pattern UI (Template part picker, inserter) the pattern itself can be clicked to insert, but that's not possible here.

The left/right arrow buttons and the Choose button are incredibly small compared to the pattern itself, and I didn't really clock that they were present and played such an important role.

Usually in most interfaces like this, the left right arrow buttons are either side of an image and much bigger. This seems to be a case of using a very unfamiliar and unexpected UI for what usually a common pattern (a gallery lightbox).

It's also worth comparing this to the Grid view, which works completely differently, but I think also has its own problems (In Twenty Twenty Two it's really hard to see the boundaries of patterns, and there are no labels)

[apeatling]

Talking with @jameskoster I'm going to look at using the same flow as adding a new empty template part block:

By using this in two places we can start to consolidate and then look to improve further around the new design work in #39308 (comment)