Gutenberg full-width alignment (and its wrapper) study

Description

This is a collection of solutions on how to style Gutenberg editor's .alignfull CSS class in various different WordPress theme layout scenarios. For complete information about these study cases please read an accompanying article.

The examples below are related to the WordPress' new Gutenberg editor, specifically its version 3.6.2 (as of this writing in August 2018).

The examples does provide CSS styles for .alignfull class only. Styling the .alignwide class should actually be pretty straightforward and much simpler, that's why I do not explore such styling in these examples.

Contents

  1. Example website: Max-width on blocks
  2. Example website: Fullwidth
  3. Example website: Boxed
  4. Example website: With sidebar

Tips

Click the eye button in the navigation bar on top to toggle visualization of:
- content minimal horizontal padding (red semi-transparent stripes),
- content container border (blue semi-transparent stripes),
- boxed website container minimal horizontal margin (green semi-transparent stripes).

There is a padding and a orange semi-transparent striped background applied on our additional .align-wrap experimental wrapper div for easier visual identification.

Known issues

When previewing these examples on a PC with Windows operating system, you might notice horizontal overlaps and even a horizontal scrollbar.

Unfortunately, this is caused by incorect calculation of 100vw width in a web browser on Windows platform, where vertical scrollbar width is not being deducted.

You can compensate for this issue by applying additional .site { overflow-x: hidden; } styles, but I've decided to left these out for the purpose of these demonstrations.

Advice: Don't be tempted to apply a CSS transformations on the .alignfull (and .alignwide) class! For more info about the reasons why this is not recommended, check out the accompanying article.

Disclaimer

CSS code provided in these example websites is tailored specifically for this project. As your website layout setup may differ, you need to modify the provided CSS code to your needs. I provide no guarantee the code would magically work simply by copying and pasting to your theme stylesheet!

You should know how you've styled your WordPress theme layout and how to modify the provided CSS code so it works with your theme.

Enjoy and have fun! :)