Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
4 tasks
andrewserong opened this issue Sep 29, 2022 · 10 comments
Closed
4 tasks
Assignees
Labels
[Block] Post Template Affects the Post Template Block [Block] Query Loop Affects the Query Loop Block [Feature] Layout Layout block support, its UI controls, and style output. [Type] Enhancement A suggestion for improvement.

Comments

@andrewserong
Copy link
Contributor

andrewserong commented Sep 29, 2022

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.

@andrewserong andrewserong added [Type] Enhancement A suggestion for improvement. [Block] Query Loop Affects the Query Loop Block [Block] Post Template Affects the Post Template Block [Feature] Layout Layout block support, its UI controls, and style output. labels Sep 29, 2022
@tellthemachines
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Member

skorasaurus commented Oct 4, 2022

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
Copy link

sophiegyo commented Oct 12, 2022

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:

queryloopgap

What I'd like to achieve:
queryloopgap2

@andrewserong
Copy link
Contributor Author

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

@paaljoachim
Copy link
Contributor

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

@paaljoachim
Copy link
Contributor

paaljoachim commented Feb 6, 2023

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
Copy link
Contributor Author

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
Copy link
Member

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

@tellthemachines
Copy link
Contributor

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

@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label Jul 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Post Template Affects the Post Template Block [Block] Query Loop Affects the Query Loop Block [Feature] Layout Layout block support, its UI controls, and style output. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

7 participants