The Block Editor Alignment Paradox

Gutenberg’s block editor alignment-selection dropdown has its mysteries. Read to avoid confusion…

How many alignment options do you see in the image?

There are 2 options in the dropdown, and 2 types of icons ( and ) – so 2 seems to be the obvious answer.

Clicking the already-selected Wide width option thickens the plot…

Now, how many alignment options?

Guess again. There are 3!

The Wide width option is now apparently unselected. There are still two options in the dropdown. But now there are actually 3 types of icons! Two, those we have already seen, are named – Wide width () and Full width (). But now there is a third, new one (). It is the currently-selected one, the one in the toolbar – and it is anonymous. In fact, even digging in the HTML doesn’t provide a clue for its name. Reason suggests it is a default option, but what’s the default behavior in this context? Anyway, the fact is there are actually 3 alignment options here.

Few questions are then raised:

  • How can one guess clicking a selected option unselects it? (dropdowns don’t usually behave this way)
  • If one first encounters the state captured by the first screenshot – how can one know there are 3 alignment options, rather than 2?
  • What’s the name of the anonymous, third alignment option?

The Gutenburg guys will probably sort it out eventually. In the meantime, don’t get confused.

Leave a comment

Your email address will not be published. Required fields are marked *