Alignments Overview

[mtias]

Gathering some of the current efforts and idea around improving how block alignments are handled and the kind of interactions they unlock.

System

The first and most important aspect is a foundation that allows to express alignments declaratively and incorporate the existence of nested contexts as a first-class set. The original alignments predate the existence of nested blocks, so they were not taken into account.

• Constructing a more declarative system for default alignments. Add a layout config to the group and theme.json and make alignments declarative #29335

This work would improve upon a few fundamental issues that have been affecting the handling of alignments and greatly simplify theme integration, which right now requires a heavy amount of CSS to properly handle.

• Markup and wrapper cleanup. Block Alignments Rethinking #20650
• Improving the APIs on container blocks More Block Tools and APIs for container blocks. #27324

The other highly relevant aspect is the integration with theme.json declarations and the global styles UI representation.

• Integration with themes Allow theme to control sizes attribute for wide/full images #6131
• Allow modifying the default values in Global Styles -> Spacing. Feature request: Global Styles - allow modifying alignment widths #30761

Another important aspect would be to allow block to have a default alignment set through those same mechanisms so that “videos” always are inserted as “wide” rather than “content”, for example.

• Support default alignment for a block type through theme.json.
• Allow filtering the alignment options of blocks via theme.json #34317

It'd be important to also incorporate this information and help clarify contextually some of the tools in the interface, as outlined in:

• Show "none" as an alignment option and use contextual text to clarify settings. #34597

Finally, a consideration that needs handling is how these alignments map or evolve for different breakpoints. Good default are important here.

• Handling of breakpoints.

Concerning interactivity

The snap to grid idea has been generally coupled with the development of a grid system, but that doesn't have to be the case. We can still have snap-to-alignment-breakpoints for blocks that support it within a container.

• Add snap to "wide", "full", "content" for resizable elements.
• Show lines / bars when editing the breakpoint values.

One more area to explore is the interaction with drag and drop. For example, dragging an image to the canvas, depending on where you are dropping can default to content, wide, or full.

• Explore drag and drop improvements connected with alignment breakpoints.

[youknowriad]

#29335 landed and it checks a few items on this issue. We can now define a default layout (widths) in theme.json and use it consistently in themes or add a specific layout for some areas of the site/content.

[skorasaurus]

"Allow modifying the default values in Global Styles -> Spacing." has an issue made for it at #30761

[jasmussen]

I have an update on the visuals. This one features the basic alignments, plus wide and full-wide. The center icon has been updated, and the previous icon for centering has been repurposed for indicating "None". There's help text for "None" and "Wide", to show the values for the content and wide area layout values.

The next one is shown for themes that do not support wide or fullwide alignments. It has the same basic qualities, but shows additional help text at the bottom, to explain the missing buttons:

[annezazu]

Closing this out as most tasks have been completed and it's a few years old at this point.

The snap to grid idea has been generally coupled with the development of a grid system, but that doesn't have to be the case. We can still have snap-to-alignment-breakpoints for blocks that support it within a container.

As a follow up to this, please follow along here: #44357

Finally, a consideration that needs handling is how these alignments map or evolve for different breakpoints. Good default are important here.

For breakpoints and more recent conversation/thinking there, please refer to this issue: #34641