Skip to content

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

@andrewserong

Description

@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:

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.

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions