From 0e773d035bb042104c12f0341a2336ed4b3aa32f Mon Sep 17 00:00:00 2001 From: Sergey Biryukov Date: Mon, 7 Jan 2019 15:56:47 +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. Props laurelfulford. Merges [44402] to the 5.0 branch. Fixes #45426. Built from https://develop.svn.wordpress.org/branches/5.0@44425 git-svn-id: http://core.svn.wordpress.org/branches/5.0@44255 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 d85a17483e..9e38246d5a 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,12 +189,10 @@ p.has-drop-cap:not(:focus)::first-letter { /* Buttons */ .wp-block-button .wp-block-button__link { - background-color: #222; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; - color: #fff; display: inline-block; font-size: 14px; font-size: 0.875rem; @@ -205,11 +205,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 */ @@ -295,3 +348,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 97e4d9a046..27af057b78 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,12 +711,10 @@ table.wp-block-table td:last-child { /* Buttons */ .wp-block-button .wp-block-button__link { - background-color: #222; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; - color: #fff; display: inline-block; font-size: 14px; font-size: 0.875rem; @@ -725,6 +727,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 6d916a5116..38d6d07229 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -4,7 +4,7 @@ * * @global string $wp_version */ -$wp_version = '5.0.3-alpha-44424'; +$wp_version = '5.0.3-alpha-44425'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.