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
2019-01-07 15:56:47 +00:00 · 2019-01-07 15:56:47 +00:00 · 0e773d035b
parent ec11149825
commit 0e773d035b
3 changed files with 178 additions and 11 deletions
--- 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;
+}
--- 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 {
--- 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.