Merge pull request #1925 from Automattic/fix/varya-button-styles

Varia: Fix button styles to work alongside Gutenberg 7.9
Automattic · Apr 17, 2020 · 57d3d21 · 57d3d21
2 parents 7357f9a + ea620dd
commit 57d3d21
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 94 deletions.
diff --git a/varia/sass/blocks/button/_editor.scss b/varia/sass/blocks/button/_editor.scss
@@ -1,42 +1,39 @@
-.wp-block-button {
-
-	/* Default Style */
-	.wp-block-button__link {
-		color: #{map-deep-get($config-button, "color", "text")};
-		font-weight: #{map-deep-get($config-button, "font", "weight")};
-		@include font-family( map-deep-get($config-button, "font", "family") );
-		font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
-		line-height: #{map-deep-get($config-button, "font", "line-height")};
-		background-color: #{map-deep-get($config-button, "color", "background")};
-		border-radius: #{map-deep-get($config-button, "border-radius")};
-		padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
+/* Default Style */
+.wp-block-button__link {
+	color: #{map-deep-get($config-button, "color", "text")};
+	font-weight: #{map-deep-get($config-button, "font", "weight")};
+	@include font-family( map-deep-get($config-button, "font", "family") );
+	font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
+	line-height: #{map-deep-get($config-button, "font", "line-height")};
+	background-color: #{map-deep-get($config-button, "color", "background")};
+	border-radius: #{map-deep-get($config-button, "border-radius")};
+	padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
 
-		&:hover,
-		&:focus,
-		&.has-focus {
-			color: #{map-deep-get($config-button, "color", "text-hover")};
-			background-color: #{map-deep-get($config-button, "color", "background-hover")};
-		}
+	&:hover,
+	&:focus,
+	&.has-focus {
+		color: #{map-deep-get($config-button, "color", "text-hover")};
+		background-color: #{map-deep-get($config-button, "color", "background-hover")};
 	}
 
 	/* Outline Style */
-	&.is-style-outline {
+	&.is-style-outline,
+	.is-style-outline & {
 
-		.wp-block-button__link {
-			color: #{map-deep-get($config-button, "color", "background")};
-			background: transparent;
-			border: 2px solid currentcolor;
+		color: #{map-deep-get($config-button, "color", "background")};
+		background: transparent;
+		border: 2px solid currentcolor;
 
-			&:hover,
-			&:focus,
-			&.has-focus {
-				color: #{map-deep-get($config-button, "color", "background-hover")};
-			}
+		&:hover,
+		&:focus,
+		&.has-focus {
+			color: #{map-deep-get($config-button, "color", "background-hover")};
 		}
 	}
 
 	/* Squared Style */
-	&.is-style-squared .wp-block-button__link {
+	&.is-style-squared,
+	.is-style-squared & {
 		border-radius: 0;
 	}
 }

diff --git a/varia/sass/blocks/button/_style.scss b/varia/sass/blocks/button/_style.scss
@@ -16,28 +16,38 @@ input[type="submit"],
 .wp-block-button {
 
 	// Outline Style
-	&.is-style-outline {
+	&.is-style-outline,
+	&.is-style-outline .wp-block-button__link {
 
-		.wp-block-button__link {
+		color: #{map-deep-get($config-button, "color", "background")};
+		background: transparent;
+		border: #{map-deep-get($config-button, "border-width")} solid currentcolor;
+		padding: #{map-deep-get($config-button, "padding", "vertical") - map-deep-get($config-button, "border-width")} #{map-deep-get($config-button, "padding", "horizontal")};
+
+		&:active {
 			color: #{map-deep-get($config-button, "color", "background")};
-			background: transparent;
-			border: #{map-deep-get($config-button, "border-width")} solid currentcolor;
-			padding: #{map-deep-get($config-button, "padding", "vertical") - map-deep-get($config-button, "border-width")} #{map-deep-get($config-button, "padding", "horizontal")};
-
-			&:active {
-				color: #{map-deep-get($config-button, "color", "background")};
-			}
-
-			&:hover,
-			&:focus,
-			&.has-focus {
-				color: #{map-deep-get($config-button, "color", "background-hover")};
-			}
+		}
+
+		&:hover,
+		&:focus,
+		&.has-focus {
+			color: #{map-deep-get($config-button, "color", "background-hover")};
 		}
 	}
 
 	// Squared Style
+	&.is-style-squared,
 	&.is-style-squared .wp-block-button__link {
 		border-radius: 0;
 	}
+
+	// Set alignleft as default floating behavior
+	.entry-content > &:not(.alignleft):not(.alignright) {
+		@extend %responsive-alignleft;
+	}
+
+	// Set aligndefault as center floating behavior
+	.entry-content > &.aligncenter {
+		@extend %responsive-aligndefault;
+	}
 }
diff --git a/varia/sass/blocks/utilities/_style.scss b/varia/sass/blocks/utilities/_style.scss
@@ -55,7 +55,8 @@
 /**
  * .aligndefault
  */
-.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
+.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
+.entry-content > *:not(.wp-block-button),
 .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
 	@extend %responsive-aligndefault;
 }

diff --git a/varia/style-editor.css b/varia/style-editor.css
@@ -528,13 +528,8 @@ object {
 	color: currentColor;
 }
 
-.wp-block-button {
-	/* Default Style */
-	/* Outline Style */
-	/* Squared Style */
-}
-
-.wp-block-button .wp-block-button__link {
+/* Default Style */
+.wp-block-button__link {
 	color: white;
 	font-weight: bold;
 	font-family: sans-serif;
@@ -544,24 +539,31 @@ object {
 	background-color: blue;
 	border-radius: 9px;
 	padding: 16px 16px;
+	/* Outline Style */
+	/* Squared Style */
 }
 
-.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__link:hover, .wp-block-button__link:focus, .wp-block-button__link.has-focus {
 	color: white;
 	background-color: indigo;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link {
+.wp-block-button__link.is-style-outline,
+.is-style-outline .wp-block-button__link {
 	color: blue;
 	background: transparent;
 	border: 2px solid currentcolor;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
+.wp-block-button__link.is-style-outline:hover, .wp-block-button__link.is-style-outline:focus, .wp-block-button__link.is-style-outline.has-focus,
+.is-style-outline .wp-block-button__link:hover,
+.is-style-outline .wp-block-button__link:focus,
+.is-style-outline .wp-block-button__link.has-focus {
 	color: indigo;
 }
 
-.wp-block-button.is-style-squared .wp-block-button__link {
+.wp-block-button__link.is-style-squared,
+.is-style-squared .wp-block-button__link {
 	border-radius: 0;
 }
 

diff --git a/varia/style-rtl.css b/varia/style-rtl.css
@@ -1432,17 +1432,27 @@ button[data-load-more-btn], .button {
 /**
  * Block Options
  */
+.wp-block-button.is-style-outline,
 .wp-block-button.is-style-outline .wp-block-button__link {
 	color: blue;
 	background: transparent;
 	border: 2px solid currentcolor;
 	padding: 14px 16px;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
+.wp-block-button.is-style-outline:active,
+.wp-block-button.is-style-outline .wp-block-button__link:active {
+	color: blue;
+}
+
+.wp-block-button.is-style-outline:hover, .wp-block-button.is-style-outline:focus, .wp-block-button.is-style-outline.has-focus,
+.wp-block-button.is-style-outline .wp-block-button__link:hover,
+.wp-block-button.is-style-outline .wp-block-button__link:focus,
+.wp-block-button.is-style-outline .wp-block-button__link.has-focus {
 	color: indigo;
 }
 
+.wp-block-button.is-style-squared,
 .wp-block-button.is-style-squared .wp-block-button__link {
 	border-radius: 0;
 }
@@ -3581,61 +3591,67 @@ img#wpstats {
  * Page Layout Styles & Repsonsive Styles
  */
 /* Responsive width-content overrides */
-.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 .wp-block-pullquote.alignfull > p,
 .wp-block-pullquote.alignwide blockquote,
-.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
+.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
+.entry-content > *:not(.wp-block-button),
 .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 	max-width: 100%;
 	margin-right: auto;
 	margin-left: auto;
 }
 
 @media only screen and (min-width: 560px) {
-	.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
-	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
+	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
+	.entry-content > *:not(.wp-block-button),
 	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 560px - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
-	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
+	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
+	.entry-content > *:not(.wp-block-button),
 	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 640px - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
-	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
+	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
+	.entry-content > *:not(.wp-block-button),
 	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
-	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
+	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
+	.entry-content > *:not(.wp-block-button),
 	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
-	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment),
+	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
+	.entry-content > *:not(.wp-block-button),
 	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
@@ -3773,36 +3789,36 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignleft {
+.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 	margin-left: 16px;
 }
 
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignleft {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		margin-left: calc( 0.5 * (100vw - calc( 560px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.entry-content > .alignleft {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		margin-left: calc( 0.5 * (100vw - calc( 640px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.entry-content > .alignleft {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.entry-content > .alignleft {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.entry-content > .alignleft {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }