1

With WP 5.0 you can now enable full width blocks in the editor by adding this to your theme: add_theme_support( 'align-wide' );

However, if you are using a custom theme you have to add your own CSS to make that work, as discussed in this Gutenberg issue. There are lots of examples out there that do work, but there are scrollbar issues with all of them for anyone not on a Mac.

The problem is if you use width: 100vw, which is the best way I've found to do this, on Windows devices you get a horizontal scroll bar as soon as you have a vertical scroll bar on the page. I understand this is actually per the viewport width spec, so I'm really hoping to find another way to actually make this work on all devices.

What I have right now to enable full width is this CSS:

.entry-content .alignfull {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
body .entry-content .alignfull > * {
    width: 100vw;
    max-width: none;
}

I then add an overflow: hidden; on my outside container <div> of whatever wraps the_content() so as to hide the scrollbar. But what I'm looking for is a solution that doesn't rely on overflow hidden which can cause all kinds of unintended consequences. Any ideas out there?

2

After banging my head over that horizontal scroll bar issue, I think going the other way and adding a max width to blocks without the alignfull classes. If you just remove your page templates wrapper and assume it as 100%. Here is a pen with the WP markup as closely emulated as I could https://codepen.io/nickfmc/pen/vvbWQa

.editor-content > *:not(.alignfull) {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.editor-content > *:not(.alignfull).alignwide {
  max-width: 1400px;
}
  • Hmm. This looks like a really interesting idea. Only problem is I think you have to have a wildcard (*) selector instead of the wp-block. The issue if you don't, what if you just have paragraph text block or a heading block? They aren't wrapped by wp-block-XXX class so they run full width when they shouldn't. – Trevor Feb 11 '19 at 1:10
  • updated as per your suggestion, I think you are right this is a better way to go. Seems to be working well for me using this solution – NickFMC Feb 22 '19 at 21:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.