vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-13 05:10:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Twenty Seventeen: Improve selectors for block editor custom colors.

Browse Source 
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
This commit is contained in:
laurelfulford
2019-01-05 21:15:43 +00:00
parent 537faa7178
commit 899e5163fa
2 changed files with 177 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-content/themes/twentyseventeen/assets/css/blocks.css
+164 -8
View File
@@ -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;
}
src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css
+13 -2
View File
@@ -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 {