Gutenberg & Themes

WordPress is set to receive a brand new editor, some time this year with WordPress 5.0. Along with this new editor are some new features that themes can opt into. This post will cover what those new features are. 

If you only ever read one thing about Gutenberg and themes, though, know this: there is no "Gutenberg theme", and as a theme builder, there's nothing you have to do, to be compatible with the new editor.

As with all things, there may be more features you can opt into in the future. But the editor that will ship with WordPress 5.0 will not require you to make any changes.

Wide Images

While you don't have to do this, you can opt into supporting wide images. Gutenberg specifically supports two new image sizes: wide, and fullwide. Here's a fullwide image:

This is a very wide image.

You can use these alignments on nearly all blocks. Here's the wide alignment applied to a gallery:

When a theme supports wide alignments, blocks get access to two new alignments on the toolbar:

The two last buttons are wide and fullwide respectively. The way your WordPress theme opts into these two alignments, is to paste the following snippet into your functions.php:

add_theme_support( 'align-wide' );

Adding that will make the two new alignment buttons show up, and it will add .alignwide and .alignfull to blocks which have been given these alignments.

The next step to take is to ensure that we have the necessary CSS in place to handle these new classes. The reason you have to opt-in to these alignments, is because the code to do that is slightly more complex than what you need to simply float an image left or right.

I put together a Codepen which features the simplest approach that I've found while still being solid and easy to apply. It works by relying on a main column that has no max-width, and instead applying this max-width to every child element that isn't a wide or fullwide image. The code looks like this:

.site-content > *:not( .alignwide ):not( .alignfull ) {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}

See also a version of the same Codepen which features a sidebar, in addition to wide images.

What this code does is say every immediate child of the .site-content, except elements with classnames .alignwide or .alignfull, should have a max-width and be centered horizontally. This essentially lets us specify max-widths of 100% for fullwide (use ALL the screen!) or 75% for wide images. You could also specify pixel-widths here.

But what about floats?

The usual way to float an image is this:

.alignleft {
  float: left;
  margin-right: 2em;
}

Simple. But in a layout with an unconstrained main column, this float would burst out of the main column, and place itself snugly to the extreme left of the viewport. Not what we want. What we want is for it to float alongside the left margin as defined by the main-column max-width we defined previously.

But images in Gutenberg come with extra markup we can leverage. Here's the markup:

<figure class="alignleft">
  <img src="https://cldup.com/yPKF2vjugC.jpg" alt="">
</figure>

The figure here is the same width as the main column, because it was not excluded from the max-width we applied earlier. That means this element is both centered, and has the same margins as the adjecent text. Which means we can just float the image inside this element:

.alignleft img {
  float: left;
  margin-right: 2em;
}

Subtle change, but an important one. We're simply floating the image inside the constrained and centered container. This makes the figure element collapse into a zero-height element, and lets subsequent text float around the image. Just like how we want it.

There are many other ways to support wide images in Gutenberg, but it's important to remember that you don't have to support these alignments, and if you don't do anything, the buttons won't show up in the editor. Hope you'll enjoy using wide images! By the way, this website is now using a theme that supports wide images out of the box, and you can snatch it on Github.

Update, February 24th: The Codepen examples linked in this post have been tweaked slightly, and captions have been added to floated images.