e33.io

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/block-editor.css' ), false );
}
add_action( 'enqueue_block_editor_assets', 'evo_block_editor_styles' );

Finally, create a block-editor.css file in the directory as registered in the function above, and use the CSS styles below.

@import url('https://rsms.me/inter/inter.css');
@import url('https://cdn.jsdelivr.net/npm/jetbrains-mono@1.0.6/css/jetbrains-mono-nl.css');
.editor-post-title.editor-post-title__block,
.block-editor-block-list__block {
	font-family: Inter, sans-serif;
}
.wp-block-cover__inner-container {
	color: #ffffff !important;
}
blockquote {
	border-left: solid;
	padding-left: 0.938rem;
}
.wp-block-pullquote blockquote {
	border-left: none;
}
.wp-block-pullquote {
	border-top: solid;
	border-bottom: solid;
	margin: 2rem 0;
	padding: 0;
}
.wp-block-pullquote__citation {
	text-transform: initial !important;
}
.wp-block-paragraph code,
.wp-block-preformatted,
pre.wp-block-code {
	box-sizing: border-box;
	font-family: 'JetBrains Mono', monospace;
	font-variant-ligatures: none;
	background: #e7e7e7 !important;
	color: #000000 !important;
	border-radius: 0.25rem;
	font-size: 0.875rem;
	padding: 1rem;
}
.wp-block-paragraph code {
	font-size: 0.938rem;
	padding: 0.25rem;
}
.wp-block-verse {
	box-sizing: border-box;
	background: #e7e7e7 !important;
	color: #000000 !important;
	border-radius: 0.25rem;
	font-size: 0.938rem;
	padding: 1rem;
}
@media (min-width: 1601px) {
	.wp-block {
		max-width: 800px;
	}
}

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