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. 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
.
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;
}
}
https://www.billerickson.net/full-and-wide-alignment-in-gutenberg/