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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |