From e5a978a81dfeae564fadaacd0dbbf85419277ad6 Mon Sep 17 00:00:00 2001 From: desrosj Date: Fri, 14 Dec 2018 01:55:38 +0000 Subject: [PATCH] Twenty Twelve: Add styles and support for the new block-based editor. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This update adds styles and theme support related to the new block-based editor to enhance the experience of using it with Twenty Twelve. These are the specific changes made to this theme: - Add `blocks.css`, to style blocks on the front end, to make sure they match the theme’s existing HTML element styles. - Add `editor-blocks.css` to style blocks in the editor, to make sure they match the theme’s existing HTML element styles. - Add theme support for `editor-styles`, to pull the existing editor stylesheet into the new editor. - Add theme support for `wp-block-styles`, to load the default block styles on the front end. - Add theme support for `editor-color-palette`, to load a color palette based on the theme’s color scheme into the block-based editor. Props ianbelanger, crunnells, laurelfulford, davidakennedy. Merges [43795] to trunk. Fixes #45040. Built from https://develop.svn.wordpress.org/trunk@44140 git-svn-id: http://core.svn.wordpress.org/trunk@43970 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- css/blocks.css | 387 ++++++++++++++++++++++++++++++++++++++ css/editor-blocks.css | 424 ++++++++++++++++++++++++++++++++++++++++++ functions.php | 54 ++++++ 3 files changed, 865 insertions(+) create mode 100644 css/blocks.css create mode 100644 css/editor-blocks.css diff --git a/css/blocks.css b/css/blocks.css new file mode 100644 index 000000000..b3e3efb78 --- /dev/null +++ b/css/blocks.css @@ -0,0 +1,387 @@ +/* +Theme Name: Twenty Twelve +Description: Used to style Gutenberg Blocks. +*/ + +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +1.0 General Block Styles +2.0 Blocks - Common Blocks +3.0 Blocks - Formatting +4.0 Blocks - Layout Elements +5.0 Blocks - Widgets +6.0 Blocks - Colors +--------------------------------------------------------------*/ + +/*-------------------------------------------------------------- +1.0 General Block Styles +--------------------------------------------------------------*/ + +/* Captions */ + +[class^="wp-block-"] figcaption { + color: #757575; + font-size: 12px; + font-size: 0.857142857rem; + line-height: 2; + font-style: italic; + text-align: left; +} + +[class^="wp-block-"].alignleft, +[class^="wp-block-"] .alignleft { + margin-right: 24px; +} + +[class^="wp-block-"].alignright, +[class^="wp-block-"] .alignright { + margin-left: 24px; +} + +.rtl [class^="wp-block-"] figcaption { + text-align: right; +} + +/*-------------------------------------------------------------- +2.0 Blocks - Common Blocks +--------------------------------------------------------------*/ + +/* Paragraph */ + +p.has-drop-cap:not(:focus)::first-letter { + font-size: 5em; + margin-top: 0.1em; +} + +/* Image */ + +.wp-block-image figure:not(.aligncenter) { + line-height: 0; + margin: 0 1.714285714rem; +} + +.wp-block-image figure.alignleft { + margin: 0.857142857rem 1.714285714rem 0.857142857rem 0; +} + +.wp-block-image figure.alignright { + margin: 0.857142857rem 0 0.857142857rem 1.714285714rem; +} + +.wp-block-image figcaption { + padding-top: 0.75em; +} + +[class^="wp-block-"].alignleft, +[class^="wp-block-"] .alignleft, +[class^="wp-block-"].alignright, +[class^="wp-block-"] .alignright { + +} + +/* Gallery */ + +.wp-block-gallery { + margin-bottom: 24px; + margin-bottom: 1.714285714rem; +} + +.wp-block-gallery .blocks-gallery-image figcaption, +.wp-block-gallery .blocks-gallery-item figcaption { + left: 0; + right: 0; + text-align: center; + width: auto; +} + +/* Quote */ + +.wp-block-quote:not(.is-large):not(.is-style-large) { + border: 0; + padding: 1.714285714rem; + padding: 24px; +} + +.wp-block-quote { + padding: 1.714285714rem; + padding: 24px; +} + +.wp-block-quote cite { + color: inherit; + font-size: inherit; + font-style: italic; +} + +.wp-block-quote.is-large p, +.wp-block-quote.is-style-large p { + font-size: 20px; +} + +/* Audio */ + +.wp-block-audio audio { + display: block; + margin-bottom: 1.714285714rem; + width: 100%; +} + +/* Cover Image */ + +.wp-block-cover-image.aligncenter { + display: flex; +} + +/* File */ + +.wp-block-file .wp-block-file__button { + background-color: #e6e6e6; + background-repeat: repeat-x; + background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: linear-gradient(top, #f4f4f4, #e6e6e6); + border: 1px solid #d2d2d2; + border-radius: 3px; + box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1); + color: #7c7c7c; + font-family: inherit; + font-size: 11px; + font-size: 0.785714286rem; + font-weight: normal; + line-height: 1.428571429; + padding: 6px 10px; + padding: 0.428571429rem 0.714285714rem; +} + +.wp-block-file .wp-block-file__button:hover, +.wp-block-file .wp-block-file__button:focus { + background-color: #ebebeb; + background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb); + background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb); + background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb); + background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb); + background-image: linear-gradient(top, #f9f9f9, #ebebeb); + background-repeat: repeat-x; + color: #5e5e5e; +} + +.wp-block-file .wp-block-file__button:focus { + background-color: #e1e1e1; + background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1); + background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1); + background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1); + background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1); + background-image: linear-gradient(top, #ebebeb, #e1e1e1); + background-repeat: repeat-x; + border-color: transparent; + box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4; + color: #757575; +} + +.rtl .wp-block-file * + .wp-block-file__button { + margin-left: 0.75em; + margin-right: 0; +} + +/* Video */ + +.wp-block-video video:not(:last-child) { + margin-bottom: 0; +} + +/*-------------------------------------------------------------- +3.0 Blocks - Formatting +--------------------------------------------------------------*/ + +/* Code */ + +pre.wp-block-code { + border: 0; + padding: 0; +} + +/* Pullquote */ + +.wp-block-pullquote__citation, +.wp-block-pullquote cite, +.wp-block-pullquote footer { + font-size: 14px; + text-transform: none; +} + +/* Table */ + +.wp-block-table { + border-bottom: 1px solid #ededed; + border-collapse: collapse; + border-spacing: 0; + font-size: 14px; + line-height: 2; + margin: 0 0 20px; + width: 100%; +} + +.wp-block-table th { + border: 0; + font-weight: bold; + padding: 6px 10px 6px 0; + text-transform: uppercase; +} + +.wp-block-table td { + border: 0; + border-top: 1px solid #ededed; + padding: 6px 10px 6px 0; +} + +/*-------------------------------------------------------------- +4.0 Blocks - Layout Elements +--------------------------------------------------------------*/ + +/* Buttons */ + +.wp-block-button .wp-block-button__link, +.wp-block-button .wp-block-button__link:visited { + background-color: #e6e6e6; + background-repeat: repeat-x; + background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: linear-gradient(top, #f4f4f4, #e6e6e6); + border: 1px solid #d2d2d2; + border-radius: 3px; + box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1); + color: #7c7c7c; + font-family: inherit; + font-size: 11px; + font-size: 0.785714286rem; + font-weight: normal; + line-height: 1.428571429; + padding: 6px 10px; + padding: 0.428571429rem 0.714285714rem; +} + +.wp-block-button .wp-block-button__link:hover, +.wp-block-button .wp-block-button__link:focus { + background-color: #ebebeb; + background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb); + background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb); + background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb); + background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb); + background-image: linear-gradient(top, #f9f9f9, #ebebeb); + background-repeat: repeat-x; + color: #5e5e5e; +} + +.wp-block-button .wp-block-button__link:active { + background-color: #e1e1e1; + background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1); + background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1); + background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1); + background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1); + background-image: linear-gradient(top, #ebebeb, #e1e1e1); + background-repeat: repeat-x; + border-color: transparent; + box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4; + color: #757575; +} + +/* Separator */ + +.wp-block-separator { + border: 0; +} + +/*-------------------------------------------------------------- +5.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/* Latest Comments */ + +.wp-block-latest-comments { + margin: 0; + padding: 0; +} + +.wp-block-latest-comments .avatar, +.wp-block-latest-comments__comment-avatar { + border-radius: 0; + box-shadow: none; +} + +.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt, +.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta { + margin-left: 60px; +} + +.wp-block-latest-comments__comment, +.wp-block-latest-comments__comment-excerpt, +.wp-block-latest-comments__comment-excerpt p { + font-size: 14px; +} + +.wp-block-latest-comments__comment-excerpt p:last-child { + margin-bottom: 0; +} + +.wp-block-latest-comments__comment-date { + color: #5e5e5e; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment { + margin: 0; + padding: 24px 0; + padding: 1.714285714rem 0 0; +} + +.wp-block-latest-comments article { + margin-bottom: 0; +} + +/*-------------------------------------------------------------- +6.0 Blocks - Colors +--------------------------------------------------------------*/ + +.has-blue-color { + color: #21759b; +} + +.has-blue-background-color { + background-color: #21759b; +} + +.has-dark-gray-color { + color: #373737; +} + +.has-dark-gray-background-color { + background-color: #373737; +} + +.has-medium-gray-color { + color: #9f9f9f; +} + +.has-medium-gray-background-color { + background-color: #9f9f9f; +} + +.has-light-gray-color { + color: #e6e6e6; +} + +.has-light-gray-background-color { + background-color: #e6e6e6; +} + +.has-white-color { + color: #fff; +} + +.has-white-background-color { + background-color: #fff; +} diff --git a/css/editor-blocks.css b/css/editor-blocks.css new file mode 100644 index 000000000..fc3cf223f --- /dev/null +++ b/css/editor-blocks.css @@ -0,0 +1,424 @@ +/* +Theme Name: Twenty Twelve +Description: Used to style Gutenberg Blocks in the editor. +*/ + +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +1.0 General Typography +2.0 General Block Styles +3.0 Blocks - Common Blocks +4.0 Blocks - Formatting +5.0 Blocks - Layout Elements +6.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/*-------------------------------------------------------------- +1.0 General Typography +--------------------------------------------------------------*/ + +.edit-post-visual-editor .editor-block-list__block, +.edit-post-visual-editor .editor-block-list__block p, +.editor-default-block-appender input[type="text"].editor-default-block-appender__content { + font-size: 14px; +} + +.edit-post-visual-editor .editor-block-list__block { + color: #444; +} + +.editor-post-title__block .editor-post-title__input { + font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-size: 20px; + font-weight: 400; +} + +@media screen and (min-width: 600px) { + .editor-post-title__block .editor-post-title__input { + font-size: 22px; + } +} + +.wp-block-freeform.block-library-rich-text__tinymce h1 { + font-size: 21px; +} + +.wp-block-freeform.block-library-rich-text__tinymce h2 { + font-size: 18px; +} + +.wp-block-freeform.block-library-rich-text__tinymce h3 { + font-size: 16px; +} + +.wp-block-freeform.block-library-rich-text__tinymce h4 { + font-size: 14px; +} + +.wp-block-freeform.block-library-rich-text__tinymce h5 { + font-size: 13px; +} + +.wp-block-freeform.block-library-rich-text__tinymce h6 { + font-size: 12px; +} + +/*-------------------------------------------------------------- +2.0 General Block Styles +--------------------------------------------------------------*/ + +/* Main column width */ + +body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block, +body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender, +body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block { + max-width: 655px; +} + +/* Link styles */ + +.edit-post-visual-editor a, +.editor-block-list__block a, +.wp-block-freeform.block-library-rich-text__tinymce a { + color: #21759b; +} + +/* List styles */ + +.wp-block-freeform.block-library-rich-text__tinymce ol, +.wp-block-freeform.block-library-rich-text__tinymce ul:not(.wp-block-gallery), +.block-library-list ol.editor-rich-text__tinymce, +.block-library-list ul.editor-rich-text__tinymce:not(.wp-block-gallery) { + padding-left: 0; + padding-right: 0; +} + +/* Quote styles */ + +.wp-block-freeform.block-library-rich-text__tinymce blockquote { + border: 0; + font-style: italic; + padding: 24px; +} + +/* Table styles */ + +.wp-block-freeform.block-library-rich-text__tinymce th { + font-size: 11px; +} + +.wp-block-freeform.block-library-rich-text__tinymce td { + font-size: 12px; +} + +.wp-block-freeform.block-library-rich-text__tinymce th, +.wp-block-freeform.block-library-rich-text__tinymce td { + padding-left: 0; + padding-right: 0; +} + +.rtl .wp-block-freeform.block-library-rich-text__tinymce th, +.rtl .wp-block-freeform.block-library-rich-text__tinymce td { + text-align: right; +} + +/* Code styles */ + +.wp-block-freeform.block-library-rich-text__tinymce code { + background-color: transparent; + font-size: 12px; +} + +/* Pre styles */ + +.wp-block-freeform.block-library-rich-text__tinymce pre { + font-size: 12px; +} + +/* Captions */ + +[class^="wp-block-"] figcaption, +[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body { + color: #757575; + font-size: 12px; + line-height: 2; + font-style: italic; + text-align: left; +} + +.rtl [class^="wp-block-"] figcaption, +.rtl [class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body { + text-align: right; +} + +/* Definition Lists */ + +.wp-block-freeform.block-library-rich-text__tinymce dt { + margin-bottom: 0; +} + +/*-------------------------------------------------------------- +3.0 Blocks - Common Blocks +--------------------------------------------------------------*/ + +/* Paragraph */ + +p.has-drop-cap:not(:focus)::first-letter { + font-size: 5em; + margin-top: 0.1em; +} + +/* Image */ + +.wp-block-image { + margin-left: 0; + margin-right: 0; +} + +/* Gallery */ + +.wp-block-gallery { + margin-bottom: 24px; +} + +.wp-block-gallery figcaption, +.wp-block-gallery figcaption.editor-rich-text__tinymce.mce-content-body { + color: #fff; + text-align: center; +} + +/* Quote */ + +.wp-block-quote, +.wp-block-quote:not(.is-large):not(.is-style-large) { + padding: 24px; +} + +.wp-block-quote p { + font-style: italic; +} + +.wp-block-quote:not(.is-large):not(.is-style-large) { + border: 0; +} + +.wp-block-quote.is-large p, +.wp-block-quote.is-style-large p { + font-size: 20px; +} + +.wp-block-quote .wp-block-quote__citation { + color: inherit; + font-style: italic; +} + +.wp-block-quote.is-large .wp-block-quote__citation, +.wp-block-quote.is-style-large .wp-block-quote__citation { + font-size: 18px; +} + +/* Cover Image */ + +.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p { + font-size: 28px; +} + +/* File */ + +.wp-block-file .wp-block-file__textlink { + color: #21759b; + text-decoration: underline; +} + +.wp-block-file .wp-block-file__button, +.wp-block-button .wp-block-button__link:hover { + background-color: #e6e6e6; + background-repeat: repeat-x; + background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: linear-gradient(top, #f4f4f4, #e6e6e6); + border: 1px solid #d2d2d2; + border-radius: 3px; + box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1); + color: #7c7c7c; + font-family: inherit; + font-size: 11px; + font-weight: normal; + line-height: 1.428571429; + padding: 6px 10px; +} + +/*-------------------------------------------------------------- +4.0 Blocks - Formatting +--------------------------------------------------------------*/ + +/* Verse */ + +.editor-block-list__block .wp-block-verse pre { + font-size: 12px; +} + +/* Code */ + +.wp-block-code { + border: 0; + font-size: 12px; + line-height: 2; + padding: 0; +} + +.wp-block-html .CodeMirror-sizer { + line-height: 1.7; +} + +/* Preformatted */ + +.editor-block-list__block .wp-block-preformatted pre { + font-size: 12px; +} + +/* Pullquote */ + +.wp-block-pullquote { + font-style: italic; +} + +.edit-post-visual-editor .wp-block-pullquote { + margin: 0; +} + +.wp-block-pullquote .wp-block-pullquote__citation, +.wp-block-pullquote cite { + font-size: 14px; + text-transform: none; +} + +/* Table */ + +.wp-block-table { + border-bottom: 1px solid #ededed; + border-collapse: collapse; + border-spacing: 0; + font-size: 14px; + line-height: 2; + margin: 0 0 20px; + width: 100%; +} + +.editor-block-list__block .wp-block-table th { + border: 0; + font-size: 11px; + font-weight: bold; + text-transform: uppercase; +} + +.editor-block-list__block .wp-block-table td { + border: 0; + border-top: 1px solid #ededed; + font-size: 12px; + padding: 0; +} + +.wp-block-table__cell-content { + padding: 6px 10px 6px 0; +} + +/*-------------------------------------------------------------- +5.0 Blocks - Layout Elements +--------------------------------------------------------------*/ + +/* Buttons */ + +.wp-block-button .wp-block-button__link, +.wp-block-button .wp-block-button__link:hover { + background-color: #e6e6e6; + background-repeat: repeat-x; + background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6); + background-image: linear-gradient(top, #f4f4f4, #e6e6e6); + border: 1px solid #d2d2d2; + border-radius: 3px; + box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1); + color: #7c7c7c; + font-family: inherit; + font-size: 11px; + font-weight: normal; + line-height: 1.428571429; + padding: 6px 10px; +} + +/* Separator */ + +.editor-block-list__block hr.wp-block-separator { + margin-left: auto; + margin-right: auto; +} + +/*-------------------------------------------------------------- +6.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/* Archives */ +.gutenberg ul.wp-block-archives { + padding-left: 0; +} + +/* Categories */ + +.gutenberg .wp-block-categories ul { + padding-left: 0; +} + +/* Latest Comments */ + +.editor-block-list__block .wp-block-latest-comments { + margin: 0; + padding: 0; +} + +.wp-block-latest-comments .avatar, +.wp-block-latest-comments__comment-avatar { + border-radius: 0; + box-shadow: none; +} + +.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt, +.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta { + margin-left: 60px; +} + +.wp-block-latest-comments__comment, +.wp-block-latest-comments__comment-excerpt, +.wp-block-latest-comments__comment-excerpt p { + font-size: 14px; +} + +.wp-block-latest-comments__comment-excerpt p:last-child { + margin-bottom: 0; +} + +.wp-block-latest-comments__comment-date { + color: #5e5e5e; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment { + margin: 0; + padding: 24px 0; +} + +.wp-block-latest-comments article { + border-bottom: 4px double #ededed; + padding-bottom: 2em; +} + +/* Latest Posts */ + +.gutenberg .wp-block-latest-posts { + padding-left: 0; + padding-right: 0; +} diff --git a/functions.php b/functions.php index 10744c569..62d3a9a74 100644 --- a/functions.php +++ b/functions.php @@ -55,6 +55,44 @@ function twentytwelve_setup() { // This theme styles the visual editor with editor-style.css to match the theme style. add_editor_style(); + // Load regular editor styles into the new block-based editor. + add_theme_support( 'editor-styles' ); + + // Load default block styles. + add_theme_support( 'wp-block-styles' ); + + // Add support for custom color scheme. + add_theme_support( + 'editor-color-palette', + array( + array( + 'name' => __( 'Blue', 'twentytwelve' ), + 'slug' => 'blue', + 'color' => '#21759b', + ), + array( + 'name' => __( 'Dark Gray', 'twentytwelve' ), + 'slug' => 'dark-gray', + 'color' => '#444', + ), + array( + 'name' => __( 'Medium Gray', 'twentytwelve' ), + 'slug' => 'medium-gray', + 'color' => '#9f9f9f', + ), + array( + 'name' => __( 'Light Gray', 'twentytwelve' ), + 'slug' => 'light-gray', + 'color' => '#e6e6e6', + ), + array( + 'name' => __( 'White', 'twentytwelve' ), + 'slug' => 'white', + 'color' => '#fff', + ), + ) + ); + // Adds RSS feed links to for posts and comments. add_theme_support( 'automatic-feed-links' ); @@ -158,12 +196,28 @@ function twentytwelve_scripts_styles() { // Loads our main stylesheet. wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() ); + // Theme block stylesheet. + wp_enqueue_style( 'twentytwelve-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentytwelve-style' ), '20181018' ); + // Loads the Internet Explorer specific stylesheet. wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '20121010' ); $wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' ); } add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' ); +/** + * Enqueue editor styles for Gutenberg + * + * @since Twenty Twelve 2.6 + */ +function twentytwelve_block_editor_styles() { + // Block styles. + wp_enqueue_style( 'twentytwelve-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' ); + // Add custom fonts. + wp_enqueue_style( 'twentytwelve-fonts', twentytwelve_get_font_url(), array(), null ); +} +add_action( 'enqueue_block_editor_assets', 'twentytwelve_block_editor_styles' ); + /** * Add preconnect for Google Fonts. *