Find out in this tutorial how to display the same frontend styles in WordPress block editor.
In previous tutorials I already explained how you can support editor styles in a WordPress theme and how to load a specific stylesheet for the editor.
But maybe what you are interested in is to use the same stylesheet of the website frontend so that it is also applied in the editor and thus gives you a similar experience between the two.
Let’s see how you can achieve this:
Snippet to display the frontend CSS styles in the block editor
Add the following snippet in functions.php:
To see this and another 965 code snippets of this website, login or subscribe here.
With this code you make sure to give support to the styles of the editor and indicate the stylesheet that is going to load, in this case those of the front end.
In this example, the file that would be loading is the style.css that is in the root of the theme. If it is in a subfolder or has another name you only have to modify it in the snippet.
If you are creating a new theme I encourage you to consider using the theme.json for styling since what you define in this file will be reflected both in the frontend and in the block editor.
Conclusions
Now you know how to use the same CSS stylesheet for the frontend and the block editor
If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.
Benefits of being a subscriber. 🙂
