Add Gutenberg Full and Wide Width to Your Theme

ByKurtis Wankier

It’s no secret around here, we are Roots/Sage fans, which means we build mostly with SASS on our WordPress sites. So our included examples are written in SASS, but I’ll include a compiled down version as well.

In order to get the new Gutenberg Full and Wide layouts working on your custom theme, it requires two steps. First telling WordPress you want it to start using those layout options by including a simple one-liner in your app/setup.php file (or your standard functions.php file for most other themes):

add_theme_support('align-wide');

After that a quick addition to your sass files and you’re on your way to full or align width magic. The alignwide and alignfull classes are the magic, here. I like adding this to the bottom of the resources/assets/styles/components/_wp-classes.scss file:

.entry-content {
     .alignwide {
          margin-left : -80px;
          margin-right : -80px;
          max-width : 100vw;
     }
 
     .alignfull {
          margin-left : calc( -100vw / 2 + 100% / 2 );
          margin-right : calc( -100vw / 2 + 100% / 2 );
          max-width : 100vw;
     }
 
     .alignfull img {
          width: 100vw;
     }
 
     .wp-block-columns {
          @extend .py-5;
     }
 
     .wp-block-editor-blocks-wrapper {
          .wrapper-inner {
               max-width: 1110px;
               padding-left: 0;
               padding-right: 0;
          }
     }
}

Or the (untested) compiled down CSS version:

.entry-content .alignwide {
     margin-left: -80px;
     margin-right: -80px;
}
.entry-content .alignfull {
     margin-left: calc( -100vw / 2 + 100% / 2 );
     margin-right: calc( -100vw / 2 + 100% / 2 );
     max-width: 100vw;
}
.entry-content .alignfull img {
     width: 100vw;
}
.entry-content .wp-block-columns {
     padding: 5rem 0;
}
.entry-content .wp-block-editor-blocks-wrapper .wrapper-inner {
     max-width: 1110px;
     padding-left: 0;
     padding-right: 0;
}