The new WordPress block editor includes two new alignment options.
To take advantage of the new alignment options, your theme must first support them. Include add_theme_support( 'align-wide' ) in your functions.php file.
Full Alignment
The .alignfull option should span the full width of the screen. I typically do this using the following CSS:
.alignfull {
margin: 32px calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}The margin property can accept up to 4 values. In this case I provided 2 properties so the first ( 32px) is applied to the top and bottom, and the second (calc( 50% - 50vw)) is applied to the left and right.
This tells the browser to calculate 50% of the its container’s width (ex: 900px) and subtract from it 50% of the viewport width (ex: 1600px). This results in a negative margin that pulls the element to the edges of the screen.
Make sure you have width: 100%; overflow: hidden; on your site container. In some browsers, the 100vw doesn’t consider the vertical scrollbar so it will make your page a bit too wide, adding a horizontal scrollbar.
Wide Alignment
You have more flexibility with the .alignwide option. It should be wider than the main content area, but not as wide as the full alignment. There are two approaches I usually take:
Percentage Width
This is my default styling option built into my base themes. It copies the full alignment in approach, but instead of stretching the full gap between the browser edge and the content, it only does half.
.alignwide {
margin: 32px calc(25% - 25vw);
max-width: 100vw;
width: 100vw;
}Max width
I set a maximum width if there are certain design constraints (like the Recommended Reading floating to the right) or you only want the image to reach a certain size.
I’ll make .alignwide and .alignfull use the same CSS at first, but at a certain break point I’ll change .alignwide to a fixed max width and margins.
For the negative left/right margin, I subtract the full page width from the content width and divide by two. Ex: ( 768px – 920px ) / 2
.alignwide,
.alignfull {
margin: 32px calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}
@media (max-width: 920px) {
.alignwide {
margin: 32px -76px;
max-width: 920px;
width: 920px;
}
}You can also put the math directly in the CSS using calc()
.alignwide,
.alignfull {
margin: 32px calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}
@media (max-width: 920px) {
.alignwide {
margin: 32px calc( ( 767px - 920px ) / 2 );
max-width: 920px;
width: 920px;
}
}With SASS
I use SASS variables to store common units like the margins, content width, and breakpoints (see here). To implement the above using my SASS variables:
&.alignwide,
&.alignfull {
margin: calc( 2 * #{$block-margin} ) calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}
@include media(">=medium") {
&.alignwide {
margin: calc( 2 * #{$block-margin} ) calc( ( #{$content-width} - #{map-get( $breakpoints, 'medium' ) } ) / 2 );
max-width: map-get( $breakpoints, 'medium' );
width: map-get( $breakpoints, 'medium' );
}
}
If we decide we want the wide images a bit wider, we simply edit the medium breakpoint and all the math automatically updates. Likewise, if we change the block margin, the top/bottom margin also updates.
Consider Sidebars
If your site uses sidebars, make sure you test your styles on a page with a sidebar.
You can either limit the full/wide alignment styles to pages with .full-width-content body class, or use the max-width approach shown above, ensuring the max-width stops before overlapping the sidebar.
I prefer disabling the full/wide alignment styles on pages with sidebars. The CSS is cleaner, and you don’t end up with two different versions of “wide” and “full” alignments.
Johnny Lloyd says
Do you do this as a service? I need this done on my wp theme. Thank you.
Bill Erickson says
I focus on full theme development, not tweaks to existing themes. I recommend you use Codeable for small changes like this.
Jennifer Davis says
I like your idea of disabling the full/wide alignment styles on pages with a sidebar. I have set the styles for alignwide and alignfull as following in my custom theme stylesheet:
body.home .alignwide, body.page-template-fullwidthpage .alignwide
But what I would really prefer is to prevent a client from having these options in the editor itself. Since the alignwide and alignfull styles are added from the “add_theme_support(‘align-wide’);” in the functions.php file, is there a way to set this so the alignwide and alignfull icons only appear as options on full-width pages?
Bill Erickson says
As of right now you can only enable it site-wide using theme support. I recommend you leave a comment on this ticket and maybe we’ll see it in a future release: Consider allowing page templates to opt-in or out of wide elements
Robert Went says
I found that the full-width css created a horizontal scrollbar.
This seems to be because the vw unit also includes the width of the vertical scrollbar.
Chrome and firefox both seem to have a scrollbar of width 9px but edge is a little wider.
So this kind of works:
.alignfull {
margin-left: calc(50% – 50vw);
max-width: calc(100vw – 9px);
width: calc(100vw – 9px);
}
@supports (-ms-ime-align:auto) {
.alignfull {
max-width: calc(100vw – 8px);
width: calc(100vw – 8px);
}
}
but then the image isn’t wide enough if there is no vertical scrollbar.
Luckily, my botched code for a sticky footer means there is always a vertical scrollbar on the site I’m working on 🙂
I also changed the margin to just work on the left so that the top and bottom values are inherited and stay the same as when the image uses the standard alignment classes.
Robert Went says
I should have said that the vw units *don’t* include the scrollbar!
Bill Erickson says
One thing that has worked for me is adding
overflow: hidden; width: 100%;to some full-width div that wrap the entire site. In my themes, that is.site-container.Rob says
Yeah, I think it wasn’t possible to do that on the site I was working on as it breaks position: sticky that I was using on other elements.
Tim Priebe says
This was super helpful. I’m using Beaver Builder themer but still doing blog posts with Gutenberg, and this worked perfectly!
Josh says
Hmm, so from my testing, the align wide
“`
.alignwide {
margin: 32px calc(25% – 25vw);
max-width: 100vw;
width: 100vw;
}
“`
Just sort of shoves the element off to the right? Maybe I’m missing something.
However, the align full solution you gave blew my mind! Thanks for the help!
Bill Erickson says
While the alignfull CSS stretches the element fully to the left/right of the screen (
50% - 50vw), the alignwide CSS stretches it half the distance (25% - 25vw).You can of course change the CSS to work however you’d like. On most of our sites we’ll use an 1168px wide grid for the header and footer, and set the content width to 768px. I set the alignwide class to have max-width of 1168px so it is inline with the header/footer content.
The CSS above is just a starting place for you. It makes the wide alignment option halfway between “none” and “full”. You should update the CSS to whatever makes sense for your theme.
HH says
Hey Bill,
I’m trying out your EA Genesis Child theme since what you talked about above is already included in the theme. I see the .alignwide and .alignfull works as described for the default Gutenberg blocks and also Atomic Blocks. I was also trying the new GenerateBlocks (by the GeneratePress guys), but the .alignwide and .alignfull does nothing. Also, the Block Areas post type won’t save when I use GenerateBlocks. Works fine on Pages and Post post types. Not sure if these issues are related to the theme or plugin.
Bill Erickson says
I’ve never used GenerateBlocks so I can’t comment on how they would work with my starter theme. My guess is either (a) their blocks don’t actually support the alignment classes, so when you select “Align Wide” it is not adding the .alignwide class to the block, OR (b) their blocks include more specific CSS that is overriding our alignment styling.
Damian Saunders says
HH,
You might find the comments by Tom, the creator of Generate Blocks, in the comments of this article useful. I found the same issue with the .alignwide and .alignfull classes and Generate Blocks…now I know why, and that it will be changed in a future release.
https://wptavern.com/build-versatile-layouts-with-the-generateblocks-wordpress-plugin
Iker says
Hi, I need to know, how could I remove the spaces between blocks that are formed when editing with gutenberg
Bill Erickson says
You could write some CSS to remove it, but I really recommend keeping it. The space between blocks ensures the “Insert block” button that appears between blocks is accessible.
When you’re in the block editor, right click on a block and inspect element. You’ll see the CSS that’s adding the margin between blocks.
Temi says
Can I just add – what a refreshingly simple and EFFECTIVE guide to full-width alignment, using Gutenberg.
Every ‘other’ tutorial totally ruined my page structure (..but this is the ONLY one that actually worked).
Bill, please keep doing this service of free PROFESSIONAL WordPress help online.
(I began reading your blog from like 2011-12…since then my focus has switched more to online marketing than Genesis/WordPress – however, that said…you’re still totally relevant.)
This blog of yours is an essential resource for novice WP theme developers like me.
Good work for sharing those valuable lessons learned.
Thank you.
Temi
Bill Erickson says
Thank you for the kind comment! I really appreciate it.
Cemal Ekin says
Thank you for the post, I was quite excited when I found it. However, I cannot make the opening images at the top of the posts to remain 1200px wide even when the screen width is much larger. Currently, it is rubbery and I found that solution a while back. But I would much prefer to have a maximum width for the alignwide elements. I tried your CSS but for some reason, I could not make it work. Any hints?
My site is at https://www.keptlight.com and the recent posts all have an opening image.
Thank you,
Cemal
Bill Erickson says
It looks like you were able to resolve this. I just viewed some posts on your site and they all have 1200px wide images at the top.
Cemal Ekin says
Yes, indeed! Thank you, Bill. I resolved it only a few days ago with inspiration from your post. Now, I am searching for ways to make the editor respect the site style!
Happy new year to you, yours, and your readers.
Cemal
Bill Erickson says
The editor is a bit easier since it doesn’t involve negative margins.
Create a separate CSS file that loads in the block editor, and include:
.wp-block[data-align="wide"] { max-width: 1200px; }Cemal Ekin says
Oh, thank you very much, Bill. I will try this.
Cemal
Daniel Effiong says
Thanks for the helpful article, it helped me with my theme.