From 1c4a23faad13c7d35de7c4d76c28a85a569cf237 Mon Sep 17 00:00:00 2001 From: laurelfulford Date: Sat, 5 Jan 2019 21:16:49 +0000 Subject: [PATCH] Twenty Seventeen: Improve selectors for block editor custom colors. Twenty Seventeen's original styles for the block editor custom colors had some issues: they weren't being applied to the button blocks due to lack of specificity, and when applied to paragraph blocks, there was no padding in the editor. This update makes sure the colors and related styles work as expected. Fixes #45426. Built from https://develop.svn.wordpress.org/trunk@44402 git-svn-id: http://core.svn.wordpress.org/trunk@44232 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../twentyseventeen/assets/css/blocks.css | 172 +++++++++++++++++- .../assets/css/editor-blocks.css | 15 +- wp-includes/version.php | 2 +- 3 files changed, 178 insertions(+), 11 deletions(-) diff --git a/wp-content/themes/twentyseventeen/assets/css/blocks.css b/wp-content/themes/twentyseventeen/assets/css/blocks.css index 26a11327a9..06ef5ca25a 100644 --- a/wp-content/themes/twentyseventeen/assets/css/blocks.css +++ b/wp-content/themes/twentyseventeen/assets/css/blocks.css @@ -6,10 +6,12 @@ Description: Used to style blocks. /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- -1.0 Blocks - Common Blocks -2.0 Blocks - Formatting -3.0 Blocks - Layout Elements -4.0 Blocks - Widgets +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 --------------------------------------------------------------*/ /*-------------------------------------------------------------- @@ -187,10 +189,8 @@ p.has-drop-cap:not(:focus)::first-letter { /* Buttons */ .wp-block-button .wp-block-button__link { - background-color: #222; -webkit-box-shadow: none; box-shadow: none; - color: #fff; display: inline-block; font-size: 14px; font-size: 0.875rem; @@ -203,11 +203,64 @@ p.has-drop-cap:not(:focus)::first-letter { white-space: nowrap; } -.wp-block-button .wp-block-button__link:hover, -.wp-block-button .wp-block-button__link:focus { +.entry-content .wp-block-button__link { + background-color: #222; + color: #fff; +} + +.entry-content .is-style-outline .wp-block-button__link:not(.has-background) { + background-color: transparent; +} + +.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) { + color: #222; +} + +.colors-dark .wp-block-button__link { + background-color: #fff; + color: #000; +} + +.entry-content .wp-block-button__link:hover, +.entry-content .wp-block-button__link:focus, +.entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover, +.entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus { background-color: #767676; -webkit-box-shadow: none; box-shadow: none; + color: #fff; +} + +.colors-dark .entry-content .wp-block-button__link:hover, +.colors-dark .entry-content .wp-block-button__link:focus, +.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover, +.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus { + background-color: #bbb; + color: #000; +} + +.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) { + color: #fff; +} + +.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):hover, +.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):focus { + color: #222; +} + +.colors-custom .entry-content .wp-block-button__link, +.colors-custom .entry-content .wp-block-button__link:hover, +.colors-custom .entry-content .wp-block-button__link:focus, +.colors-dark .entry-content .wp-block-button__link, +.colors-dark .entry-content .wp-block-button__link:hover, +.colors-dark .entry-content .wp-block-button__link:focus { + -webkit-box-shadow: none; + box-shadow: none; +} + +.colors-custom .entry-content .wp-block-button__link:hover, +.colors-custom .entry-content .wp-block-button__link:focus { + color: #fff; } /* Separator */ @@ -293,3 +346,106 @@ p.has-drop-cap:not(:focus)::first-letter { font-size: 14px; font-size: 0.875rem; } + +/*-------------------------------------------------------------- +6.0 Blocks - Colors +--------------------------------------------------------------*/ + +.entry-content .has-pale-pink-color { + color: #f78da7; +} + +.entry-content .has-pale-pink-background-color, +.wp-block-button.is-style-outline .has-pale-pink-background-color:link { + background-color: #f78da7; +} + +.entry-content .has-vivid-red-color { + color: #cf2e2e; +} + +.entry-content .has-vivid-red-background-color, +.wp-block-button.is-style-outline .has-vivid-red-background-color:link { + background-color: #cf2e2e; +} + +.entry-content .has-luminous-vivid-orange-color { + color: #ff6900; +} + +.entry-content .has-luminous-vivid-orange-background-color, +.wp-block-button.is-style-outline .has-luminous-vivid-orange-background-color:link { + background-color: #ff6900; +} + +.entry-content .has-luminous-vivid-amber-color { + color: #fcb900; +} + +.entry-content .has-luminous-vivid-amber-background-color, +.wp-block-button.is-style-outline .has-luminous-vivid-amber-background-color:link { + background-color: #fcb900; +} + +.entry-content .has-light-green-cyan-color { + color: #7bdcb5; +} + +.entry-content .has-light-green-cyan-background-color, +.wp-block-button.is-style-outline .has-light-green-cyan-background-color:link { + background-color: #7bdcb5; +} + +.entry-content .has-vivid-green-cyan-color { + color: #00d084; +} + +.entry-content .has-vivid-green-cyan-background-color, +.wp-block-button.is-style-outline .has-vivid-green-cyan-background-color:link { + background-color: #00d084; +} + +.entry-content .has-pale-cyan-blue-color { + color: #8ed1fc; +} + +.entry-content .has-pale-cyan-blue-background-color, +.wp-block-button.is-style-outline .has-pale-cyan-blue-background-color:link { + background-color: #8ed1fc; +} + +.entry-content .has-vivid-cyan-blue-color { + color: #0693e3; +} + +.entry-content .has-vivid-cyan-blue-background-color, +.wp-block-button.is-style-outline .has-vivid-cyan-blue-background-color:link { + background-color: #0693e3; +} + +.entry-content .has-very-light-gray-color { + color: #eee; +} + +.entry-content .has-very-light-gray-background-color, +.wp-block-button.is-style-outline .has-very-light-gray-background-color:link { + background-color: #eee; +} + +.entry-content .has-cyan-bluish-gray-color { + color: #abb8c3; +} + +.entry-content .has-cyan-bluish-gray-background-color, +.wp-block-button.is-style-outline .has-cyan-bluish-gray-background-color:link { + background-color: #abb8c3; +} + +.entry-content .has-very-dark-gray-color { + color: #313131; +} + +.entry-content .has-very-dark-gray-background-color, +.wp-block-button.is-style-outline .has-very-dark-gray-background-color:link { + background-color: #313131; +} diff --git a/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css b/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css index 849719009a..60170e8e0a 100644 --- a/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css +++ b/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css @@ -492,6 +492,10 @@ html[lang="th"] .edit-post-visual-editor * { margin-top: 0.075em; } +.wp-block-paragraph.has-background { + padding: 20px 30px; +} + /* Gallery */ .wp-block-gallery figcaption { @@ -707,10 +711,8 @@ table.wp-block-table td:last-child { /* Buttons */ .wp-block-button .wp-block-button__link { - background-color: #222; -webkit-box-shadow: none; box-shadow: none; - color: #fff; display: inline-block; font-size: 14px; font-size: 0.875rem; @@ -723,6 +725,15 @@ table.wp-block-table td:last-child { white-space: nowrap; } +.wp-block-button__link { + background-color: #222; + color: #fff; +} + +.is-style-outline .wp-block-button__link { + color: #222; +} + /* Media & Text */ .wp-block-media-text *:last-child { diff --git a/wp-includes/version.php b/wp-includes/version.php index f1e0296ee2..8b0adf2111 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -13,7 +13,7 @@ * * @global string $wp_version */ -$wp_version = '5.1-alpha-44399'; +$wp_version = '5.1-alpha-44402'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.