Description
openedon Jun 25, 2024
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 alignright
are rarely used, I would throwcenter
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.