Get Your Theme Ready for Gutenberg

Gutenberg is the codename for the upcoming WordPress editor. It’s currently in beta and available for download from the WordPress.org plugin repository.

The new editor consists of blocks that replace current hacky methods of introducing dynamic content such as widgets, custom HTML, and shortcodes.

If you test your current theme with Gutenberg, you’ll notice that everything works out of the box without the need for many styling tweaks.

There are, however, some advanced features that require opt-in support in themes.

Wide / Full Width Alignment

To start, you need to declare support for this feature in your functions.php file:

add_theme_support( 'gutenberg', array(
     'wide-images' => true,
) );

When you define a block as wide or full width, the alignwide or alignfull class names will be added to the block’s container, respectively. These alignment options work best if your theme outputs content in a single column layout.

It’s up to your theme to style these new classes. The styling might be different from theme to theme, but here’s an example:

.entry-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
}

.alignwide {
    margin-left: -200px;
    margin-right: -200px;
}

.alignfull {
    margin-left: -100%;
    margin-right: -100%;
}

In the example above, the post content section is by default centered and with a maximum width of 700 pixels.

With the wide alignment, the width will increase to 1100 pixels. With the full width alignment, the content will go edge to edge in the browser.

These alignment options are currently supported by most of the default blocks: Paragraph, Image, Gallery, Cover Image, Video, Audio, Pull quote, Table, Preformatted, Code, Button, Text Columns, Latest Posts, and Categories.

Colors

For the blocks that have the option to select colors, you can add your own palette. By default, Gutenberg declares its own color palette, but you can replace it with your own:

add_theme_support( 'gutenberg', array(
   'colors' => array(
        '#a156b4',
        '#d0a5db',
        '#eee',
        '#444',
    ),
) );

You can add as many colors as you’d like.

Color schemes are currently supported by the Paragraph and Button blocks.

---

Gutenberg is still being actively developed and things can change at any time. It’s not yet ready to be used in a production site.

Follow the “gutenberg” tag in the Make WordPress.org blog to stay updated with the latest developments and discussions.

If you’re curious about theming for Gutenberg, check the official example theme here.