Query Loop block: Add the following panels - Dimensions and Border

[paaljoachim]

Currently the Query Loop does not have included the Dimensions panel where Padding and Margin can be added.
It also lacks the Border panel.

Adding the Radius panel and Gap would also be helpful.

This issue came up as I tried to recreate this Blocksy preview with the Query Loop block.

I was not successful as I am not able to create a kind of card view layout using borders, padding and margins/gap.

@ntsekouras @andrewserong @aaronrobertshaw

[paaljoachim]

I made a video.

https://youtu.be/DinvWQF5ajQ

The video adds additional information. Such as not able to show Post categories and Terms for the CPT tutorials. Etc.

[andrewserong]

Thanks for opening up the issue @paaljoachim!

The Query Loop block is the container for the query, rather than a block that controls the display of the individual instances. So, for background color and border settings, one way to create a tile-like layout is to wrap the internals of the Post Template block in a group block, and attach the styling there. Here's a quick example in the editor:

Is this the kind of thing you had in mind? Semantically, I think Group is possibly a better block for some of this sort of container styling work.

The remaining settings we'd then need at the parent level (I wasn't too sure if this might actually need to be on the Post Template block 🤔), would be for controlling the layout of each of those instances. So it sounds like the proposal then would be to add the following spacing controls for the Query Loop or Post Template block:

• Padding
• Block gap

What do you think?

(By the way, thanks for the link to the YouTube video, it very much helps to understand the details of the use case!)

[aaronrobertshaw]

Thanks @paaljoachim for creating the issue and especially the video. It really does make a big difference in terms of understanding what is trying to be achieved. 👍

@andrewserong captured most of my initial thoughts in his reply. I also approached styling the post template by selecting the default internal group block and applying padding, a background, and a border to that.

I think the main catch is regarding controlling the spacing between the post template instances.

I'm not up to date on the latest layout support functionality but I believe in its current state, simply opting into blockGap support would only control vertical spacing (i.e. top/bottom margin if applied to the Post Template block). At least, when I quickly added it via the Post Template block.json and tweaked conflicting styles that was the effect.

As a result, controlling the spacing will likely be more than just leveraging block supports.

One option could be to add a custom gap control to the Post Template or Query Loop block and inject that into the Dimensions block support panel via the InspectorControls grouped slot called dimensions. This value could then be applied to override the currently hardcoded gap: 1.5em etc.

[andrewserong]

As a result, controlling the spacing will likely be more than just leveraging block supports.

It looks like the Post Template block currently uses the default layout type, which works well for Query Loops that have a linear flow (only a single column), but not so well for multi-column layouts where the flex layout type (and its unified horizontal + vertical gap support) would be more appropriate. I wonder how far we could get by switching to the flex type, or if it'd wind up introducing more issues for when there's only a single column 🤔. Might be something for us to play around with, and then see if the default blockGap support would still work.

[carolinan]

The multi column layout is passed from the query to the post template with the context "displayLayout"
['displayLayout']['type'](flex) and ['displayLayout']['columns']
These are separate from the layout type and spacing block support.

I believe this grid view control that is on the parent query block needs to be replaced with the more complete dimensions and layout panels.

[paaljoachim]

I will also bring in this discussion made by @jameskoster
#35760

What I am looking into is how to in the most natural way we can get a card type layout using the Query Loop block. My thinking is that we would look at the current design tools and see how these can be implemented in some way to create the needed card type view. How we can make the process as simple as possible for the user adding a consistent method also used in other blocks.

[ntsekouras]

At first thanks for the video Paal! These kind of 'experiments' are great to find missing things and functionality!

The examples that are shared above about wrapping the blocks in a Group are good ones and a temporary workaround, for at least some of the things you needed.

Regarding the spacing between the posts what should be the goal IMO is to implement a new grid layout and migrate Query Loop to use that layout from block supports. Currently the available layouts are implemented 'manually' inside that block and this makes it inflexible and even more so, by using flex and not grid in css. So I'd recommend not to try to patch the existing 'layouts' controls, but explore the new grid layout approach.

[paaljoachim]

Hey Nik.

From what you are saying I assume the next step is to explore the new grid layout approach with the Query Loop?
Where can we find more information about the "new grid layout approach"?

Thanks!

[ntsekouras]

Hey Paal! This is just a suggestion of mine, nothing more 😄 The grid layout will be just a new type of layout(block.supports) which when implemented could be applied to other blocks too. I think @ramonjd and other folks working on layout stuff these days, so just mentioning him for some thoughts.

[jordesign]

I've run into a similar issue here in terms of the the gap setting between posts in the Grid. As @carolinan mentioned - it seems this block-gap is something that would need to be set at the Query Loop or Post Template block level.

It seems the gap between posts can't be changed from the 1.25em set in the default CSS

[gOuTM]

Well, as to me, this "feature" is essential if we all want to build beautiful post grids. Hope, the appropriate managing panel will be added in the nearest future.

As a kind of off-topic, it would be great to have an option to build a tiled gallery with a some sort of a tune that will affect how featured images are spread in the query loop.

[masteradhoc]

+1 for this, much needed.

[jameskoster]

I'd +1 the thoughts of @andrewserong here: #39380 (comment). The Query Loop block is a carrier for the query itself, and we risk overcomplicating things significantly if we enable it to entertain all the different display options as well. For me the notion of separating those things and using more intuitive layout tools (like the Row / Stack blocks) seems like a better direction.

[paaljoachim]

I totally agree on wrapping the Query Loop block in a Group block. It seems like the natural way to go!

....one way to create a tile-like layout is to wrap the internals of the Post Template block in a group block, and attach the styling there.

[dashkevych]

It would be great to have an option in the Query block to configure a gap value (block spacing) between posts, similar what we have for the Columns block.

[aaronrobertshaw]

It would be great to have an option in the Query block to configure a gap value (block spacing) between posts, similar what we have for the Columns block.

It might be worth noting that during the Gutenberg experiment for the block inspector tabs, it was decided that some blocks only really make sense as "settings-only" blocks, i.e. they shouldn't be style providers to their children.

The Query block was a prime example of this. Its children can be styled by wrapping them in something like the Group block if there is a need to have a single place to apply styles that cascade down to children. I also received this direction when putting together the PR to remove the colors support from the Query block.

For the specific case of block gaps, I think that would be better suited to the post template block instead of the Query block.

Hope that helps explain some of the recent thinking around the Query block and its block supports.

[dashkevych]

For the specific case of block gaps, I think that would be better suited to the post template block instead of the Query block.

I agree. Post Template is even a much better place for adding support for block gaps, since posts are located inside the Post Template block. Thank you for correction :)

[diegosomar]

It will be very useful the option to change the query loop columns gap.

[aaronrobertshaw]

Thank you, everyone, for the continued discussion here 🙇

We have a clear consensus that it would be great to be able to control the spacing between posts within a Query block. It is definitely something that is in the works.

The following key points might help clarify the approach moving forward.

1. The Post Template block is the best candidate to adopt the spacing controls to layout the posts
2. Before adopting block gap support, the Post Template will also need some updates to its layout
3. The Query block is to remain "settings only," i.e. possess no styling controls such as typography, dimensions, color etc.

There's an issue (#44557) tracking the work in updating the Post Template as described above. Feel free to follow along with its progress, or continue the discussion there.

Given we won't be adding dimensions or border support at the Query block level, it would be best to close this issue and consolidate the conversation around #44557.

[paaljoachim]

Thank you for the update @aaronrobertshaw