When styles are modified or added to the front end of a theme, it's important to ensure those same changes are reflected in the block editor. This is done by adding support in the block editor for so-called "editor styles."
- One of the core purposes of a theme…is to apply custom styles through CSS…to the content presented on the front-end.…The block editor aims to make the content in the editor…on the backend look as close to what loop here…on the front-end as possible.…But right now, when you see them side by side,…you can see there are lot of differences,…including the font families themselves,…the width of the content, the size of the font, and so on.…To achieve a match between the front-end and the backend,…the editor needs to be supplied…with what's known as editor styles.…
Editor styles are nothing new in WordPress themes,…they have long been used to apply front-end styling…to the editor to create a match,…and now that we have the block editor,…we can do the same,…only extend it with further functionality.…The first step is to create an editor style's file…and place it somewhere within your theme.…It doesn't have to have a specific name or location.…In most cases, you'll call it either editorstyle.css…or styleeditor.css, or something similar.…
- Declaring support for default block styles
- Adding support and styles for wide alignment
- Supporting theme-specific colors and fonts
- Extending block styles
- Adding new style variations