Steps to optimize a Genesis child theme with the WordPress block editor features

Take advantage of the WordPress block editor features by optimizing a Genesis child theme with code.

WordPress block editor has very interesting features but to get them in old child themes you will need to optimize them.

What are these modifications?

Changes you need to apply to WordPress block editor

One of them is that there are 2 additional ways of showing the images.

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

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

Another new feature is the possibility to add a defined color palette to a template.

By default, it offers a color palette where you can choose the tone for text blocks, headers or buttons.

But you can limit the color palette, which helps you maintain aesthetic consistency and makes it easier for your client to use.

custom-color-palette-Genesis-Sample-with-picker

Finally, it’s also interesting to give custom styles to some content blocks in order to match the child theme design.

In short, with the following tutorial you will get all the lines of code needed to optimize a Genesis child theme to the WordPress block editor.

And as you will see, you need to make modifications at the functional level, in the functions.php file, and the aesthetic one, in the style.css.

Instructions to optimize your Genesis child theme to the WordPress block editor features

1. Edit the functions.php file

Add the following line in functions.php:

To see this and another 965 code snippets of this website, login or subscribe here.

Using this snippet, you enter the 3 chosen colors (in this case, blue, gray and black) into the palette shown in the editor. Of course, you can select the ones you want.

With this step, in addition to the colors added by code, you also include the accent colors you have chosen from the customizer.

If you are not using Genesis Sample, you will need to adapt the accent colors to what your Genesis child themes uses.

That is, instead of this:

			array(
				'name' => esc_html__( 'Link Color', 'genesis-sample' ),
				'slug' => 'link-color',
				'color' => esc_html( get_theme_mod( 'genesis_sample_link_color', genesis_sample_customizer_get_default_link_color() ) ),
			),
			array(
				'name' => esc_html__( 'Accent Color', 'genesis-sample' ),
				'slug' => 'accent-color',
				'color' => esc_html( get_theme_mod( 'genesis_sample_accent_color', genesis_sample_customizer_get_default_accent_color() ) ),
			)

You should use, for example if you’re using Workstation Pro, this other fragment:

                        array(
				'name' => esc_html__( 'Link Color', 'workstation-pro' ),
				'slug' => 'link-color',
				'color' => esc_html( get_theme_mod( 'workstation_primary_color', workstation_customizer_get_default_accent_color() ) ),
			),
			array(
				'name' => esc_html__( 'Accent Color', 'workstation-pro' ),
				'slug' => 'accent-color',
				'color' => esc_html( get_theme_mod( 'workstation_accent_color', workstation_customizer_get_default_secondary_accent_color() ) ),
			)

To find out what the functions that save the customizer colors are called, you can inspect the file customize.php inside the /lib/ folder of your Genesis child theme.

You have the functional part solved. Now lets adapt how the content is displayed.

2. Modify the style.css file

To apply the aesthetic changes required by the optimization to the WordPress block editor features, insert the following fragment in style.css:

To see this and another 965 code snippets of this website, login or subscribe here.

With this code you get:

Apply basic styles to the main WordPress editor blocks.
Format other extra elements of the WordPress block editor.
Allow wide and full width images to be displayed correctly.
Add a custom color palette.

Specifically, with this snippet you add 3 colors (blue, gray and black) and the accent colors you have chosen from the customizer.

For this example I have adapted the Genesis Sample template (version 2.6).

However, you can get the effect you want with any other Genesis child theme by using this code as a starting point and adjusting it to your child theme with small modifications.

Conclusions

The WordPress block editor is a turning point, not only for the way you create content, but also for the way you display it.

The block editor should work flawlessly in any Genesis child theme, but if you want to get the most out of it and make your it look perfect with the new editor, depending on the child theme it is possible that you need to make several adjustments.

In this tutorial you have ALL the snippets to make sure that the child theme supports the block editor features and, better yet, shows them correctly.

Remember that the modifications are made with Genesis Sample. Therefore, you may need to make small adjustments (especially CSS) to make them work perfectly in your child theme.

If you want to go deeper into what each part of the code does, take a look at the individual tutorials:

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. 😉