Archeo: Try using button as an element (#5849)

Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com>
Automattic · Jul 5, 2022 · 87f535a · 87f535a
1 parent bfef645
commit 87f535a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 23 deletions.
diff --git a/archeo/style.css b/archeo/style.css
@@ -73,29 +73,22 @@ a:active,
  * https://github.com/WordPress/gutenberg/issues/27075
  */
 
-.wp-block-search__button:hover,
 .wp-block-file .wp-block-file__button:hover,
 .wp-block-button__link:hover {
 	background-color: var(--wp--preset--color--primary);
 }
 
 /*
- * Search and File Block button styles.
- * Necessary until the following issues are resolved in Gutenberg:
- * https://github.com/WordPress/gutenberg/issues/36444
- * https://github.com/WordPress/gutenberg/issues/27760
+ * Outline block button needs a padding tweak so it's the same size of normal buttons
+ * https://github.com/WordPress/gutenberg/issues/27476
  */
-
-.wp-block-search__button,
-.wp-block-file .wp-block-file__button {
-	background-color: var(--wp--preset--color--foreground);
-	border-radius: 0;
-	border: none;
-	color: var(--wp--preset--color--background);
-	font-size: var(--wp--preset--typography--font-size--normal);
-	padding: calc(0.667em + 2px) calc(1.333em + 2px);
+.is-style-outline > :where(.wp-block-button__link), 
+:where(.wp-block-button__link).is-style-outline {
+	padding-top: 0.667em;
+	padding-bottom: 0.667em;
 }
 
+
 /*
  * Comment Form Fields
  */

diff --git a/archeo/theme.json b/archeo/theme.json
@@ -167,16 +167,7 @@
 	"styles": {
 		"blocks": {
 			"core/button": {
-				"border": {
-					"radius": "0"
-				},
-				"color": {
-					"background": "var(--wp--preset--color--foreground)",
-					"text": "var(--wp--preset--color--background)"
-				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--chivo)",
-					"fontSize": "var(--wp--preset--typography--font-size--normal)",
 					"textTransform": "uppercase"
 				}
 			},
@@ -294,6 +285,27 @@
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
+			},
+			"button": {
+				"border": {
+					"radius": "0"
+				},
+				"color": {
+					"background": "var(--wp--preset--color--foreground)",
+					"text": "var(--wp--preset--color--background)"
+				},
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--chivo)",
+					"fontSize": "var(--wp--preset--font-size--normal)"
+				},
+				"spacing": {
+					"padding": {
+						"top": "calc(0.667em + 2px)",
+						"bottom": "calc(0.667em + 2px)",
+						"left": "calc(1.333em + 2px)",
+						"right": "calc(1.333em + 2px)"
+					}
+				}
 			}
 		},
 		"spacing": {