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. There are lots of examples out there that do work -- but on Mac only.

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 now avoids the scrollbar, but it means using overflow: hidden which is less than ideal and you do get the edges cut off.

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

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