Find out how to adapt the styles of WordPress block editor in Genesis Sample (< 2.8) to make the editing mode more similar to the final result.
The block editor comes with its own CSS stylesheet, so in theory it should display correctly in any Genesis child theme.
However, these may not fit perfectly with your child theme design. That’s why I recommended that you apply your own custom styles, better aligned with your child theme.
You can also go one step further and give these styles to the editor. This way, the changes you make in the backend will look more like the ones you will see in the frontend.
This is extra work that may not be worth doing for your own child theme, but I recommend you do it for your clients’ ones.
The closer you get to WSIWYG (What You See Is What You Get) the easier it is for the end user to edit the content.
Shall we go for it?
Instructions to adapt WordPress block editor styles to Genesis Sample (< 2.8)
The code you will use for the editor is directly related to the one you are using for the frontend.
Therefore, in this case you will use the snippet we saw in the tutorial on how to style the editors blocks in Genesis Sample.
1. Style the new block editor
Create a file called style-editor.css in the root of Genesis Sample containing the following code:
To see this and another 1097 code snippets of this website, login or subscribe here.
With this fragment you manage to apply a basic format to the editor of the main blocks, in addition to other features of the WordPress editor like text size or background color.
In addition, you add a first block of code to use the same typographical styles shown in the Genesis Sample frontend.
This is an important detail if you want what you edit to look like the final result.
By default, WordPress block editor loads Noto Serif font, while Genesis Sample uses a very different one, Source Sans Pro. So loading the child them fonts in the editor too is a good start to get an idea of how the page will look like.
The snippet above is an example of how to adapt the most important elements of the editor.
But if you want to fully customize it, I recommend you to install the Block Unit Test plugin. This will create a page with all the native blocks, so you can quickly see which ones need to be adjusted.
2. Modify the functions.php
For this new stylesheet to load you have to enter the following lines of code to functions.php:
To see this and another 1097 code snippets of this website, login or subscribe here.
This way you finish formatting the 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 child theme to the block editor, in addition to the above changes you must:
Conclusions
The WordPress block editor should work seamlessly in any Genesis child theme. But if you want to get the most out of it and make the child theme look perfect, depending on the child theme it is possible that you need to make several adjustments.
With this tutorial you make sure that the basic elements of the new editor are displayed in a similar way when you are editing them (backend) with respect to the final result (frontend).
Remember that the modifications are made for Genesis Sample (2.6), so you will need to apply small changes to the code to make it fit into a different child theme.
And this is just a part of what you could to implement. You have the option to check the tutorial with all the optimizations you need to make to your child theme to make sure it 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. 😉
