Post Template: Refactor ad hoc flex container to use layout block support flex type

[andrewserong]

The Post Template block currently uses an ad hoc approach to generating flex layout rules for its option for a grid view. This ad hoc approach adds an is-flex-container classname, linked to some hard-coded rules in its style.scss file, here:

gutenberg/packages/block-library/src/post-template/style.scss

Line 13 in 6115283

&.is-flex-container {

It would be good to refactor the approach of this block to use the layout block support's flex type for the grid styles (is-layout-flex), so that we can then directly opt-in to blockGap support, to allow flexible control over the spacing between instances of the Post Template block.

Tasks to address

• Replace the is-flex-container rules with the ability to switch between flow / flex layout types using the layout block support (or should this always be flex, but use vertical orientation as the switch?)
• Work out how to reliably swap out the width rules and their calculation so that the ad hoc columns rules still work as-is
• Ensure backwards compatibility with the block's existing gap: 1.25em rule, when making the switch
• Opt-in to blockGap controls to allow spacing between instances of the Post Template block

Why

The overall goal would be to utilise the layout block support for all structural layout styling of this block, so that users can have control over block spacing and content justification, and so that if and when additional layout types are rolled out, these can be used in the Post Template / Query Loop blocks, too, enabling a wider variety of designs.

Related issues (and semi-related issues)

This issue has been touched on already in other feature requests — because those feature requests are typically from the perspective of the user of the theme, I thought it'd be helpful to have a separate issue for tracking the technical issues in implementing those changes. This issue should primarily be for tracking / breaking down the tasks of refactoring away the block's ad hoc layout rules.

• Query Loop block: Add the following panels - Dimensions and Border #39380
• Block: Post Template: Allow setting up custom gap #48224
• Make .wp-block-post stylable via theme.json #39599
• Would love see equal height when Query loop grid layout #41410 (flags the need for design tools at the Post Template level)

[tellthemachines]

Thanks for writing this up!

I think the Grid view in Post Template is an ideal candidate for an actual grid layout type. The current implementation is shoehorning grid-like behaviour into a flex layout by forcing a certain number of cols through a complicated width calculation, whereas display: grid and its companion properties do this natively, plus gap works exactly like flex, so we can reuse the existing logic 🎉

[andrewserong]

I think the Grid view in Post Template is an ideal candidate for an actual grid layout type.

Oh, that's a great idea! I suppose ideally Post Template would support any number of potential future layouts, too (e.g. a future wish-list item might be if layout support winds up eventually allowing for carousel-like behaviour for a Netflix-like scrollable row of post titles 🤔). But yes, I think a grid layout type would be a better fit here, too 👍

[skorasaurus]

I think the Grid view in Post Template is an ideal candidate for an actual grid layout type.

Oh, that's a great idea! I suppose ideally Post Template would support any number of potential future layouts, too (e.g. a future wish-list item might be if layout support winds up eventually allowing for carousel-like behaviour for a Netflix-like scrollable row of post titles thinking). But yes, I think a grid layout type would be a better fit here, too +1

I would love to see this; i came across this because I'm trying to figure out how to avoid using columns block within the post template block. (running into the issue described at #30480)

[sophiegyo]

I would love to have the blockGap controls too, I was just trying to figure out a blocks layout for having a grid of featured images but there's no block spacing control on the query loop which lets me remove the block gap without overriding the CSS.

Default:

What I'd like to achieve:

[andrewserong]

Thanks for adding the screenshot @sophiegyo, that captures the desired goal of this issue perfectly 👍

[paaljoachim]

It is awesome to see the movement happening here! Thank you, thank you and another thank you!

[paaljoachim]

This issue explores different ways to manage image sizes:
Image Block: Surface aspect-ratio tool for custom image dimensions
#38990

It should also carry over to the Featured Image block, so that we can have the same cropped size Query Loop featured images.

[andrewserong]

Just a quick update: I think it'd still be beneficial to explore our options with the flex layout, and see what kinds of back compat issues we'll run into with enabling different types of layout types on the Post Template block. It sounds like a Grid layout type will be especially useful for this block in the longer term (#47809), but in the shorter-term, it could still be useful to have a play with the flex layout + block spacing and alignment controls. I've started a (very) early PR over in #48340 to have a play and identify what the blockers will be.

[richtabor]

Just noting that #48224 is a duplicate of the longer-standing #44899.

[tellthemachines]

Now that #49050 is merged I'm going to go ahead and close this one.