Gutenberg: Query block: Swap out layouts/patterns for the block

[mapk]

The Query block is such a large part of pages and templates in WP. With it, a person can adjust settings and add/delete child blocks to get the right format for the particular query. But all this requires advanced knowledge and a willingness to jump into the block. For some this can be overwhelming, especially when trying to customize the layout of the results.

Problem
Gutenberg offers "Block Patterns" which can _add_ content to pages, and there are "Block Style Variations" that can change the CSS for a different visual of particular blocks, but we don't quite have a system to swap out more robust layouts on existing content in the Editor.

• Block Patterns add content which swapping layouts won't be doing.
• Style variations make CSS changes to existing content, but may not support larger HTML changes.

Once the Query block is set up, how does a user change the layout to match a set of predefined layouts that are offered in Core or by Themes?

Solution
To resolve this, we should allow users to swap predefined layouts/patterns that can reformat the content of the query results. Some discussion began here: https://github.com/WordPress/gutenberg/issues/25462#issuecomment-700911367. This issue is to define the UI for this interaction and directly addresses one of the tasks listed here: https://github.com/WordPress/gutenberg/issues/24762.

Because the Query block uses the WP REST API, there is a limited set of blocks that can be used inside it. We know what these blocks are, so swapping out layouts and blocks shouldn't be difficult. This means there shouldn't be any unexpected blocks that get lost when swapping layouts as far as I'm aware.

Example of interaction
Keep in mind this is only to convey a possible path forward. More design iterations should be done to verify if this is an intuitive and robust solution.

cc @mariohamann @ntsekouras

[mtias]

This is already meant to be handled through the variations mechanism, which currently lacks after-creation transforms. Whatever is improved there should be done in a generic way, not specifically to the Query block.

[mapk]

Okay, thanks for the feedback, @mtias! For anyone not familiar, here's how the current Transform tool popover looks (ie. Quote block):

Query block Transform Tool

Here is an iteration on using the Transform Tool in the Query block that can also be extrapolated to other blocks when necessary. I don't believe these are "style variations" so rather than saying "Styles" in the popover, I called them "Patterns." These are also wireframes and not a final iteration. This means that the previews will most likely be actual content. I would love to see the user's actual content reflected in these if possible.

Feedback

1. Is "Patterns" the right word for these variations?
2. How do they feel in the Transform Tool?
3. Do you imagine they should be accessible from elsewhere in the UI (ie. sidebar settings)?

[aristath]

Block styles only add a css-class, and then the theme adds CSS to handle them.
Block variations are a collection of block-settings and can tweak all block attributes.
In this context, "patterns" seems like a variation, though it would more closely resemble a reusable-block... :thinking:

[mapk]

Sounds right to me, @aristath. The Query block can have block variations, style variations, AND pattern variations. Each block variation (ie. a Latest Posts block) would also have style variations and pattern variations for itself.

• Style variations affect the CSS. These would primarily change things like color, font styles, padding/margins, etc.
• Block variations are blocks built upon the Query block and affect the setting parameters. Certain filters/settings may hide and/or be preset depending on the block variation's settings.
• Patterns/layouts affect the general inner block layout of the Query block. For example, some patterns may include a Post Author block and some may not. Some may be in a list, some in a grid.

Does this sound right?

[mapk]

@ntsekouras just pointed out issue #25231 which aligns with my last iteration. Thanks, Nik.

[mapk]

I'm working on a flow for the Query block. In this prototype I have a Query block added to my page with the Post Type set at "Posts."

1. I adjust the number of items and offset it by one which updates the toolbar icon.
2. I change the pattern using the Transform Tool.
3. I toggle "on" pagination which adds the Pagination block inside the Query block.
4. I delete the Post Excerpt block from the repeated pattern showing the blocks within the Query block are editable.

[hedgefield]

Nice! This is starting to look like a pretty good flow, and in my opinion is the best way to let people easily work on the layout of their Query - with Patterns, I mean. Having the ability to tweak specific parts of the individual post template is probably still useful, but shouldn't be the main way to customize the loop, this feels much more user-friendly already.

I'm glad you separated out some of the controls into the toolbar, the main query options have a real discovery problem I think. I still feel like they would also fit well in the sidebar, but I understand that's a meta discussion on what is and isn't considered wysiwyg editing in Gutenberg and all that so I'll digress.

[kellychoffman]

Design feedback:
(Including some that may be out of scope for this particular issue just to have everything in one place)

• There's a few interactions to consider that come before the prototype starts. Primarily what happens when you immediately add this block. Right now, it's not apparent that it's fetching data. We'll need some sort of indication there.
• Applied filters: Wanted to note that this will need a default/empty state. Might make sense to add a one liner of what to do when you first add this block? It's not intuitive. (At least for the first time user)
• The compact version of the sidebar (inputs only) I saw at one point I think makes the most sense and feels more straight forward.
• Toolbar icons: some are a bit hard to parse. As it goes with portraying advanced settings with iconography. Sorting could be more simplified, for example. (probably don't need the numbers)
• Query block description in sidebar: Could be more clearly described. (minor)

[paaljoachim]

Patterns/variations/styles in a sense for a user it all becomes the same. Most will not understand the difference.
As we need to look with broader eyes of what we are trying to accomplish with a specific feature

The Image block. We have Styles panel in the right sidebar and in the Transform to drop down.
Here we are changing the design/look of what an image looks like in the layout.

A Query block layout we are changing the look of the design. Selecting various looks/design/styles we see variations of what the layout can look like (I am mixing in the various terms on purpose). It would be natural to add Query block layouts (styles) into the Styles panel as well. Creating a higher visibility and discoverability of an important aspect of the Query block. As the Transform to drop down is a lot more hidden and not easily noticed.

I believe most blocks should use the Styles panel to anything that changes the design/layout seen in Gutenberg and on the frontend of a site.

[mapk]

Looping back on some of design feedback above about creating a placeholder for the block and working on a "setup" solution. This PR adds a Placeholder to the block with layout options: https://github.com/WordPress/gutenberg/pull/26378

[ntsekouras]

Hey @mapk - Do you think it's okay to close this one in favor of this one: https://github.com/WordPress/gutenberg/issues/25231?

Since we have decided to follow the Placeholder 'pattern' for the creation of Query block in the above PR you mentioned, the change/swap to another one after creation, should be handled in a generic way for all blocks.

[mapk]

Sounds good.