Skip to content

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

Comments

  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.

  2. Hi, I already asked you about the PHP views on another tutorial. How do I get data-align in PHP views?

    1. I’m not quite sure what you’re asking. You just want the data-align value when someone is viewing the page?

      If that’s the case, you can just render “data-align=’whatever'” in your save function.

  3. for php views, you are required to have an attribute :

    example with :
    supports: {
    align: [“full”]
    }

    componentDidMount() {
    window.addEventListener(“load”, () => {
    var wrap = document.querySelector(
    ‘[data-type=”capacity/employee-skills”]’
    );
    var config = { attributes: true, childList: false };
    var callback = function(mutationsList) {
    for (var mutation of mutationsList) {
    if (
    mutation.type == “attributes” &&
    mutation.attributeName == “data-align”
    ) {
    if (wrap.hasAttribute(“data-align”)) this.props.setAttributes({ isFullWidth: true });
    else this.props.setAttributes({ isFullWidth: true });
    }
    }
    };
    var observer = new MutationObserver(callback);
    observer.observe(wrap, config);
    });
    }

  4. This is the reason why I need someone to help me when it comes to editing code. My mind just doesn’t work this way.

    I understand that certain codes in script has to be combined in order for it to be seen in Gutenberg and I understand that its basically controlled through the CSS & HTML on hoiw it is seen from the Frontend vs. His it is input in the back end office, but my problem is that I cannot picture this in my head his it actually works. And for some reason, all this code becomes confusing to me even though I have a general understanding of how it combines together to look better on the frontend of CMS such as WP. But again, even though I pretty much can see basics of how individual code works in CSS, JS, HTML, & other types of script; I still cannot understand how it all works together! This is the reason why I liked the old Classic editor, because I could understand how the WYSISWYG related and worked with just the code so much better by switching easily between the two screens of “Visual” & “Text” areas and what was even better is that when you switched it kept you in the same place as you were before in the visual editor mode vs. the Text mode. It didn’t move you around like it does when switching between “Visual & “Code” screens in Gutenberg. I didn’t have to feel like some type of stupid animal poking a Fallon tree with a stick into a knothole of the tree to find food to eat. Honestly, that’s how it makes me feel! IT’S FRUSTRATING! I know I can’t be that stupid.

Leave a Reply

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