Styling the Editor in WordPress

By default, the Block Editor uses the browser’s default serif font and oddly sizes the monospace font in block and inline use cases. Adding custom CSS to the Editor can improve the overall post writing/editing experience.

First enqueue the CSS file using the code below in the theme’s functions.php file.

function evo_block_editor_styles() {
	wp_enqueue_style( 'evo-block-editor-css', get_theme_file_uri( '/assets/css/style-editor.css' ), false );
}
add_action( 'enqueue_block_editor_assets', 'evo_block_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.editor-post-title__block,
.block-editor-block-list__block {
	font-family: system-ui, sans-serif;
}
.wp-block-code {
	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
	font-size: 0.875rem;
	background: #f9f9f9;
}
.wp-block-paragraph code {
	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
	font-size: 0.9375rem;
	background: #efefef;
	border-radius: 0.25rem;
}
.wp-block-pullquote__citation {
	text-transform: initial;
}
@media (min-width: 1601px) {
	.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.