Looking for providing Gutenberg editor's full-width alignment compatibility in your WordPress theme? Even though your theme sets boxed website layout, and even displays a sidebar? You're at the right place. :)

And if you are a Gutenberg developer, welcome too. You may find some interesting insights on how to make a block alignment more flexible and easier to style here.

In any case, I'll continue with assumption you have some experience using Gutenberg editor and have played with different blocks alignment options. We'll look into technical side of things.

Let's get familiar with terms first:

  • Gutenberg - refers to WordPress' Gutenberg editor,
  • block - Gutenberg block, a web page content element,
  • currently/now - referring to Gutenberg version 3.6.2 functionality and behavior (as of this writing).

You've probably heard the story…

A brand new Gutenberg WordPress content editor is just around the corner, and heavy loaded. Well, how many times have you heard this already? ;)

But it really seems to be true this time around and so we need to buckle up and get our WordPress themes Gutenberg ready.

To be honest, I don't like the "Gutenberg ready theme" label you hear a lot these days. You see, any theme will (should) work with the new editor out of the box anyway. A new editor will not render all existing themes obsolete through the night. Also, it will become a part of WordPress core, and WordPress theme is, and will be a WordPress theme.

Though I bet theme authors will get flooded with questions from their theme users and customers asking about this.

For me, and most likely for theme users too, being Gutenberg ready mainly means providing compatibility with the new wide and full alignment functionality. (Note that you can surely go much further than that with your theme.)

Providing styles for new .alignfull and .alignwide CSS classes could prove a bit difficult depending on your theme's layout.

That's why I've decided to investigate styling approaches for different website layouts. Below I provide some of the most common example cases together with CSS code you can use. (Also, you will find a bit of a twist in the examples, which I will explain later.)

Before we jump into coding, we need to set the stage by enabling wide alignment support in your theme, and I need to answer a couple of questions that will most certainly come to your mind.

Why there are just examples of .alignfull?

Yes, you will find a code for .alignfull class only in my examples.

I find styling the .alignfull CSS class to be the most difficult. And yet, the most helpful. Once you tackle those styles, everything else should be easier. That's why I do not provide any other block alignment CSS code in my examples.

The .alignwide should be quite straightforward though: in most situations you set some negative margins and widen the content a bit. Also, the .alignwide can become a subset of .alignfull in certain cases, which will help you with such styles.

Where are the other block examples?

Again, I'm limiting my examples to a Cover Image block only, which seems to be the most difficult to align (even to left and right in some cases).

The way Gutenberg works now, it applies alignment classes directly onto block containers.

But in case of Cover Image block container there are also background styles applied. And if you test thoroughly, with "Fixed Background" block option enabled, you'll find out that you should stay away from this CSS code:

  .alignfull {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%); /* -> Causes rendering bug! */
}

It would trigger a rendering bug in web browsers!

The bug is related to background-attachment: fixed; styles being applied on any CSS-transformed element. And as our CSS-transformed .alignfull class styles above would interact with our Cover Image fixed background, the bug would manifest itself as:

  • background image position rendered correctly, but image not fixed in Firefox,
  • or, the image being fixed, but not correctly positioned in Chrome, for example.

Having answered these questions we can dive into the examples now.

Examples

Finally, here we have the promised examples where I explore how to style .alignfull class (without any CSS transform applied on it).

And - surprise - also how using an additional .align-wrap wrapper div produces a more flexible and manageable CSS code in some cases.

Check out how to style Gutenberg full-width alignment when:

  1. Example of websites applying max-width on Gutenberg blocks Applying max-width on content elements (blocks)
  2. Example of full-width websites Having max-width content container in a full-width website
  3. Example of boxed websites Having max-width content container in a boxed website
  4. Example of websites with sidebar Displaying sidebar on full-width & boxed website

The .align-wrap wrapper

I'm sure you've noticed the additional .align-wrap wrapper div in example websites. And you might have noticed how it's being helpful in certain website layout cases.

I understand introducing an additional HTML element seems unnecessary. Believe me, I hate to do this too. But especially with boxed website layouts the wrapper helps and simplifies the CSS code required to style the full-width block alignment. And that's certainly not bad.

Having this wrapper functionality integrated directly into Gutenberg seems very unlikely though. So, I have created a dedicated PHP function you can use in your theme to enable the wrapper on your website front-end now. (Or use alternative function to split content into sections.)

Note that in admin area, when editing a post or page with Gutenberg, all blocks are already being wrapped in an additional div so we can use CSS attribute selectors to target these wrappers in our editor stylesheet (use [data-align="$alignment"] where $alignment could be of left, center, right, wide or full value).

Pros and cons of using additional wrapper

There are some pluses and minuses when introducing an additional wrapper div around our .alignfull blocks:

Advantages:

  • makes it easy to style .alignfull and .alignwide classes in vast majority of cases,
  • used CSS code seems to be more manageable and even flexible,
  • in certain cases reduces the code required to style the alignment,
  • alignment could be applied on any block, technically, (even prevents issues with Cover Image block left/right alignment → see below),
  • is future proof, meaning it should work perfectly fine with any new blocks added to Gutenberg core or via a plugin,
  • is backwards compatible - should not break any current styling implementation on a website front-end as it does not move/remove any class from anywhere, it just creates additional wrapper div which you can leave perfectly unstyled.

Disadvantages:

  • adds a new HTML element…,
  • depending on your point of view, a wrapper is unnecessary (and indeed, it should be, in a perfect world…),
  • in certain cases it requires slightly more CSS code to style.

Pushing things even further…

What about using the wrapper with all alignment cases? (Bet you could see this coming. ;))

I mean even for left, center and right alignment cases. This way we have more flexibility for aligning any block with our CSS styles.

For example, currently the Cover Image block can not be aligned left or right when your theme has a full-width content area and applying max-width with automatic horizontal margins on blocks. Simply because the alignment class is applied directly onto container holding an image background and there is no parent element we can count on for keeping the position of the block while it's floating left or right. This could be solved with an additional wrapper.

And similar would apply for Pullquote block alignment.

For me now, I'm staying out of wrapper for all alignment cases simply because I don't need it (my themes apply max-width on a content container where I can achieve left/right alignment easier). But if you feel this could solve your particular issues, go ahead and voice your suggestion/opinion on Gutenberg project's GitHub page or simply use the PHP function I've provided.

Conclusion

Congrats if you've been successful in making your theme Gutenberg ready now! Let me know if any of my codes helped to you to achieve that and share your results. :)

We're all looking forward to Gutenberg era! An era full of wide-alignment-compatible WordPress themes. It's certainly possible to achieve.

Thank you for reading!

Bonus…

Just for reference again, in case you'd like to try the alignment wrapper div in your theme, I've created a little function you can use. (Or use alternative function to split content into sections.) Enjoy!


1,958 0 2