Use the Design Tools UX to create a builder in the Query block

[jameskoster]

The Query block and its associated variations are complex with lots of overwhelming settings.

The Design Tools work addresses this for 'regular' block settings by contextually revealing things like specific typography settings only when you need them.

I wonder if we could use this to make building a query more intuitive? Here's a video:

https://videopress.com/v/AYhXBrRI

The idea here is that the base Query would display everything from a specific post type, probably chronologically, and you refine from there. So if you wanted to only show posts from a certain category you'd just add that filter. I suspect this better fits the mental model for most users when working with this block.

It would also be excellent if the UI could facilitate richer interactions between those filters to say things like: "Show posts that are in 'Category A' and tagged as 'Pizza'", or: "Show posts that are in 'Category B' or tagged as 'Pizza'".

[annezazu]

I really like this idea, particularly since this is on track to become a UX pattern for other blocks that we want to introduce people to. As you mention, it also matches the mental model of adding in various filters to build the query itself.

[paaljoachim]

Wow James! This is spot on! Similar concept to the design tools being developed!
@ntsekouras Nik you got to check out James video.
I believe we should create an issue for your suggestion James!

[paaljoachim]

I'll buzz @aaronrobertshaw and @andrewserong about this discussion as well.

[aaronrobertshaw]

Thanks for the ping @paaljoachim.

The suggested refinements would greatly improve the UX for this block, exciting stuff. Nice work @jameskoster!

In terms of existing design tools work or components, I'm not sure there is a lot we can directly leverage despite the similarities of the design in the video with the current ToolsPanel. My initial thoughts are we'd be best served by implementing a custom solution for the Query Loop block's controls and sidebar panels. Then possibly extract reusable components later if additional blocks would benefit from similar query building.