How to include the website stylesheet in the Block editor so that block display correctly during editing.
Note, this feature is used for including global stylesheets (such as framework stylesheets) in the editor. Individual blocks can declare and include their own editor styles on their Block action.
WordPress Block editor works best when the display of blocks in the editor is as close as possible to how they actually appear on the website.
This requires the front-end CSS styling to be included in the editor.
For example, let’s say we are building a Bootstrap based theme. Our blocks rely on Bootstrap to implement styling for columns, buttons, typography and so on.
Without having the Bootstrap stylesheet included in the editor, a row of columns will appear as a bunch of un-styled vertical DIVs.
Enqueuing bootstrap.css on the Admin side is not a good idea, because its styling will clash with WordPress admin styles.
We need to include bootstrap.css but have it affect just the Blocks editor area.
To do that, open Theme / Plugin Settings and scroll down to the Blocks section.
There, add one or more CSS files with Editor stylesheet fields.
Note, this feature is only available for themes. WordPress doesn’t support including editor styles from plugins.
Listing stylesheets here will cause the generated theme to:
- Declare support for block editor styles with
- Include the stylesheets in the editor. WordPress modifies CSS selectors in such a way that they only affect elements in the Block editor area.