Skip to content

Alignments Overview #29506

@mtias

Description

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

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.

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

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.

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

Screenshot 2021-03-03 at 11 49 19

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.

grids

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] BlocksOverall functionality of blocks[Feature] ThemesQuestions or issues with incorporating or styling blocks in a theme.[Type] OverviewComprehensive, high level view of an area of focus often with multiple tracking issues

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions