fbpx
NeONBRAND Marketing & Business Development Experts
Contact Us
Site Navigation
  • Home
  • SEO
  • Social Media
  • Websites
  • Consulting
  • Contact Us
    • Las Vegas, NV
    • St. George, UT
    • Cedar City, UT
    • Provo, UT
  • Extras
    • About
    • Team
    • Portfolio
    • Website Hosting
    • Blog
    • Ebooks
    • Digital Marketing Dictionary

Add Gutenberg Full and Wide Width to Your Theme

Originally posted: December 27, 2018 by Kenny Eliason. Leave a comment
Scroll to Next
Gutenberg full width mode
Get Updates to Your Inbox!
This field is for validation purposes and should be left unchanged.

Home » Websites » WordPress Tips and Tutorials » Add Gutenberg Full and Wide Width to Your Theme

Reading Time: < 1 minute
  • Twitter
  • Facebook
  • LinkedIn

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;
}
  • Twitter
  • Facebook
  • LinkedIn
Published: December 27, 2018
Updated: November 18, 2022
Headline: Add Gutenberg Full and Wide Width to Your Theme
Image: Gutenberg full width mode Height: 1080 Width: 1457

Publisher: NeONBRAND https://neonbrand.com
NeONBRAND https://neonbrand.com/app/themes/neonbrand/dist/images/logo-gray_280c67fe.png 98 120

« Three Steps to Setup an Already Built Roots Bedrock/Sage Site
Understanding Google’s SEO Guidelines »

Leave a Reply Cancel reply

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

About the Author
Kenny Eliason
Kenny Eliason
Having grown up the son of a marketer, the skills of the trade are pumping through his blood. When you couple that with his programming and computer knowledge, you get an explosive combination. Kenny has been an avid digital marketer for over 9 years now, often being the first to recognize the hottest trends coming to the market. In his free time, Kenny loves downhill mountain biking. He calls it his "old man sport" since BMX was what he did as a teenager and it's not quite as easy to ride those little bikes anymore. Kenny is also a huge technology enthusiast, specifically when it comes to Apple products - did someone say, fanboy? Those close to him are often asking for help solving tech-related problems which often results with them saying, "man, you can fix anything!"
Search
Search
Blog Categories
  • Instagram Marketing (6)
  • E-Commerce Support (1)
  • Keywords for SEO (3)
  • WordPress Tips and Tutorials (17)
  • LinkedIn Marketing (2)
  • Consulting (15)
  • Websites (12)
  • Content for SEO (33)
  • Link Building for SEO (6)
  • Marketing Strategy (60)
  • Twitter Marketing (6)
  • Facebook Marketing (33)
  • Local SEO (13)
  • Business Consulting (35)
  • The Kurt & Kenny Podcast! (13)
  • Web Development (4)
  • Video Marketing (10)
  • Uncategorized (1)
  • Website Design (21)
  • Social Media Marketing (94)
  • Search Engine Optimization (82)
  • Home
  • Search Engine Optimization
  • Social Media
  • Website Design
  • Business Consulting
  • Digital Marketing
  • Video Marketing
  • Email Marketing
  • WooCommerce Development
  • Traditional Advertising
  • Retail Marketing
  • Dentist Marketing
  • Hotel Marketing
  • Medical Marketing
NeONBRAND Newsletter
Don't live with FOMO. Get subscribed to our newsletter and never worry about missing the awesomeness ever again.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

(702) 706-NeON
  • Las Vegas, NV
  • St. George, UT
  • Cedar City, UT
  • Provo, UT
  • NW Las Vegas, NV
  • Sitemap
  • © 2023 NeONBRAND. All Rights Reserved.