Gutenberg Block Alignment

This should be a short one but a good one! On my most recent project using Gutenberg I learned about WordPress’ Gutenberg block alignment. In the Twenty Nineteen theme you can already see the options: align-left, align-right, align-center, align-wide, align-full.

My goal here is to talk about:

  1. How to include those options in your theme
  2. What those alignments actually do in the editor and the view
  3. Options to style the alignment classes in your theme

Adding block alignment support

One of the gotchas with alignment is that your theme might not have support for the pre-made alignment toolbar out of the box. For example, I used the underscores starter theme and I wasn’t able to select align-full or align-wide:

I’m not sure why this doesn’t come automatically in all themes, but basically you have to enable the support in your theme functions.php file. In the underscores starter theme there’s a theme support function…

function theme_name_setup() {
    ... // Lots of theme support adding
    add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'theme_name_setup' );

Adding that one line will enable those options in your theme. Not too bad. But still your custom blocks will not have the toolbar yet. To let the editor know that your custom Gutenberg block supports this alignment toolbar, you need to add something to your registerBlockType javascript function as well:

registerBlockType('namespace/block-name', {
    title: 'Block Name',
    icon: 'smiley',
    category: 'common',

    supports: { // Hey WP, I want to use your alignment toolbar!
        align: true,
    },
...
}

What do the left/right/center alignments do?

The left-center-right alignments do very similar things.

In the editor, the wrapping div of the element has data-align="left/right/center" added to it. The default editor styles then use float:left, float:right, or text-align:center using [data-align="..."] as the selector.

For example, align-right uses the following to float content right.

.editor-block-list__block[data-align=right] > .editor-block-list__block-edit {
    float: right;
}

So, if you want the editor to behave differently (for some reason) you’ll want to overwrite those styles.

On viewing your page or post you have a different story… The only thing that changes is a class is added. So you will get alignright, aligncenter, or alignleft classes if you select those.

At least in the starter theme for underscores there were pre-made styles that use those class names. But really, you should be sure to cover those selectors when you are styling your theme so that you have them. Here is how underscores do their alignments, but do as you wish!

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

Note that the above example will only center an element using margin: auto. That means that if the block is not sized smaller than the width of the screen, it will not center like you expect. You may want to style it yourself.

What do align-full and align-wide do?

About the same thing, but the editor has some extra already-decided widths in mind.

One thing to know right away is the WordPress has a default block width in the editor.

.wp-block {
    max-width: 610px;
}

align-wide is meant to break out of the content constraint and be a bit wider than the main editor blocks. The div container will have the attribute data-align="wide" added and WordPress will use css styling to basically constrain that particular block to 1100px using max-width by overwriting the default of 610px.

align-full is meant to be full-width. WordPress by default will remove the max-width, but it will also add a little bit of left and right margin.

None of this happens on viewing the page/post by default. If you see align-full working in the editor, you will not see it in your theme unless you have designed your theme css to account for it! The only thing you will see is a class name added to your block. You need to style it still!

So that leads us to the next question: how should you style these things?

Options for styling align-full and align-wide

Constraining individual elements

One way to do this is to always explicitly style each of your blocks (and the default blocks) to be individually constrained to your site content width. For example:

.content-entry {
    p, ul, li, h1, h2, h3, h4, ... {
        margin: auto;
        width: 100%;
        max-width: $SITE_CONTENT_WIDTH;
    }
}`

(Notice I’m using SCSS here.) This will make specific default elements at most the content width, but there will be the illusion that everything is constrained together. The other nice thing about this is that blocks will be full-width by default. Things like hero blocks you won’t have to deal with constraining at all.

The downside is that you will inevitably miss certain things and have to come back to update the width for other elements and blocks you are adding.

Constraining .entry-content

This is a bit trickier to get right.

On my theme (as of April 6th, 2019), for example, I’m constraining .entry-content to be a max-width of 1200px. Well, not exactly .entry-content, but .constrain is doing this and it’s basically functioning like .entry-content.

This is nice because I won’t forget to constrain any element.

But I learned very quickly that the tricks to make things align-full are a bit dicey. The go to trick to make a block full width even though it is in a constraining div is to use margins:

.custom-block {
    position: left;
    left: calc(50vw - 50%);
    width: 100vw;
}

So why is this dicey? Scroll-bars. Vertical scroll bars take up width, and when you do this trick you will have overflow horizontally.

For my site there is a fix where I use overflow-x: hidden on the html element to hack the problem away. But there is a little part of me that is very dissatisfied with that solution. It seems to work so far though.

Conclusion

Hopefully the alignment options and support now make a bit more sense, and you have some ideas on how to support these options in your theme.

Have a suggestion or comments for me? Please send me a comment below or tweet me at @jschof

One thought on “Gutenberg Block Alignment

  1. Well, technically, this control is confused/confusing. That is, it’s a poor UX. I realize it’s not yours but I want to vent a bit 🙂

    There is alignment: left, center and right.

    There is size: wide and full.

    These two should never have been combined.

    Furthermore, it could be (read: should have been) taken a step further. Block size (the wrapper) and alignment is not the same as the inner “box” (e.g., blockquote) size and alignment.

    Unfortunately, this has been (mistakenly) dumb’ed down into five buttons; and those have been lumped together as if to say they are related. But they’re not.

Leave a Reply

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