Discover in this tutorial how to display the same styles of the native editor’s blocks both in the editor and in the front-end of your web.
By default, WordPress block editor loads its own styles into both the editor and the front-end. But some elements like tables, quotes or separators, show some extra details (margins, borders, paddings…) only in the back-end.
Why? To avoid possible conflicts with the CSS of your child theme.
However, if you want, you can force the block editor’s style to appear in the final result with a simple line of code.
Give it a try!
Snippet to display the block styles of the editor in the front-end
Add the following snippet to functions.php:
To see this and another 1097 code snippets of this website, login or subscribe here.
With this line of code you make sure to load the same styles for all the blocks both in the editor and on the front-end.
Also, it works for any Genesis or WordPress child theme.
If you want to completely adapt the styles of your child theme to the block editor, in addition to the above changes you must:
Are you looking for just the opposite? In that case you can make the editing environment look as similar as possible to the front-end of your website.
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 can make the styles of certain native blocks (tables, separators, quotes…) not only load when you are editing an entry, but also in the front-end of the web.
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? 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. 😉
