From 5e1e61252873644d60a5eca054f25f9787a4e02a Mon Sep 17 00:00:00 2001 From: desrosj Date: Fri, 14 Dec 2018 01:46:38 +0000 Subject: [PATCH] Twenty Ten: 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 Ten. 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 nielslange, crunnells, laurelfulford, davidakennedy. Merges [43793] to trunk. Fixes #45038. Built from https://develop.svn.wordpress.org/trunk@44137 git-svn-id: http://core.svn.wordpress.org/trunk@43967 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-content/themes/twentyten/blocks.css | 248 +++++++++++++++ wp-content/themes/twentyten/editor-blocks.css | 299 ++++++++++++++++++ wp-content/themes/twentyten/functions.php | 62 ++++ wp-includes/version.php | 2 +- 4 files changed, 610 insertions(+), 1 deletion(-) create mode 100644 wp-content/themes/twentyten/blocks.css create mode 100644 wp-content/themes/twentyten/editor-blocks.css diff --git a/wp-content/themes/twentyten/blocks.css b/wp-content/themes/twentyten/blocks.css new file mode 100644 index 0000000000..ff6d16ab04 --- /dev/null +++ b/wp-content/themes/twentyten/blocks.css @@ -0,0 +1,248 @@ +/* +Theme Name: Twenty Ten +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-"]:not(.wp-block-gallery) figcaption { + color: #777; + font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; +} + +/* Alignments */ + +[class^="wp-block-"].alignleft, +[class^="wp-block-"] .alignleft { + margin-right: 24px; +} + +[class^="wp-block-"].alignright, +[class^="wp-block-"] .alignright { + margin-left: 24px; +} + +/*-------------------------------------------------------------- +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 { + margin-bottom: 24px; +} + +.wp-block-image figcaption { + margin: -7px 0 20px;; + padding: 9px 9px 1.0em; + text-align: center; +} + +.wp-block-image.alignfull, +.wp-block-image.alignfull img { + margin: 0; +} + +/* Gallery */ + +.wp-block-gallery { + margin: 0 0 24px; +} + +.wp-block-gallery .blocks-gallery-image figcaption, +.wp-block-gallery .blocks-gallery-item figcaption { + font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; + left: 0; + right: 0; + width: auto; +} + +/* Quotes */ + +.wp-block-quote:not(.is-large):not(.is-style-large) { + border: none; + padding: 0 3em; +} + +.wp-block-quote cite { + color: inherit; + font-size: inherit; + font-weight: 600; +} + +/* Audio */ + +.wp-block-audio { + margin-left: 0; + margin-right: 0; +} + +.wp-block-audio audio { + display: block; + width: 100%; +} + +/* File */ + +.rtl .wp-block-file * + .wp-block-file__button { + margin: 0 0 0 0.75em; +} + +/*-------------------------------------------------------------- +3.0 Blocks - Formatting +--------------------------------------------------------------*/ + +/* Code */ + +.wp-block-code { + background-color: transparent; + border: 0; + padding: 0; +} + +/* Pullquote */ + +.wp-block-pullquote p { + font-size: 1.5em; +} + +.wp-block-pullquote__citation, +.wp-block-pullquote cite { + color: inherit; + font-size: inherit; + font-weight: 600; + text-transform: none; +} + +/* Table */ + +.wp-block-table td, +.wp-block-table th { + border: none; +} + +.wp-block-table td { + border-top: 1px solid #e7e7e7; +} + +.wp-block-table tr:nth-child(odd) td { + background: #f2f7fc; +} + +/*-------------------------------------------------------------- +4.0 Blocks - Layout Elements +--------------------------------------------------------------*/ + +/* Columns */ + +.wp-block-columns { + margin: 0 -0.5em; +} +.wp-block-column { + margin: 0 0.5em; +} + +/* Separator */ + +.wp-block-separator { + border: 0; +} + +/*-------------------------------------------------------------- +5.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/* Archives, Categories & Latest Posts */ + +.wp-block-archives.aligncenter, +.wp-block-categories.aligncenter, +.wp-block-latest-posts.aligncenter { + margin-left: 20px; + text-align: center; +} + +.rtl .wp-block-archives.aligncenter, +.rtl .wp-block-categories.aligncenter, +.rtl .wp-block-latest-posts.aligncenter { + margin-left: 0; + margin-right: 20px; +} + +/* Latest Comments */ + +.wp-block-latest-comments { + margin: 0 0 24px; +} + +/* Latest Posts */ + +.wp-block-latest-posts.is-grid { + margin-left: 0; + margin-right: 0; +} + +/*-------------------------------------------------------------- +6.0 Blocks - Colors +--------------------------------------------------------------*/ + +.has-blue-color { + color: #0066cc; +} + +.has-blue-background-color { + background-color: #0066cc; +} + +.has-black-color { + color: #000; +} + +.has-black-background-color { + background-color: #000; +} + +.has-medium-gray-color { + color: #666; +} + +.has-medium-gray-background-color { + background-color: #666; +} + +.has-light-gray-color { + color: #f1f1f1; +} + +.has-light-gray-background-color { + background-color: #f1f1f1; +} + +.has-white-color { + color: #fff; +} + +.has-white-background-color { + background-color: #fff; +} diff --git a/wp-content/themes/twentyten/editor-blocks.css b/wp-content/themes/twentyten/editor-blocks.css new file mode 100644 index 0000000000..c1fde50bb5 --- /dev/null +++ b/wp-content/themes/twentyten/editor-blocks.css @@ -0,0 +1,299 @@ +/* +Theme Name: Twenty Ten +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 - Widgets +--------------------------------------------------------------*/ + +/*-------------------------------------------------------------- +1.0 General Typography +--------------------------------------------------------------*/ + +.edit-post-visual-editor .editor-block-list__block .mce-content-body, +.wp-block-freeform.block-library-rich-text__tinymce p, +.wp-block-freeform.block-library-rich-text__tinymce li { + line-height: 1.5; +} + +.edit-post-visual-editor .editor-block-list__block { + color: #1a1a1a; +} + +.editor-post-title__block .editor-post-title__input { + color: #000; + font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; + font-size: 21px; + font-weight: bold; + line-height: 1.3em; +} + +.edit-post-visual-editor .editor-block-list__block h1 { + font-size: 32px; +} + +.edit-post-visual-editor .editor-block-list__block h2 { + font-size: 24px; +} + +.edit-post-visual-editor .editor-block-list__block h3 { + font-size: 19px; +} + +.edit-post-visual-editor .editor-block-list__block h4 { + font-size: 16px; +} + +.edit-post-visual-editor .editor-block-list__block h5 { + font-size: 13px; +} + +.edit-post-visual-editor .editor-block-list__block h6 { + font-size: 11px; +} + +/*-------------------------------------------------------------- +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: 670px; /* 640px + 30px for padding */ +} + +/* Link styles */ + +.edit-post-visual-editor a, +.editor-block-list__block a, +.wp-block-freeform.block-library-rich-text__tinymce a { + color: #0066cc; +} + +/* List styles */ + +.edit-post-visual-editor ul:not(.wp-block-gallery), +.editor-block-list__block ul:not(.wp-block-gallery), +.block-library-list ul, +.edit-post-visual-editor ol, +.editor-block-list__block ol, +.block-library-list ol.editor-rich-text__tinymce { + margin: 0 0 18px 1.5em; + padding: 0; +} + +.edit-post-visual-editor ul:not(.wp-block-gallery), +.editor-block-list__block ul:not(.wp-block-gallery), +.block-library-list ul { + list-style: square; +} + +.edit-post-visual-editor ol, +.editor-block-list__block ol, +.block-library-list ol { + list-style: decimal; + margin-left: 1.5em; +} + +.edit-post-visual-editor ul:not(.wp-block-gallery) li, +.editor-block-list__block ul:not(.wp-block-gallery) li, +.edit-post-visual-editor ol li, +.editor-block-list__block ol li, +.block-library-list li { + margin-bottom: 0; +} + +.edit-post-visual-editor ul:not(.wp-block-gallery) li > ul, +.editor-block-list__block ul:not(.wp-block-gallery) li > ul, +.block-library-list li > ul, +.edit-post-visual-editor li > ol, +.editor-block-list__block li > ol, +.block-library-list li > ol { + margin-bottom: 0; +} + +.rtl .edit-post-visual-editor ul:not(.wp-block-gallery), +.rtl .editor-block-list__block ul:not(.wp-block-gallery), +.rtl .block-library-list ul, +.rtl .edit-post-visual-editor ol, +.rtl .editor-block-list__block ol, +.rtl .block-library-list ol { + margin-left: 0; + margin-right: 1.25em; + padding: 0; +} + +/* Caption styles */ + +[class^="wp-block-"] figcaption { + color: #777; + font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; +} + +/* Code styles */ + +.wp-block-freeform.block-library-rich-text__tinymce code { + background: transparent; +} + +/* Quote styles */ + +.wp-block-freeform.block-library-rich-text__tinymce blockquote { + border: 0; + padding: 0 3em; +} + +/* Table styles */ + +.editor-block-list__block tr th, +.editor-block-list__block tr th a { + font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; +} + +/* Definition List styles */ + +.editor-block-list__block dd { + margin-left: 0; + margin-right: 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-bottom: 20px; +} + +.wp-block-image figcaption { + display: block; + margin: -7px 0 0; + padding: 9px 9px 1.0em; + text-align: center; +} + +/* Gallery */ + +.editor-block-list__block .wp-block-gallery { + margin: 0 0 24px; +} + +/* Quote */ + +.wp-block-quote { + border: 0; + padding: 0 3em; +} + +.wp-block-quote:not(.is-large):not(.is-style-large) { + border: 0; + padding: 0 3em; +} + +.wp-block-quote .wp-block-quote__citation { + font-size: 16px; + font-weight: 600; +} + +.wp-block-quote.is-large .wp-block-quote__citation, +.wp-block-quote.is-style-large .wp-block-quote__citation { + font-size: 18px; +} + +/* Cover Image */ + +.wp-block-cover-image-text { + font-size: 32px; +} + +/* File */ + +.wp-block-file .wp-block-file__textlink .editor-rich-text__tinymce { + color: #0066cc; + font-size: 16px; + text-decoration: underline; +} + +/*-------------------------------------------------------------- +4.0 Blocks - Formatting +--------------------------------------------------------------*/ + +/* Code */ + +.wp-block-code { + border: 0; + padding: 0; +} + +/* Pullquote */ + +.wp-block-pullquote blockquote > .editor-rich-text p { + font-size: 1.5em; +} + +.wp-block-pullquote .wp-block-pullquote__citation { + color: inherit; + font-size: inherit; + font-weight: 600; + text-transform: none; +} + +/* Table */ + +.wp-block-table tr:nth-child(odd) td { + background: #f2f7fc; +} + +.wp-block-table th .wp-block-table__cell-content { + color: #777; + font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; +} + +.editor-block-list__block .wp-block-table tr td { + padding-bottom: 0; + padding-top: 0; +} + +/*-------------------------------------------------------------- +5.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/* Latest Comments */ + +.editor-block-list__block .wp-block-latest-comments { + margin: 0 0 24px; +} + +.rtl .edit-post-visual-editor .wp-block-latest-comments { + margin-right: 0; +} + +/* Latest Posts */ + +.edit-post-visual-editor .editor-block-list__block .wp-block-latest-posts.is-grid { + list-style: none; + margin-left: 0; + margin-right: 0; +} + +.edit-post-visual-editor .wp-block-latest-posts.is-grid li { + margin-bottom: 1em; +} diff --git a/wp-content/themes/twentyten/functions.php b/wp-content/themes/twentyten/functions.php index 5b1a73807a..a67451b545 100644 --- a/wp-content/themes/twentyten/functions.php +++ b/wp-content/themes/twentyten/functions.php @@ -76,6 +76,44 @@ if ( ! function_exists( 'twentyten_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', 'twentyten' ), + 'slug' => 'blue', + 'color' => '#0066cc', + ), + array( + 'name' => __( 'Black', 'twentyten' ), + 'slug' => 'black', + 'color' => '#000', + ), + array( + 'name' => __( 'Medium Gray', 'twentyten' ), + 'slug' => 'medium-gray', + 'color' => '#666', + ), + array( + 'name' => __( 'Light Gray', 'twentyten' ), + 'slug' => 'light-gray', + 'color' => '#f1f1f1', + ), + array( + 'name' => __( 'White', 'twentyten' ), + 'slug' => 'white', + 'color' => '#fff', + ), + ) + ); + // Post Format support. You can also use the legacy "gallery" or "asides" (note the plural) categories. add_theme_support( 'post-formats', array( 'aside', 'gallery' ) ); @@ -655,3 +693,27 @@ function twentyten_widget_tag_cloud_args( $args ) { return $args; } add_filter( 'widget_tag_cloud_args', 'twentyten_widget_tag_cloud_args' ); + +/** + * Enqueue scripts and styles for front end. + * + * @since Twenty Ten 2.6 + */ +function twentyten_scripts_styles() { + // Theme block stylesheet. + wp_enqueue_style( 'twentyten-block-style', get_template_directory_uri() . '/blocks.css', array(), '20181018' ); +} +add_action( 'wp_enqueue_scripts', 'twentyten_scripts_styles' ); + +/** + * Enqueue editor styles for Gutenberg + * + * @since Twenty Ten 2.6 + */ +function twentyten_block_editor_styles() { + // Block styles. + wp_enqueue_style( 'twentyten-block-editor-style', get_template_directory_uri() . '/editor-blocks.css' ); +} +add_action( 'enqueue_block_editor_assets', 'twentyten_block_editor_styles' ); + + diff --git a/wp-includes/version.php b/wp-includes/version.php index 2889bc6514..56090f2a0f 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -13,7 +13,7 @@ * * @global string $wp_version */ -$wp_version = '5.1-alpha-44136'; +$wp_version = '5.1-alpha-44137'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.