The WordPress blocks editor, also known as Gutenberg, has changed the way you create content with our beloved WordPress.
But it has also opened up new possibilities, like every change.
If we talk about styles, one of the most interesting is the possibility of adding blocks in “wide width” or “full width” format to a page or entry.
This feature allows an editor block to break the default width of a theme’s content, which is no small thing, and is something that was practically impossible with the classic editor.
And then there are the enormous design possibilities offered by wide or full width blocks, such as creating new page sections with a full width background and text or image overlay, the closest thing to the famous Hero elements of modern themes and layouts.
There’s only one requirement: Your theme must be compatible with wide blocks.
Fortunately, this is quite easy to do, so here’s a quick tutorial on how to add full width block support to your WordPress theme, and how to style your blocks using CSS.
Adding theme compatibility
The first thing we have to do is add a single line of code to the functions.php file of the active theme.
Modify it with your favorite editor, you’ll find it in /wp-content/themes/your-theme/ (remember to change “your-theme” to the name of the folder of your active theme) Then copy and paste the following PHP code:
add_theme_support( 'align-wide' );Code language: JavaScript (javascript)Save the changes.
This little code tells the theme that you want blocks with wide and full widths. Yes, all in that simple line of code.
Now, to check that it works, open the WordPress editor and see if any blocks (cover, image, video, etc.) have the new alignment options called “Wide Width” and “Full Width“.
Basic styles in the blocks
Now that we have the theme compatible with the wide and full width styles, it is time to give it some style.
There are many techniques and ways to do it, here is an example:
@media screen and (min-width: 960px) {
.alignwide, .alignfull {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
}
}Code language: CSS (css)Note that in the example I am using a CSS media query only to integrate this style when the screen size is 950 pixels or wider.
This is because normally this type of effect is not necessary on smaller screens.
Also, in this case I have used the same styles for both block widths, although it is totally possible to apply different styles so that each width is displayed differently on the web.
I must also warn you of a small inconvenience, and is that in some designs when using this technique you will see a horizontal scroll bar.
If this is the case, add the following CSS to the body element:
body {
overflow-x: hidden;
}Code language: CSS (css)Does it work?
Of course, and it is one of the resources that will make the most difference in the immediate future of WordPress, because with this simple field you enter the world, until now exclusive, of the layout artists.
From the moment we add to the blocks the possibility of skipping the width of the standard theme content and apply wide and complete widths to the blocks, we directly enter a new phase of design without leaving the WordPress editor.
This way, you can easily create full width video blocks .
And then, when the changes are published, the block will look like we wanted it to, with the block occupying the entire width of the page, while the rest of the content follows the predefined width of the theme.
And we have achieved all this simply with a single line of code in the theme’s functions.php file and then some CSS style, the minimum.
Despite this minimum effort, a world of opportunities with the design of our website is opened to us.
If we then continue to add CSS or focus on applying styles to specific blocks, we will have an enormous arsenal of design possibilities in our hands.
At least for the moment, in a default installation of WordPress, Gutenberg does not offer all the options that we find in visual layouts, but just by adding wide and complete widths we enter headlong into that territory.
Gone are the days when the theme structure limited your ability to design from the editor, and this will make WordPress easier for everyone, especially for new users, who will no longer have to decide when designing their websites between:
- Changing the theme
- Changing or adding CSS
- Using a layout maker
Right from the start, the WordPress editor itself offers design opportunities that allow you to create the popular full-width sections, something that soon all themes will incorporate, and if not here you have learned how to add this functionality to your theme yourself.
Read this post in Spanish: Cómo añadir estilos de ancho amplio y ancho completo a bloques WordPress
