Blockbase: update button styles

blockbase/functions.php

@@ -23,7 +23,7 @@ function blockbase_support() {
 		// Enqueue editor styles.
 		add_editor_style(
 			array(
-				'/assets/ponyfill.css',
+				'/assets/ponyfill.css'
 			)
 		);
 

blockbase/sass/_style.scss

@@ -0,0 +1,51 @@
+/*
+ * This is a refactored style sheet
+ * Currently it is being loaded within ponyfill
+ * As ponyfill gets refactored, add the necessary styles here.
+ */
+
+/*
+ * Button hover styles.
+ * Necessary until the following issue is resolved in Gutenberg:
+ * https://github.com/WordPress/gutenberg/issues/27075
+ */
+
+ :is(
+	.wp-block-search__button,
+	.wp-block-button__link
+):is(
+	:hover,
+	:active,
+	:focus
+) {
+  text-decoration: none;
+	cursor: pointer;
+  color: var(--wp--custom--button--hover--color--text);
+  background-color: var(--wp--custom--button--hover--color--background);
+  border-color: var(--wp--custom--button--hover--border--color);
+}
+
+:is(
+	.wp-block-search__button,
+	.wp-block-button__link
+):focus {
+	outline: 1.5px dotted var(--wp--preset--color--foreground);
+	outline-offset: 3px;
+}
+
+:is(
+  .is-style-outline.wp-block-button,
+  .is-style-outline.wp-block-button__link
+) {
+  color: var(--wp--custom--button--outline--color--text, var(--wp--custom--button--border--color) );
+}
+
+:is(
+  .is-style-outline>.wp-block-button__link,
+  .is-style-outline.wp-block-button__link
+):not(.has-background):hover {
+  color: var(--wp--custom--button--outline--hover--color--text, var(--wp--custom--button--color--text));
+  background-color: var(--wp--custom--button--outline--hover--color--background, var(--wp--custom--button--color--background));
+}
+
+

blockbase/sass/blocks/_button.scss

@@ -1,42 +1 @@
-@import "button-mixins";
-
-/**
- * Button
- */
-
-/**
- * Block Options
- */
-.wp-block-button,
-.wp-block-button__link {
-
-	&.wp-block-button__link,
-	.wp-block-button__link {
-
-		@include button-hover-styles;
-		text-decoration: none;
-	}
-
-	&.is-style-outline {
-
-		&.wp-block-button__link,
-		.wp-block-button__link {
-			--wp--custom--button--color--text: var(--wp--custom--button--border--color);
-			--wp--custom--button--color--background: transparent;
-
-			@include button-border-styles;
-			@include button-hover-styles;
-			@include button-color-styles;
-		}
-	}
-}
-
-// TODO: I'm not sure what the end goal should be here, but since we are unable to use
-// a button block OUTSIDE of the context of the button collection block (grrrrrrrrr)
-// then there are undesired margins to be dealt with somehow.
-.wp-block-buttons {
-
-	.wp-block-button:last-child {
-		margin-bottom: 0;
-	}
-}
+// Leaving the file to avoid import issues

blockbase/sass/blocks/_buttons-outline-style.scss

@@ -1,35 +1,15 @@
-@import 'button-mixins';
-.wp-block-button {
-	&.wp-block-button__link,
-	.wp-block-button__link {
-	   	&:not(.has-background):not(.has-text-color) {
-		   @include button-outline-hover-styles;
-	   	}
-   	}
-}
+@import "button-mixins";
+
 .wp-block-file .wp-block-file__button {
-   @include button-outline-hover-styles;
-}	
 
-.wp-block-search {
-   	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
-   	.wp-block-search__button {
-	   @include button-outline-hover-styles;
-   	}
+	@include button-outline-hover-styles;
 }
 
-//NOTE: Double-classed to raise specificity above parent theme's outline hover styles
-//as an alternative to !important.  Only needed for the editor.
-.wp-block-button.wp-block-button.is-style-outline {
-	&.wp-block-button__link,
-	.wp-block-button__link {
-	   &:not(.has-background):not(.has-text-color) {
-		   &:hover,
-		   &:focus,
-		   &.has-focus {
-			   color: var(--wp--custom--button--color--background);
-			   background-color: var(--wp--custom--button--color--text);
-		   	}
-	   	}
-   	}
+.wp-block-search {
+
+	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
+	.wp-block-search__button {
+
+		@include button-outline-hover-styles;
+	}
 }

blockbase/sass/ponyfill.scss

@@ -29,3 +29,5 @@
 @import "blocks/table";
 @import "blocks/video";
 @import "post/meta";
+
+@import "style";

blockbase/theme.json

@@ -128,6 +128,24 @@
 					"fontSize": "var(--wp--custom--font-sizes--normal)",
 					"fontWeight": "normal",
 					"lineHeight": 2
+				},
+				"outline":{
+					"color": {
+						"text": "var(--wp--custom--color--primary)",
+						"background": "var(--wp--custom--color--background)"
+					},
+					"border": {
+						"color": "var(--wp--custom--color--primary)"
+					},
+					"hover": {
+						"color": {
+							"text": "var(--wp--custom--color--background)",
+							"background": "var(--wp--custom--color--secondary)"
+						},
+						"border": {
+							"color": "var(--wp--custom--color--primary)"
+						}
+					}
 				}
 			},
 			"color": {
@@ -402,7 +420,9 @@
 			"core/button": {
 				"border": {
 					"radius": "var(--wp--custom--button--border--radius)",
-					"width": "0"
+					"color": "var(--wp--custom--button--border--color)",
+					"style": "solid",
+					"width": "var(--wp--custom--button--border--width)"
 				},
 				"color": {
 					"background": "var(--wp--custom--button--color--background)",
@@ -416,10 +436,10 @@
 				},
 				"spacing": {
 					"padding": {
-						"top": "calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width) )",
-						"bottom": "calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width) )",
-						"left": "calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width) )",
-						"right": "calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width) )"
+						"top": "var(--wp--custom--button--spacing--padding--top)",
+						"bottom": "var(--wp--custom--button--spacing--padding--bottom)",
+						"left": "var(--wp--custom--button--spacing--padding--left)",
+						"right": "var(--wp--custom--button--spacing--padding--right)"
 					}
 				}
 			},