Merge pull request #3556 from Automattic/fix/bcb-button-hover

Blank Canvas Blocks: Remove hover states for buttons with custom background colors

blank-canvas-blocks/assets/ponyfill.css

@@ -232,19 +232,24 @@ input[type=checkbox] + label {
 	text-decoration: none;
 }
 
-.wp-block-button.wp-block-button__link:hover, .wp-block-button.wp-block-button__link:focus, .wp-block-button.wp-block-button__link.has-focus,
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus,
-.wp-block-button .wp-block-button__link.has-focus {
-	color: var(--wp--custom--button--color--hover-text);
-	background-color: var(--wp--custom--button--color--hover-background);
-	border-color: var(--wp--custom--button--color--hover-background);
-}
-
-.wp-block-button.wp-block-button__link:hover svg, .wp-block-button.wp-block-button__link:focus svg, .wp-block-button.wp-block-button__link.has-focus svg,
-.wp-block-button .wp-block-button__link:hover svg,
-.wp-block-button .wp-block-button__link:focus svg,
-.wp-block-button .wp-block-button__link.has-focus svg {
+.wp-block-button.wp-block-button__link:not(.has-background):active,
+.wp-block-button .wp-block-button__link:not(.has-background):active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-button.wp-block-button__link:not(.has-background):hover, .wp-block-button.wp-block-button__link:not(.has-background):focus, .wp-block-button.wp-block-button__link:not(.has-background).has-focus,
+.wp-block-button .wp-block-button__link:not(.has-background):hover,
+.wp-block-button .wp-block-button__link:not(.has-background):focus,
+.wp-block-button .wp-block-button__link:not(.has-background).has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
+.wp-block-button.wp-block-button__link:not(.has-background):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):focus svg, .wp-block-button.wp-block-button__link:not(.has-background).has-focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):hover svg,
+.wp-block-button .wp-block-button__link:not(.has-background):focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background).has-focus svg {
 	fill: var(--wp--custom--button--color--hover-text);
 }
 
@@ -459,19 +464,24 @@ p.has-drop-cap:not(:focus):first-letter {
 	text-decoration: none;
 }
 
-.wp-block-button.wp-block-button__link:hover, .wp-block-button.wp-block-button__link:focus, .wp-block-button.wp-block-button__link.has-focus,
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus,
-.wp-block-button .wp-block-button__link.has-focus {
-	color: var(--wp--custom--button--color--hover-text);
-	background-color: var(--wp--custom--button--color--hover-background);
-	border-color: var(--wp--custom--button--color--hover-background);
+.wp-block-button.wp-block-button__link:not(.has-background):active,
+.wp-block-button .wp-block-button__link:not(.has-background):active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-button.wp-block-button__link:not(.has-background):hover, .wp-block-button.wp-block-button__link:not(.has-background):focus, .wp-block-button.wp-block-button__link:not(.has-background).has-focus,
+.wp-block-button .wp-block-button__link:not(.has-background):hover,
+.wp-block-button .wp-block-button__link:not(.has-background):focus,
+.wp-block-button .wp-block-button__link:not(.has-background).has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
 }
 
-.wp-block-button.wp-block-button__link:hover svg, .wp-block-button.wp-block-button__link:focus svg, .wp-block-button.wp-block-button__link.has-focus svg,
-.wp-block-button .wp-block-button__link:hover svg,
-.wp-block-button .wp-block-button__link:focus svg,
-.wp-block-button .wp-block-button__link.has-focus svg {
+.wp-block-button.wp-block-button__link:not(.has-background):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):focus svg, .wp-block-button.wp-block-button__link:not(.has-background).has-focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):hover svg,
+.wp-block-button .wp-block-button__link:not(.has-background):focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background).has-focus svg {
 	fill: var(--wp--custom--button--color--hover-text);
 }
 
@@ -513,19 +523,24 @@ p.has-drop-cap:not(:focus):first-letter {
 	fill: var(--wp--custom--button--color--text);
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-focus,
-.wp-block-search .wp-block-search__button:hover,
-.wp-block-search .wp-block-search__button:focus,
-.wp-block-search .wp-block-search__button.has-focus {
-	color: var(--wp--custom--button--color--hover-text);
-	background-color: var(--wp--custom--button--color--hover-background);
-	border-color: var(--wp--custom--button--color--hover-background);
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):active,
+.wp-block-search .wp-block-search__button:not(.has-background):active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-focus svg,
-.wp-block-search .wp-block-search__button:hover svg,
-.wp-block-search .wp-block-search__button:focus svg,
-.wp-block-search .wp-block-search__button.has-focus svg {
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background).has-focus,
+.wp-block-search .wp-block-search__button:not(.has-background):hover,
+.wp-block-search .wp-block-search__button:not(.has-background):focus,
+.wp-block-search .wp-block-search__button:not(.has-background).has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background).has-focus svg,
+.wp-block-search .wp-block-search__button:not(.has-background):hover svg,
+.wp-block-search .wp-block-search__button:not(.has-background):focus svg,
+.wp-block-search .wp-block-search__button:not(.has-background).has-focus svg {
 	fill: var(--wp--custom--button--color--hover-text);
 }
 
