Making your Genesis theme Gutenberg ‘compatible’ pt 4

Videos in the series

• Introduction
• Adding Wide and Full support to Genesis
• Adding a custom class for Gutenberg content to Genesis
• Remove existing Genesis content containers for Gutenberg content
• Add a new Genesis content container for non-wide and non-full width Gutenberg content
• Adjusting the appearance of Gutenberg wide and full-width content in Genesis
  
• Adjusting the Genesis theme for left and right aligned images

Resetting the Genesis theme container widths for content created using the Gutenberg editor.

We now have a custom body class added to our Genesis theme so we can style the Gutenberg content more easily.

The next step in the process of making our Genesis theme Gutenberg compatible, is to apply some CSS code to the style.css file of our theme for when we are creating content using Gutenberg blocks.

Unfortunately there isn’t a one-size-fits-all copy/paste snippet of code I can provide. Not all Genesis themes are designed the same way, or use the same default CSS code. So the code I use in the videos may not work for your specific theme.

Over the next few videos I will be taking a look at the default structure of the Genesis Sample theme. Using the browser developer tools, I will locate what CSS code is currently being used, and adjust that code for Gutenberg created content.

If you are using a different theme, you can use the same techniques I use in the videos for locating the CSS code you need to adjust. The main process I use when looking at the theme for the code to adjust for Gutenberg based content is:

1. Reset the widths of the post/page content container(s) and make the container(s) 100% width of the page.
   
2. Take all the non-wide and non full-width content, give them a set width that is narrower than the wide or full content, and position them into the center of the page.
3. Set the widths for the wide and full content.
4. Reset widths for the left or right aligned images.

Each step will have it’s own separate video. that way you can take your time and understand the process and code being applied to your Genesis theme.

Video Instructions – click play

Text Instructions

To adjust the layout of the Genesis Sample content when using the Gutenberg editor, open the style.css file in your code editor.

Copy the below code and paste it into the style.css file:

/* Gutenberg Full Width Template
---------------------------------------------- */
.genesis-gutenberg .site-inner{
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

@media only screen and (min-width: 960px) {
	.genesis-gutenberg .content {
		width: 100%;
	}
}