Align wide and full classes

Gutenberg image alignment screenshot

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.

5 Comments


  1. ·Reply

    Thanks for sharing. Coincidentally I’ve also used these classes in a recent project. I tried to make a responsive .alignwide class without using breakpoints but I couldn’t find a reasonable solution for this.

    By the way, is there a reason for your change in classnames? .entry__content used to be .entry-content right?


    1. ·Reply

      I’m using the BEM system on my current project, so my classes are a bit different from some other projects I’ve done.

  2. Steffen Bang Nielsen
    ·Reply

    Thanks for sharing

    Here’s a similar approach – just in SASS for anyone who prefers that.
    https://gist.github.com/felixarntz/7d94fcb0dea8a8982302e93578d7085b


  3. ·Reply

    Thanks for the post, Justin. A few years ago I created this Codepen using CSS3 transform that could also help.

    CSS Only Full-width Image Where Parent Div is not Full-Width → https://codepen.io/ahmadawais/pen/avBwBz


    1. ·Reply

      Awesome! I hadn’t even though of using transform for that.

Leave a Reply to Justin Tadlock Cancel reply

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