From 899e5163fa5879a94469fc906557c367e932b595 Mon Sep 17 00:00:00 2001 From: laurelfulford Date: Sat, 5 Jan 2019 21:15:43 +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. git-svn-id: https://develop.svn.wordpress.org/trunk@44402 602fd350-edb4-49c9-b593-d223f7449a82 --- .../twentyseventeen/assets/css/blocks.css | 172 +++++++++++++++++- .../assets/css/editor-blocks.css | 15 +- 2 files changed, 177 insertions(+), 10 deletions(-) diff --git a/src/wp-content/themes/twentyseventeen/assets/css/blocks.css b/src/wp-content/themes/twentyseventeen/assets/css/blocks.css index 26a11327a9..06ef5ca25a 100644 --- a/src/wp-content/themes/twentyseventeen/assets/css/blocks.css +++ b/src/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/src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css b/src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css index 849719009a..60170e8e0a 100644 --- a/src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css +++ b/src/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 {