Align wide and full classes

With Gutenberg getting closer and closer to being ready for merge into core WP, I thought it’d be time to look at two of my favorite features being introduced for users and theme developers.

That’s the .alignwide and .alignfull classes.

These are two classes that I’ve wished we had for ages. I’ve seen some theme authors implement them in the past, but there was no standard naming scheme for them. Therefore, they couldn’t be shared across themes. Regardless of the direction of the Gutenberg plugin, these two classes are more than welcome.

In this tutorial, I’m going to cover adding support for and styling these new classes. I’m already making liberal use of the classes on this site without actually having Gutenberg installed. This is useful with or without the plugin.

While the primary use case in Gutenberg covers images, I’m using the feature for other things too, such as full-width testimonials on my product pages and elsewhere.

Adding Gutenberg support

Adding support for wide and full images is pretty simple. You need to drop the following code into your theme setup function, which should be hooked to after_setup_theme:

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

This tells Gutenberg to show users the wide/full image alignment options in the new editor. If your theme doesn’t support this, it won’t be shown to the users.

Adding your styles

The new .alignwide class is a way of telling a theme that an element (images in most cases) should be wider than the post content. The .alignfull class tells the theme that it should be full width.

Here’s some sample CSS that I’m using here on my site to handle this. I’m using the .entry__content class as my post content container, so you’ll want to adjust that to match your theme.

.entry__content .alignfull,
.entry__content .alignwide {
    margin-left  : calc( -100vw / 2 + 100% / 2 );
    margin-right : calc( -100vw / 2 + 100% / 2 );
    max-width    : 100vw;
}

@media only screen and ( min-width: 950px ) {

    .entry__content .alignwide {
        margin-left  : -125px;
        margin-right : -125px;
        max-width    : 950px;
    }
}

My content area is 700px wide. So, I allow for “wide” images to stretch up to 950px. Of course, you can adjust that to fit your needs.

Please note that Gutenberg is in development at this stage. This may change when the plugin is officially adopted into core WordPress.