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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment