Gutenberg: Add alignment controls to all Blocks

[getdave]

The upcoming Section Block supports wide and full-width alignment settings.

After much discussion, it was decided that Blocks that are children of Section should default to standard alignment even if the parent Section itself has full or wide alignments.

This is (partly) because not _all_ Blocks support alignment settings. For example you can place an Image Block within a full-width Section Block and change its [the Image's] alignment between full, wide or default. However you cannot do the same with the paragraph Block as it does not support alignment meaning it always sits in the center - this maybe what you want or it may _not_ be. Either way, you cannot control it!

Proposal

When Section lands (soon!) it will be important that _all_ Blocks can be aligned. One way to achieve this is to add alignment controls to _all_ Blocks by default. The CSS to handle this within the Editor is already available.

You might think it would be possible to nest Section Blocks to work around this. It's not. Remember that by default all Blocks without alignment controls are set to remain at the _default_ width even if their parent Section is in full or wide mode.

Questions

• Is it over the top to add alignment to _all_ Blocks?
• How do we allow users to adjust the alignment of child Blocks of Section without adding alignment controls to all Blocks?
• Should we instead add a control/setting to the Section Block (this would be a v2 and should _not_ be considered for v1 of Section) to allow child Blocks to expand to fill the parent's space _or_ remain at default width. This would allow users to choose the behaviour of child Block alignment at the price of applying blanket to all child of that Section. But how would this work when there are already some Blocks which have alignment controls...

[sarahmonster]

As it currently stands, blocks have one of two different types of alignment options.

There's text alignments, used primarily by text-ish elements like the paragraph, and block alignments, used primarily by media elements:

Adding block alignments to all blocks has the potential to create a lot of noise (five extra alignment buttons, potentially sitting next to pre-existing alignment buttons) without necessarily providing any immediate user value. Given the unexpectedness of float behaviours in general, it's probably best we avoid exposing these on all blocks.

In most cases, I'd imagine that users would get the best results (especially in terms of readability) if text blocks (headings, paragraphs, etc) nested inside the section block retained the overall content-width as their max-width and remained centered in the section, like so:

What sorts of use cases would demand per-block alignments within the section block? I wonder if these settings might be best considered as advanced controls, and thus coralled into the block inspector...

[getdave]

@sarahmonster Luckily this is exactly what the new section Block does.

I now agree that adding to all Blocks would be OTT. Thank you for your feedback 👍

[aduth]

A use case was raised at https://github.com/WordPress/gutenberg/issues/14811#issuecomment-485509797 by @strarsis where it may be reasonable to allow for the "Group" block specifically to allow for additional alignment options. It could be considered as the alternative to what was originally proposed here, that instead of adding alignment options to all blocks, add all alignment options to the Group block, where any block could be inserted into a Group block to achieve the desired alignment effect.

I was originally inclined to open a new issue, though am mindful of the conversation here. Do you think it would make sense to create an issue, or to reopen / re-focus this one?

[paaljoachim]

For consistency I find it better to have the same alignment options for all the blocks.

[paaljoachim]

Hey

For instance I noticed today as I am working on a site that reusable buttons does not have alignment options. https://github.com/WordPress/gutenberg/issues/17640

Adding custom html such as a Google map the html block does not have alignment options.

For blocks that do not have alignment it seems one has these options:

1. Place the block into the group/columns something where one is able to control the alignment.
2. Add custom CSS code.

[strarsis]

I just noticed that the Group (formerly Section) Gutenberg core block doesn't have left, center, right alignment options. This is a very necessary setting because sometimes I want the group aligned at the left or centered and sometimes to the right. It should be possible to combine left, center, right alignment and wide/full alignment options.