Tracking: additional layout options, design tools and refinements

[andrewserong]

This supersedes #39336 for tracking upcoming tasks around the layout block support.

As of WordPress 6.1, the layout block support has been refactored to generate styles based on a central set of layout definitions, a new constrained layout type has been added, along with root padding aware alignments. This issue tracks additional tasks and progress slated for WordPress 6.2 and beyond.

Additional layout options and design tools

• Make it possible to set the width of blocks within Row #44467
• Row Block: Add support for centering the middle item when the left and right are unequal #45826 (related to above)
• Expanding and simplifying layout #42385
• Fixed Position Header and Footer Template Parts #30121
• Align footer to the bottom of the page when the page has no/little content #45117 (related to above)
• Group: Add setup state to allow picking a variant (default/row/stack) #43433
• Grid Layout type #47809

Improve and extend existing layout support

• LayoutPanel: Switch to using the ToolsPanel #44560
• Tracking: Layout Design Tools Consistency #43248
• Add Layout support to Cover block  #43140
• Post Template: Refactor ad hoc flex container to use layout block support flex type #44557
• Flex Layout: Allow control over vertical alignment of children #35849
• Stack Block: Add space between option #45868 (related to above)
• Post Template Block: Add blockGap support #44899
• Try adding layout classnames to inner block wrapper #44600
• Layout: layout styles overriding block axial margin values in theme.json #43404
• Allow enabling and disabling Layout at block level in theme.json #47807

Nice-to-haves

• Add text indentation support at paragraph block type level #37462

Bugs, tasks, and issues not covered here

This issue is not an exhaustive list of all layout related issues, tasks, or bugs. For bug reports and smaller tasks, we can use the [Feature] Layout issue label for tracking and visibility.

[andrewserong]

Update 2022/10/26:

• Try adding layout classnames to inner block wrapper #44600 — this PR has now been merged, which moves layout classnames and styles to be attached to the inner blocks wrapper rather than the block outer wrapper. This was an early wish list for the layout block support and unblocks opting blocks with nested markup in to using the layout block support (most notably the cover block). Kudos @tellthemachines for landing this!
• Fixed position header and footer is being explored, along with a WIP PR in [WIP] Layout: Explore adding in sticky position support within the layout support #44723 — there will likely be lots of edge cases in attempting to implement this, so the plan right now is to get the PR testable so that we can see what those edge cases are
• Align footer to the bottom of the page when the page has no/little content #45117 — this is an interesting requirement for laying out post or page templates. A potential solution is to use minimum height on the post content block, which is slightly outside of the layout block support, but is being explored (again) in Add a minHeight block support under dimensions #45300

[andrewserong]

Update for 2022/11/16:

• There is now a variation picker UI in the Group block placeholder state (Group block: use a variation picker in the placeholder #43496)
• The minimum height block support has been merged, and is now opted-in for both the Group and Post Content blocks. There is a follow-up issue for tweaks to the UI (Min Height block support follow-up tasks #45501), as well as feedback that there are other blocks that could be opted-in too (e.g. Column block). A reminder that dimensions opt-ins are tracked in Tracking: Dimensions Design Tools Consistency #43243.
• There is a WIP PR under review for adding width / size controls to child blocks of flex layouts over in: Add Layout controls to children of Flex layout blocks #45364
• There has been useful design feedback on the WIP sticky position support PR ([WIP] Layout: Explore adding in sticky position support within the layout support #44723). The next step for this one is to first land a refactor to the layout panel to use the ToolsPanel component (as raised in LayoutPanel: Switch to using the ToolsPanel #44560). I'll dig into that task this week.

[andrewserong]

Update for 2022/12/07:

• Fit/Fill/Fixed size controls have been added to child blocks of Row and Stack now, merged in: Add Layout controls to children of Flex layout blocks #45364
• For consistency with other UI controls and to make it easier to make adjustments, a slider has been added alongside the Min Height control: Min Height: Add height control component with slider #45875
• Work continues on exploring fixed/sticky support for container blocks in: Design Tools: Add a Position block support (including sticky), decoupled from layout #46142. The current exploration now decouples the concept from Layout, as there are potential future use cases for non container blocks (e.g. one day being able to set relative/absolute, to position images for example). There's still more discussion/work on this topic and a few blockers to resolve, so updates will happen over in the tracking issue for that feature here: Fixed Position Header and Footer Template Parts #30121 (comment)
• A PR has been merged that improves the server-rendering performance of layout by reducing calls to get global settings: Update: Improve performance of gutenberg_render_layout_support_flag. #46074

[andrewserong]

Update for 2023/02/03:

Since the last update, the following changes have been merged and appear to be slated for inclusion in 6.2:

• Fixes for layout / block spacing output in multi site instances (Global styles: Allow indirect properties when unfiltered_html is not allowed #46388 and Global Styles: Allow content/wide widths when unfiltered_html is not allowed #46712)
• Additional controls for flex layouts (Stretch to Fill for vertical alignment on Row block, and Stretch and Space between options for Stack block): Add missing controls to flex layouts. #47134
• A stability and code quality improvement for how layout is passed to inner blocks, which forms one part of overall stabilising the layout block support: Always pass layout to inner blocks #47477
• Add layout child sizing controls to the Navigation block: Add layout child sizing to Navigation block #47584

Adjacent to the layout support, the sticky position block support has landed, with support for Group blocks at the root of the document. The current tracking issue for position support is over at: #47043

Work continues on exploring a fix for conflicts between margins set at the block level in global styles, and layout styles output (#43404) over in #47399 — the fix is tricky to land on due to the subtleties of the styles at play, but the hope is to see if a fix can land in time for 6.2.

Kudos @tellthemachines for all the recent progress on Layout PRs!

[talldan]

Should layout be added to the Media & Text block? It's an interesting one.

Using block gap is something that was raised in this issue - #49406.

[andrewserong]

Should layout be added to the Media & Text block? It's an interesting one.

Thanks for raising that issue! I've left a comment — I tend to agree that it'd be more about arranging the inner blocks. If it were to be opted in, I wonder if it might use a similar approach as @tellthemachines used to convert the Cover block in #45326 🤔

[andrewserong]

Now that the layout block support has been stabilised within WP core for a couple of releases (6.3 and 6.4, and from this PR: #51434 onwards), I'll close out this tracking issue now, as its goal was largely to get the block support to that state.

There are still many enhancements and fixes to be made for the layout block support (such as simplifying layout in #42385), but they can be explored in follow up issues via the [Feature] Layout label or subsequent tracking issues.