-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
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:
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.