Current Issues

Alignments in Gutenberg today suffer from several issues, the most important one being the inconsistency between the different block markups.

An image block aligned left/right or center has the following markup

<div class="wp-block-image">
    <figure class="alignleft"></figure>
</div>

but when it has no alignment or wide/full, it has the following markup

<figure class="wp-block-image alignleft"></figure>

Other blocks like buttons, columns, ... use the align support hook which produces the following markup no matter the alignment applied

<div class="wp-block-something alignleft"></div>

This makes it almost impossible to support properly for theme authors without bugs.

There are more or less valid reasons for these differences but instead of going through history, let's try to focus on what we want to support and how we can fix this.

Use cases

Let's assume we want to build a theme that supports all alignments (the most complex case) and all blocks.

We'll most likely have a wrapper for blocks whether it's coming from the theme's template files .entry-content or a group block.

Now, let's take a look at each one of these use-cases and see how to implement them in terms of markup and styles.

Regular Alignment (no alignment)

markup

<div class="wp-block-something"></div>

Note that the class here is not always present (for valid reasons I want to leave out of the current issue)

styles

.wrapper > * {
    max-width: 600px; /* width of the regular blocks */
    margin-left: auto;
    margin-right: auto;
}

The margin technique is needed here because we want to support wide/full alignments at the same time. (see later)

Wide alignment

markup

<div class="wp-block-something wp-align-wide"></div>

(don't mind the different alignment classNames, I'll explain later)

styles

.wrapper > *.wp-align-wide {
    max-width: 800px; /* width of the wide blocks */
    margin-left: auto;
    margin-right: auto;
}

Full-width alignment

markup

<div class="wp-block-something wp-align-wide"></div>

styles

We can decide here to revert the default styles for the regular blocks or update its selector to exclude the full width blocks

.wrapper > *:not(.wp-align-full) {
    max-width: 600px; /* width of the regular blocks */
    margin-left: auto;
    margin-right: auto;
}

Floated blocks

Now, this is probably the most complex case. What we want here is a block that is marked as a float. That way, the following blocks, will wrap it but we also want the floating to be contained in the "regular" width area.

I saw some themes achieving this by applying computed margins to the block wrapper (left or right) and floating the block itself. In fact, that's the only possible technique for blocks using the "align support hook" but this approach is buggy since you can't really float multiple blocks in a row properly.

So what we're going to do is to add an extra wrapper around the blocks (like the image block above), that wrapper will have the regular size allowing us to float its content properly. So we end up with markup like that

markup

<div class="wp-block-something wp-extra-block-wrapper">
    <div class="wp-align-left"></div>
</div>

styles

.wp-align-left {
    float: left;
}

Centered blocks

Theoretically, we can center blocks without extra wrappers but we can also use the extra wrapper technique similar to float blocks to center blocks easily

markup

<div class="wp-block-something wp-extra-block-wrapper">
    <div class="wp-align-center"></div>
</div>

styles

.wp-extra-block-wrapper {
    display: flex;
    justify-content: center;
}

Alternatives

I'm personally not certain if there are other alternatives. Let me know if you have any.

Consequences

What does it mean if we have to implement this proposal:

• Block markup might need to be changed to add extra wrappers when left/right/center alignments are applied.
• Notice that I've used new classNames for the styling of the alignments. The reason for this is that if we use the current class, current themes will break because of the new markup.
• With these updates, the alignments styles become simple enough that I think we can consider adding them automatically to the "theme" opt-in styles. Themes authors won't have to write them, we can just provide good defaults. (This needs to be prototyped/tested though)

Notes

The wide/full widths used above are examples, one idea here would be to rely on CSS variables and allow InnerBlocks to disable/enable/customize the widths per container.