Gutenberg Custom Editor Styles - CSS

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,
.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;
}