@@ -554,19 +569,24 @@ p.has-drop-cap:not(:focus):first-letter {
 	text-decoration: none;
 }
 
-.wp-block-button.wp-block-button__link:hover, .wp-block-button.wp-block-button__link:focus, .wp-block-button.wp-block-button__link.has-focus,
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus,
-.wp-block-button .wp-block-button__link.has-focus {
-	color: var(--wp--custom--button--color--hover-text);
-	background-color: var(--wp--custom--button--color--hover-background);
-	border-color: var(--wp--custom--button--color--hover-background);
+.wp-block-button.wp-block-button__link:not(.has-background):active,
+.wp-block-button .wp-block-button__link:not(.has-background):active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-button.wp-block-button__link:not(.has-background):hover, .wp-block-button.wp-block-button__link:not(.has-background):focus, .wp-block-button.wp-block-button__link:not(.has-background).has-focus,
+.wp-block-button .wp-block-button__link:not(.has-background):hover,
+.wp-block-button .wp-block-button__link:not(.has-background):focus,
+.wp-block-button .wp-block-button__link:not(.has-background).has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
 }
 
-.wp-block-button.wp-block-button__link:hover svg, .wp-block-button.wp-block-button__link:focus svg, .wp-block-button.wp-block-button__link.has-focus svg,
-.wp-block-button .wp-block-button__link:hover svg,
-.wp-block-button .wp-block-button__link:focus svg,
-.wp-block-button .wp-block-button__link.has-focus svg {
+.wp-block-button.wp-block-button__link:not(.has-background):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):focus svg, .wp-block-button.wp-block-button__link:not(.has-background).has-focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):hover svg,
+.wp-block-button .wp-block-button__link:not(.has-background):focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background).has-focus svg {
 	fill: var(--wp--custom--button--color--hover-text);
 }
 
@@ -592,13 +612,17 @@ p.has-drop-cap:not(:focus):first-letter {
 	fill: var(--wp--custom--button--color--text);
 }
 
-.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
-	color: var(--wp--custom--button--color--hover-text);
-	background-color: var(--wp--custom--button--color--hover-background);
-	border-color: var(--wp--custom--button--color--hover-background);
+.wp-block-file .wp-block-file__button:not(.has-background):active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-file .wp-block-file__button:not(.has-background):hover, .wp-block-file .wp-block-file__button:not(.has-background):focus, .wp-block-file .wp-block-file__button:not(.has-background).has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
 }
 
-.wp-block-file .wp-block-file__button:hover svg, .wp-block-file .wp-block-file__button:focus svg, .wp-block-file .wp-block-file__button.has-focus svg {
+.wp-block-file .wp-block-file__button:not(.has-background):hover svg, .wp-block-file .wp-block-file__button:not(.has-background):focus svg, .wp-block-file .wp-block-file__button:not(.has-background).has-focus svg {
 	fill: var(--wp--custom--button--color--hover-text);
 }
 

blank-canvas-blocks/sass/blocks/_button.scss

@@ -21,14 +21,20 @@
 
 // NOTE: These remain for the hover styling of blocks.  This can be removed when the button block has configurable hover states.
 @mixin button-hover-styles {
-	&:hover,
-	&:focus,
-	&.has-focus {
-		color: var(--wp--custom--button--color--hover-text);
-		background-color: var(--wp--custom--button--color--hover-background);
-		border-color: var(--wp--custom--button--color--hover-background);
-		svg {
-			fill: var(--wp--custom--button--color--hover-text);
+	&:not(.has-background) {
+		&:active {
+			color: var(--button--color-text-active);
+			background-color: var(--button--color-background-active);
+		}
+
+		&:hover,
+		&:focus,
+		&.has-focus {
+			color: var(--button--color-text-hover);
+			background-color: var(--button--color-background-hover);
+			svg {
+				fill: var(--wp--custom--button--color--hover-text);
+			}
 		}
 	}
 }