Add support for full and wide width images in a Genesis child theme

Learn how to make a Genesis child theme compatible with the full and wide width image sizes of WordPress block editor.

Among the features of the WordPress block editor, there are 2 new ways to display images.

Before this, in WordPress the pictures had three possible alignments: to the right (alignright), to the left (alignleft) and to the center (aligncenter).

The block editor introduces 2 alternatives: wide width (alignwide) and full width (alignfull).

In the first one, the image takes up a little more space than the page container and in the second one it takes up the whole width.

In order for them to display correctly in the block editor you must give them support in your Genesis theme and CSS styles.

Instructions for supporting full width images

Add the following line in functions.php:

With this step, the new alignment options will appear in the image block.

But for the images to be displayed correctly and take up the space they should, you must give style to the new classes.

To do this, enter the following code in style.css:

Styles may vary depending on the Genesis child theme.

In this case, I used Genesis Sample as an example. However, you can get the effect you want with any other Genesis child theme.

Conclusions

You only need one line in functions.php and adapt the look through CSS to get your Genesis Framework child theme to use and show correctly the WordPress block editor wide and full width image sizes.

If you want more information about how to adapt Genesis child themes to the WordPress block editor, take a look at how to add a specific color palette or restrict it.

You can also check the tutorial that includes all the changes you need to make to make sure your child theme is compatible with the block editor.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