Changeset 44306

Timestamp:

12/18/2018 10:50:33 PM (6 years ago)

Author:

desrosj

Message:

Bundled Themes: Fix button block custom colors on front end.

Simplify some of the button block’s CSS selectors in the theme, to make sure the default colors don’t override the custom colors on the front end.

This fix is applied to Twenty Sixteen, Twenty Fifteen and Twenty Fourteen.

Props laurelfulford.

Merges [44197-44198] and [44200] into trunk.

Fixes #45428, #45429.

Location:

trunk

Files:

• . (modified) (1 prop)
• src/wp-content/themes/twentyfifteen/css/blocks.css (modified) (2 diffs)
• src/wp-content/themes/twentyfourteen/css/blocks.css (modified) (2 diffs)
• src/wp-content/themes/twentysixteen/css/blocks.css (modified) (3 diffs)

trunk/src/wp-content/themes/twentyfifteen/css/blocks.css

@@ -385 +385 @@
 
 .wp-block-button .wp-block-button__link {
-    background-color: #333;
     border: 0;
     border-radius: 0;
-    color: #fff;
     cursor: pointer;
     font-family: "Noto Sans", sans-serif;
@@ -400 +398 @@
 }
 
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus {
+.wp-block-button__link {
+    background-color: #333;
+    color: #fff;
+}
+
+.wp-block-button__link:hover,
+.wp-block-button__link:focus {
     background-color: #707070;
     background-color: rgba(51, 51, 51, 0.7);
-    outline: 0;
+    color: #fff;
 }
 

trunk/src/wp-content/themes/twentyfourteen/css/blocks.css

@@ -222 +222 @@
 
 .wp-block-button .wp-block-button__link {
-    background-color: #24890d;
     border: 0;
     border-radius: 2px;
-    color: #fff;
     font-size: 12px;
     font-weight: 700;
@@ -234 +232 @@
 }
 
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus {
+.wp-block-button__link {
+    background-color: #24890d;
+    color: #fff;
+}
+
+.wp-block-button__link:hover,
+.wp-block-button__link:focus {
     background-color: #41a62a;
-}
-
-.wp-block-button .wp-block-button__link:active {
+    color: #fff;
+}
+
+.wp-block-button__link:active {
     background-color: #55d737;
 }

trunk/src/wp-content/themes/twentysixteen/css/blocks.css

@@ -233 +233 @@
 
 .wp-block-button .wp-block-button__link {
-    background: #1a1a1a;
     border: 0;
     border-radius: 2px;
-    color: #fff;
     font-family: Montserrat, "Helvetica Neue", sans-serif;
     font-weight: 700;
@@ -245 +243 @@
 }
 
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus {
+.entry-content .wp-block-button__link {
+    background: #1a1a1a;
+    color: #fff;
+}
+
+.entry-content .wp-block-button__link:hover,
+.entry-content .wp-block-button__link:focus {
     background: #007acc;
+    color: #fff;
 }
 
@@ -323 +327 @@
 --------------------------------------------------------------*/
 
-.has-dark-gray-color {
+.entry-content .has-dark-gray-color {
     color: #1a1a1a;
 }
 
-.has-dark-gray-background-color {
+.entry-content .has-dark-gray-background-color {
     background-color: #1a1a1a;
 }
 
-.has-medium-gray-color {
+.entry-content .has-medium-gray-color {
     color: #686868;
 }
 
-.has-medium-gray-background-color {
+.entry-content .has-medium-gray-background-color {
     background-color: #686868;
 }
 
-.has-light-gray-color {
+.entry-content .has-light-gray-color {
     color: #e5e5e5;
 }
 
-.has-light-gray-background-color {
+.entry-content .has-light-gray-background-color {
     background-color: #e5e5e5;
 }
 
-.has-white-color {
+.entry-content .has-white-color {
     color: #fff;
 }
 
-.has-white-background-color {
+.entry-content .has-white-background-color {
     background-color: #fff;
 }
 
-.has-blue-gray-color {
+.entry-content .has-blue-gray-color {
     color: #4d545c;
 }
 
-.has-blue-gray-background-color {
+.entry-content .has-blue-gray-background-color {
     background-color: #4d545c;
 }
 
-.has-bright-blue-color {
+.entry-content .has-bright-blue-color {
     color: #007acc;
 }
 
-.has-bright-blue-background-color {
+.entry-content .has-bright-blue-background-color {
     background-color: #007acc;
 }
 
-.has-light-blue-color {
+.entry-content .has-light-blue-color {
     color: #9adffd;
 }
 
-.has-light-blue-background-color {
+.entry-content .has-light-blue-background-color {
     background-color: #9adffd;
 }
 
-.has-dark-brown-color {
+.entry-content .has-dark-brown-color {
     color: #402b30;
 }
 
-.has-dark-brown-background-color {
+.entry-content .has-dark-brown-background-color {
     background-color: #402b30;
 }
 
-.has-medium-brown-color {
+.entry-content .has-medium-brown-color {
     color: #774e24;
 }
 
-.has-medium-brown-background-color {
+.entry-content .has-medium-brown-background-color {
     background-color: #774e24;
 }
 
-.has-dark-red-color {
+.entry-content .has-dark-red-color {
     color: #640c1f;
 }
 
-.has-dark-red-background-color {
+.entry-content .has-dark-red-background-color {
     background-color: #640c1f;
 }
 
-.has-bright-red-color {
+.entry-content .has-bright-red-color {
     color: #ff675f;
 }
 
-.has-bright-red-background-color {
+.entry-content .has-bright-red-background-color {
     background-color: #ff675f;
 }
 
-.has-yellow-color {
+.entry-content .has-yellow-color {
     color: #ffef8e;
 }
 
-.has-yellow-background-color {
+.entry-content .has-yellow-background-color {
     background-color: #ffef8e;
 }