Align wide and full classes

With Gutenberg getting closer and closer to being ready for merge into core WP, I thought it’d be time to look at two of my favorite features being introduced for users and theme developers.
That’s the .alignwide
and .alignfull
classes.
These are two classes that I’ve wished we had for ages. I’ve seen some theme authors implement them in the past, but there was no standard naming scheme for them. Therefore, they couldn’t be shared across themes. Regardless of the direction of the Gutenberg plugin, these two classes are more than welcome.
In this tutorial, I’m going to cover adding support for and styling these new classes. I’m already making liberal use of the classes on this site without actually having Gutenberg installed. This is useful with or without the plugin.
While the primary use case in Gutenberg covers images, I’m using the feature for other things too, such as full-width testimonials on my product pages and elsewhere.
Adding Gutenberg support
Adding support for wide and full images is pretty simple. You need to drop the following code into your theme setup function, which should be hooked to after_setup_theme
:
add_theme_support(
'gutenberg',
array( 'wide-images' => true )
);
This tells Gutenberg to show users the wide/full image alignment options in the new editor. If your theme doesn’t support this, it won’t be shown to the users.
Adding your styles
The new .alignwide
class is a way of telling a theme that an element (images in most cases) should be wider than the post content. The .alignfull
class tells the theme that it should be full width.
Here’s some sample CSS that I’m using here on my site to handle this. I’m using the .entry__content
class as my post content container, so you’ll want to adjust that to match your theme.
.entry__content .alignfull,
.entry__content .alignwide {
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
}
@media only screen and ( min-width: 950px ) {
.entry__content .alignwide {
margin-left : -125px;
margin-right : -125px;
max-width : 950px;
}
}
My content area is 700px
wide. So, I allow for “wide” images to stretch up to 950px
. Of course, you can adjust that to fit your needs.
7 Comments
Thanks for sharing. Coincidentally I’ve also used these classes in a recent project. I tried to make a responsive
.alignwide
class without using breakpoints but I couldn’t find a reasonable solution for this.By the way, is there a reason for your change in classnames?
.entry__content
used to be.entry-content
right?I’m using the BEM system on my current project, so my classes are a bit different from some other projects I’ve done.
Thanks for sharing
Here’s a similar approach – just in SASS for anyone who prefers that.
https://gist.github.com/felixarntz/7d94fcb0dea8a8982302e93578d7085b
Thanks for the post, Justin. A few years ago I created this Codepen using CSS3 transform that could also help.
CSS Only Full-width Image Where Parent Div is not Full-Width → https://codepen.io/ahmadawais/pen/avBwBz
Awesome! I hadn’t even though of using
transform
for that.[…] more examples will come out of the woodwork as more themes add styles for Gutenberg. For example, Justin Tadlock has shared his method using different calc values, and Joen Asmussen has blogged about his approach of applying max-widths to all child elements […]
[…] « Align wide and full classes » via Theme Hybrid [en] @themehybrid […]
Comments are closed.