Adding Custom Gutenberg editor styles in WordPress is a nice touch to any theme, as it allows authors to get a basic preview of their content before it gets published. It seems like a complicated task, but it’s actually pretty simple, once you get started.
The PHP
It begins with registering and enqueueing a CSS file in your theme.
<?php | |
/** | |
* Enqueue the Gutenberg editor stylesheet. | |
* | |
* Put this in your functions.php. | |
* | |
* @action enqueue_block_editor_assets | |
*/ | |
function jr3_enqueue_gutenberg() { | |
// Make sure you link this to your actual file. | |
wp_register_style( 'jr3-gutenberg', get_stylesheet_directory_uri() . '/css/editor.css' ); | |
wp_enqueue_style( 'jr3-gutenberg' ); | |
// This font is enqueued for the demo only. You probably won't need this. | |
wp_register_style( 'jr3-webfonts', 'https://fonts.googleapis.com/css?family=Montserrat' ); | |
wp_enqueue_style( 'jr3-webfonts' ); | |
} | |
add_action( 'enqueue_block_editor_assets', 'jr3_enqueue_gutenberg' ); |
The CSS
The CSS is a bit trickier because there are so many blocks and elements to cover. Here is an example that I’ve put together for this demo that can be a starting place for you.
/* Custom Editor Styles */ | |
/* | |
* With some edits, this can be used as a base for your Custom Editor Styles. | |
* Note that this is for demonstration purposes only, and some elements may not | |
* be covered here. | |
*/ | |
/* Approximate the theme width, except for full-width images. */ | |
.wp-block:not( '.editor-block-list__block["data=full"]' ) { | |
width: 95%; | |
max-width: 1000px; | |
} | |
/* Fonts */ | |
/* Note that Montserrat is enqueued in the PHP function that enqueues this file */ | |
.editor-writing-flow .wp-block textarea, | |
.editor-writing-flow .wp-block .wp-block-freeform, | |
.editor-rich-text p, | |
.editor-post-title__input, | |
.wp-block-quote__citation { | |
font-family: 'Montserrat', Arial, Helvetica, sans-serif; | |
} | |
/* TinyMCE Editor */ | |
.editor-styles-wrapper p, | |
.editor-rich-text p, | |
.editor-styles-wrapper blockquote { | |
font-size: 16px; | |
line-height: 22px !important; | |
} | |
.editor-writing-flow .wp-block a { | |
color: #00a2ad !important; | |
} | |
/* Headings */ | |
.editor-writing-flow .wp-block h1, | |
.editor-writing-flow .wp-block h3, | |
.editor-writing-flow .wp-block h3{ | |
font-weight: bold; | |
} | |
.editor-writing-flow .wp-block h1 { | |
font-size: 36px; | |
line-height: 1.5em; | |
} | |
.editor-writing-flow .wp-block h2 { | |
font-size: 25px; | |
line-height: 1.5em; | |
} | |
.editor-writing-flow .wp-block h3 { | |
font-size: 16px; | |
line-height: 1.5em; | |
} | |
/* The Post Title */ | |
.editor-post-title__block .editor-post-title__input { | |
color: #00a2ad; | |
text-align: center; | |
} | |
/* Blockquote styles */ | |
.wp-block blockquote { | |
font-style: italic; | |
color: #aaa; | |
margin-left: 20px; | |
border-left: 0; | |
padding-left: 0; | |
} | |
.wp-block blockquote .editor-rich-text { | |
padding-left: 3rem; | |
} | |
.wp-block blockquote:before { | |
color: #ccc; | |
content: '\201C' !important; | |
font-size: 4em; | |
position: absolute; | |
top: 10px; | |
} | |
.wp-block-quote:not(.is-large):not(.is-style-large) { | |
border-left: 0; | |
margin-left: 0; | |
padding-left: 0; | |
} |