css - Style new block-editor alignfull class without scrollbars or overflow

admin管理员组

文章数量:1333442

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?

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?

• css
• block-editor

Share Improve this question edited Jul 25, 2019 at 4:09 Trevor asked Jan 16, 2019 at 0:54 TrevorTrevor 71711 gold badge77 silver badges1818 bronze badges 1

• An alternative solution to the answer below is to use Javascript or jQuery to do some calculating for you. Details listed here: github/MichaelRise/Gutenberg-Fullwidth-Alignment – Trevor Commented May 2, 2019 at 4:10

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 5

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

Actually this can be solved with just a few simple lines, and it has far fewer unintended consequences than anything else I've seen or tried. This is basically what the TwentyTwenty theme is doing, though they do include an overflow: hidden -- but that's not necessary to prevent the horizontal scrollbar.

.entry-content .fullwidth {
  max-width: 100vw;
  position: relative;
  width: 100%; 
}

Problem solved with no horizontal scrollbar in Windows.

本文标签： cssStyle new blockeditor alignfull class without scrollbars or overflow