Skip to content
Permalink
Browse files

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.

git-svn-id: https://develop.svn.wordpress.org/branches/5.0@44425 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information...
SergeyBiryukov committed Jan 7, 2019
1 parent 1574b76 commit 25bb41dd80cc9abadab8328f75096e43c029a0a9
@@ -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;
}
@@ -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 {

0 comments on commit 25bb41d

Please sign in to comment.
You can’t perform that action at this time.