Find out how to optimize block styles for WordPress block editor in previous versions of Genesis Sample (< 2.8) child theme by code.
WordPress block editor has its own CSS stylesheet, so blocks should look good in any Genesis child theme.
However, they may not fit perfectly with the design of your child theme.
In that case, you may want to apply your own custom styles.
As an example, in this tutorial I share with you the CSS lines needed to make previous versions of Genesis Sample (< 2.8) suitable for the WordPress block editor.
Ready?
Instructions to adapt editor’s block styles to Genesis Sample (< 2.8)
You need to make 2 modifications and include them both in style.css:
1. Apply style to the blocks in the editor
Add the following code in style.css:
To see this and another 919 code snippets of this website, login or subscribe here.
With this fragment you manage to apply a basic format to the main WordPress Editor’s blocks.
2. Adjust the extra elements
Besides blocks, there are other features in the WordPress editor that you also need to adapt, such as text size or background color.
To do this, add the following code in style.css just after the previous one:
To see this and another 919 code snippets of this website, login or subscribe here.
With this second step, you have finished formatting the rest of the elements in WordPress editor.
Note that the details in this example are intended for Genesis Sample (version 2.6).
However, you can achieve the effect you want with any other Genesis child theme by using this snippet as a starting point and adjusting it to your theme with minor modifications.
If you want to completely adapt the styles of your template to Gutenberg, in addition to the above changes you should take into account:
Conclusions
The arrival of WordPress block editor is a turning point, not only for the way you create content, but also for the way you display it.
Blocks should work seamlessly in any Genesis theme. But if you want to get the most out of them and make them look perfect, it is possible that you need to make some adjustments.
With this tutorial you will make sure that the basic elements of the new editor are displayed correctly in your child theme.
Remember that the modifications are made for Genesis Sample, so you will need to apply small changes to the code to make it fit ‘like a glove’ in your theme.
And this is only a part of the features to be implemented. I suggest you to check the tutorial with all the alterations you need to make to your child theme to make sure it’s compatible with the block editor.
Any questions? Let me know 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. 😉
