Styling the Editor in WordPress

In a previous post about updating my themes for the Block Editor, one aspect was adding theme support for editor styles. By default, the Editor uses the browser’s default serif font and oddly sizes the mono font in block and inline use cases.

First add the theme support and enqueue the CSS file using the code below in the theme‚Äôs functions.php file, within the after_setup_theme hook.

add_theme_support( 'editor-styles' );  // new editor styles support
add_editor_style( 'assets/css/style-editor.css' );  // add the CSS file for editor styles

Finally, create a style-editor.css file in the directory as registered in the function above. A simplified example of the CSS uses the styles below.

.editor-post-title__input,
.block-editor-block-list__block {
	font-family: system-ui, sans-serif;
}
.block-editor-rich-text__editable code {
	font-size: 15px;
}
code.block-editor-rich-text__editable {
	font-size: 14px;
}
.wp-block-pullquote__citation {
	text-transform: initial;
}
@media (min-width: 1600px) {
	.wp-block {
		max-width: 768px;
	}
}

The CSS above basically normalizes the Editor, and could be expanded to infinite styles to match your theme or general composing preferences.