Get Updates to Your Inbox!

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. 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;
     }
 
     .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;
}

Leave a Reply

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