Style new block-editor alignfull class without scrollbars or overflow

by

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

Leave a Comment