Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Gutenberg Custom Editor Styles - CSS
/* 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,
.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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.