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 <maggie.cabrera@automattic.com>
Co-authored-by: Sarah Norris <sarah@sekai.co.uk>

blockbase/assets/ponyfill.css

@@ -622,28 +622,6 @@ div.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
   padding: var(--wp--custom--form--padding);
   border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 }
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
-.wp-block-search .wp-block-search__button {
-  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));
-  font-weight: var(--wp--custom--button--typography--font-weight);
-  font-family: inherit;
-  font-size: var(--wp--custom--button--typography--font-size);
-  line-height: var(--wp--custom--button--typography--line-height);
-  text-decoration: none;
-  opacity: 1;
-  color: var(--wp--custom--button--color--text);
-  background-color: var(--wp--custom--button--color--background);
-  border-color: currentColor;
-  border-radius: var(--wp--custom--button--border--radius);
-}
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button svg,
-.wp-block-search .wp-block-search__button svg {
-  fill: var(--wp--custom--button--color--text);
-}
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus,
 .wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):hover,
 .wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):focus,
@@ -654,7 +632,7 @@ div.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
   opacity: 1;
   color: var(--wp--custom--button--color--text);
   background-color: var(--wp--custom--button--color--background);
-  border-color: currentColor;
+  border-color: currentcolor;
   border-color: var(--wp--custom--button--border--color);
 }
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg,
@@ -672,7 +650,7 @@ div.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
   opacity: 0.66;
 }
 .wp-block-search.is-style-small-search {
-  --wp--custom--button--typography--font-size: calc( 0.8 * var(--wp--preset--font-size--small));
+  --wp--custom--button--typography--font-size: calc(0.8 * var(--wp--preset--font-size--small));
 }
 .wp-block-search.is-style-small-search .wp-block-search__input {
   padding: calc(0.5 * var(--wp--custom--form--padding));
@@ -697,26 +675,8 @@ p.wp-block-site-tagline {
 }
 
 .wp-block-file .wp-block-file__button {
-  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));
-  font-weight: var(--wp--custom--button--typography--font-weight);
-  font-family: inherit;
-  font-size: var(--wp--custom--button--typography--font-size);
-  line-height: var(--wp--custom--button--typography--line-height);
-  text-decoration: none;
-  opacity: 1;
-  color: var(--wp--custom--button--color--text);
-  background-color: var(--wp--custom--button--color--background);
-  border-color: currentColor;
-  border-radius: var(--wp--custom--button--border--radius);
   display: inline-block;
 }
-.wp-block-file .wp-block-file__button svg {
-  fill: var(--wp--custom--button--color--text);
-}
 .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus {
   --wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
   --wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
@@ -724,7 +684,7 @@ p.wp-block-site-tagline {
   opacity: 1;
   color: var(--wp--custom--button--color--text);
   background-color: var(--wp--custom--button--color--background);
-  border-color: currentColor;
+  border-color: currentcolor;
   border-color: var(--wp--custom--button--border--color);
 }
 .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus svg {

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

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,6 +55,7 @@
 @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 {
@@ -59,6 +63,7 @@
 			--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);

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;
 }

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,14 +22,16 @@
 
 	&.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;
@@ -35,10 +39,11 @@
 	}
 
 	/* 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));
 		}
 	}
 }

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

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": {