cleanup buttons css (#6714)

* removed typography styles for buttons * removed typography styles for buttons * remove more styles * kept the mixins, but removed the includes * remove padding include from button styles * lint * Bump min version for Blockbase to 6.1 * rebuild ponyfill after rebase * Update theme.json schema version * Update file button hover status Co-authored-by: MaggieCabrera <[email protected]> Co-authored-by: Sarah Norris <[email protected]>
Automattic · Nov 17, 2022 · b6669ad · b6669ad
1 parent 8f67c62
commit b6669ad
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 61 deletions.
diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css
diff --git a/blockbase/readme.txt b/blockbase/readme.txt
@@ -1,7 +1,7 @@
 === Blockbase ===
 Contributors: Automattic
-Requires at least: 5.7
-Tested up to: 5.7.2
+Requires at least: 6.1
+Tested up to: 6.1
 Requires PHP: 5.6.2
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html

diff --git a/blockbase/sass/blocks/_button-mixins.scss b/blockbase/sass/blocks/_button-mixins.scss
@@ -1,6 +1,8 @@
 // NOTE: These remain for the styling of buttons that are NOT blocks and is used elsewhere.  This can be removed when those no longer exist.
 // See https://github.com/WordPress/gutenberg/issues/29167
+// We are keeping the mixin in case it's used by any child themes, but this isn't used by Blockbase any more
 @mixin button-main-styles {
+
 	@include button-padding-styles;
 	@include button-typography-styles;
 	@include button-color-styles;
@@ -11,7 +13,8 @@
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: currentColor;
+	border-color: currentcolor;
+
 	svg {
 		fill: var(--wp--custom--button--color--text);
 	}
@@ -21,10 +24,10 @@
 //standard and outline buttons are equal.
 @mixin button-padding-styles {
 	border-width: 0;
-	padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width) );
-	padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width) );
-	padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width) );
-	padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width) );
+	padding-top: calc(var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
+	padding-bottom: calc(var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
+	padding-left: calc(var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
+	padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
 }
 
 @mixin button-typography-styles {
@@ -52,13 +55,15 @@
 @mixin button-hover-styles {
 	//The following changes should ONLY be changed if the user has NOT set a custom color
 	&:not(.has-background):not(.has-text-color) {
+
 		&:hover,
 		&:focus,
 		&.has-focus {
 			//change the color variables to the hover equivalent
 			--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
 			--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
 			--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+
 			@include button-color-styles;
 			border-color: var(--wp--custom--button--border--color);
 		}
@@ -67,11 +72,12 @@
 
 //Mixins for the alternative outline style
 @mixin button-outline-hover-styles {
+
 	&:hover,
 	&:focus,
 	&.has-focus {
 		border-style: var(--wp--custom--button--border--style);
-		border-color: currentColor;
+		border-color: currentcolor;
 		border-width: var(--wp--custom--button--border--width);
 		padding-top: var(--wp--custom--button--spacing--padding--top);
 		padding-bottom: var(--wp--custom--button--spacing--padding--bottom);

diff --git a/blockbase/sass/blocks/_file.scss b/blockbase/sass/blocks/_file.scss
@@ -1,8 +1,8 @@
-@import 'button-mixins';
+@import "button-mixins";
 
 // TODO: Remove when https://github.com/WordPress/gutenberg/issues/27760 is fixed.
 .wp-block-file .wp-block-file__button {
-	@include button-main-styles;
+
 	@include button-hover-styles;
 	display: inline-block;
 }
diff --git a/blockbase/sass/blocks/_search.scss b/blockbase/sass/blocks/_search.scss
@@ -1,12 +1,14 @@
-@import 'button-mixins';
+@import "button-mixins";
 
 .wp-block-search {
 
 	&.wp-block-search__button-inside {
-		.wp-block-search__inside-wrapper{
+
+		.wp-block-search__inside-wrapper {
 			padding: var(--wp--custom--form--border--width);
 			border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 			border-radius: var(--wp--custom--form--border--radius);
+
 			.wp-block-search__input {
 				padding: 0 var(--wp--custom--form--padding);
 			}
@@ -20,25 +22,28 @@
 
 	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
 	.wp-block-search__button {
-		@include button-main-styles;
+
 		@include button-hover-styles;
+
 		&.has-icon {
 			line-height: 0;
 		}
 	}
 
 	.wp-block-search__input {
+
 		&::placeholder {
 			color: var(--wp--custom--form--color--text);
 			opacity: 0.66;
 		}
 	}
 
 	/* Block Styles */
-	&.is-style-small-search{
-		--wp--custom--button--typography--font-size: calc( 0.8 * var(--wp--preset--font-size--small));
+	&.is-style-small-search {
+		--wp--custom--button--typography--font-size: calc(0.8 * var(--wp--preset--font-size--small));
+
 		.wp-block-search__input {
-			padding: calc( 0.5 * var(--wp--custom--form--padding) );
+			padding: calc(0.5 * var(--wp--custom--form--padding));
 		}
 	}
 }
diff --git a/blockbase/style.css b/blockbase/style.css
@@ -4,8 +4,8 @@ Theme URI: https://wordpress.com/theme/blockbase
 Author: Automattic
 Author URI: https://automattic.com/
 Description: Blockbase is a simple theme that supports full-site editing. It comes with a set of minimal templates and design settings that can be manipulated through Global Styles. Use it to build something beautiful.
-Requires at least: 5.8
-Tested up to: 5.9
+Requires at least: 6.1
+Tested up to: 6.1
 Requires PHP: 5.7
 Version: 3.0.8
 License: GNU General Public License v2 or later

diff --git a/blockbase/theme.json b/blockbase/theme.json
@@ -640,6 +640,17 @@
 					"lineHeight": "var(--wp--custom--post-comment--typography--line-height)"
 				}
 			},
+			"core/file": {
+				"elements": {
+					"button": {
+						":hover": {
+							"typography": {
+								"textDecoration": "none"
+							}
+						}
+					}
+				}
+			},
 			"core/gallery": {
 				"spacing": {
 					"margin": {