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

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
+1.0 General Block Styles
-2.0 Blocks - Formatting
+2.0 Blocks - Common Blocks
-3.0 Blocks - Layout Elements
+3.0 Blocks - Formatting
-4.0 Blocks - Widgets
+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,
+.entry-content .wp-block-button__link {
-.wp-block-button .wp-block-button__link:focus {
+	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;
+}

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 {

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.