Skip to content

Review the block alignment controls #62840

Open

Description

Background

This started as a fairly innocent discussion on twitter, with the question - who is using the "align left" and "align right" block alignment controls?

Tweet: https://x.com/rossmorsali/status/1804818648751550670

Video copied below:
https://github.com/WordPress/gutenberg/assets/853547/0176d300-80e1-4793-8f59-ef78e52772ee

I was looking into them for my own blocks and realised that the behaviour between core blocks seems to be quite inconsistent, and of course things get worse when we look at non core blocks.

Generally speaking align left/right adds a float: left; or float: right but some block behaviours feel a little bit unpredictable.

If we compare the table block with the cover block (as seen in the video) you'll see what I mean. Then there are tons of core blocks which don't opt into the alignment controls at all.

Overall it all feels a little janky and I find it hard to be able to predict which blocks have them and then how they'll behave once we do use them.

Takeaways

  • I think that align left and align right are rarely used, I would throw center in there too because that feels the same as unsetting the alignment for most blocks.
  • Some people do find left/right align useful for the image block to have text wrap around it
    • But, they need to wrap it in a group element first to prevent it jumping out really wide left/right
  • No one has replied about successful usage outside of this context
  • There are better tools available to us today (grid/flexbox with wide width/full width) that floating things left and right is an often less preferred option.
  • @mtias mentioned it might worth making them less prominent, which is why I've opened this ticket.

My own thoughts

I feel like wide width and full width are super important and regularly used, I think the concept of "content width", which both of these fall into is an often used feature.

While any kind of alignment is probably best in the toolbar (text align included), I think the block alignment controls, left/right/center (rather than content width controls) are very rarely used outside of the image block.

Possible outcomes:

  • the alignment buttons that are rarely used are made less prominent somehow
  • when the left/right/center block alignment buttons are used, it leads to a predictable and usable outcome
    • currently there is too much confusion when using them, or in other words lack of a good mental model for their behaviour.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Needs Design FeedbackNeeds general design feedback.Needs general design feedback.[Feature] LayoutLayout block support, its UI controls, and style output.Layout block support, its UI controls, and style output.[Type] EnhancementA suggestion for improvement.A suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions