Curator: Implement support for Button elements in theme.json (#6166)

* implement support for Button elements in theme.json

* Changed the theme.json to reflect design and returned button block styles configuration

* fix color and decoration for buttons and links

* Remove padding from default buttons.

Co-authored-by: Jason Crist <jcrist@pbking.com>
Co-authored-by: Jeff Ong <jonger4@gmail.com>

curator/style.css

@@ -30,13 +30,10 @@ body {
  * https://github.com/WordPress/gutenberg/issues/27075
  */
 
-.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
-	padding: 0;
-}
 .wp-block-button__link:visited {
 	color: currentColor;
 }
-.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
+.wp-block-button:not(.is-style-outline, .form-submit) .wp-block-button__link:hover {
 	text-decoration: underline;
 	color: var(--wp--preset--color--primary);
 }
@@ -62,15 +59,6 @@ body {
 	outline: 1px dotted var(--wp--preset--color--primary);
 }
 
-.wp-block-search__button.wp-block-search__button,
-.wp-block-file .wp-block-file__button.wp-block-file__button {
-	background-color: var(--wp--preset--color--primary);
-	color: var(--wp--preset--color--background);
-	font-family: var(--wp--preset--font-family--heading-font);
-	font-size: var(--wp--custom--button--typography--font-size);
-	font-weight: 900;
-}
-
 :is(
 	.wp-block-search__button,
 	.wp-block-file .wp-block-file__button
@@ -79,8 +67,8 @@ body {
 	:focus
 ) {
 	background-color: var(--wp--preset--color--foreground);
+	text-decoration: none;
 }
-
 :is(
 	.wp-block-search__button,
 	.wp-block-file .wp-block-file__button
@@ -91,6 +79,11 @@ body {
 	outline: 1px dotted var(--wp--preset--color--foreground);
 }
 
+.wp-block-post-comments-form .wp-block-button__link:hover {
+	color: var(--wp--preset--color--primary);
+	text-decoration: underline;
+}
+
 /*
  * Search and File Block button styles.
  * Necessary until the following issues are resolved in Gutenberg:
@@ -98,14 +91,7 @@ body {
  * https://github.com/WordPress/gutenberg/issues/27760
  */
 
-.wp-block-search__button,
-.wp-block-file .wp-block-file__button {
-	background-color: var(--wp--preset--color--foreground);
-	border-radius: 0;
-	color: var(--wp--preset--color--background);
-	font-size: var(--wp--preset--typography--font-size--normal);
-	padding: calc(0.667em + 2px) calc(1.333em + 2px);
-}
+
 
 /*
  * Search input styles
@@ -120,10 +106,6 @@ body {
  * Link Styles
  */
 
-a:not(
-	.wp-block-search__button,
-	.wp-block-button__link
-),
 .wp-block-site-title a {
 	padding: .4rem 0;
 	text-decoration: inherit; /* Needed so the link styles will be inherited correctly from theme.json */
@@ -147,12 +129,6 @@ a:not(
 	text-decoration-style: dotted;
 }
 
-a:not(
-	.wp-block-search__button,
-	.wp-block-button__link,
-	.wp-block-navigation-link__content,
-	.wp-block-navigation-item__content
-):active,
 .wp-block-site-title a:active {
 	text-decoration: none;
 	background-color: var(--wp--preset--color--tertiary);

curator/theme.json

@@ -65,11 +65,6 @@
 			"gap": {
 				"horizontal": "min(20px, 4vw)",
 				"vertical": "min(24px, 4vw)"
-			},
-			"button": {
-				"typography": {
-					"fontSize": "1.375rem"
-				}
 			}
 		},
 		"layout": {
@@ -94,8 +89,8 @@
 			"fontFamilies": [
 				{
 					"fontFamily": "Petrona, serif",
-					"name": "Body (System Font)",
-					"slug": "body-font",
+					"name": "Petrona",
+					"slug": "petrona",
 					"fontFace": [
 						{
 							"fontDisplay": "block",
@@ -121,8 +116,8 @@
 				},
 				{
 					"fontFamily": "'Work Sans', sans-serif",
-					"name": "Headings (System Font)",
-					"slug": "heading-font",
+					"name": "Work Sans",
+					"slug": "work-sans",
 					"fontFace": [
 						{
 							"fontDisplay": "regular",
@@ -199,15 +194,19 @@
 					"radius": "0"
 				},
 				"color": {
-					"background": "transparent",
+					"background": "var(--wp--preset--color--background)",
 					"text": "var(--wp--preset--color--foreground)"
 				},
+				"spacing": {
+					"padding": "0"
+				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--heading-font)",
-					"fontSize": "var(--wp--custom--button--typography--font-size)",
+					"fontFamily": "var(--wp--preset--font-family--work-sans)",
+					"fontSize": "1.375rem",
 					"fontWeight": "900",
 					"lineHeight": "1"
 				}
+
 			},
 			"core/code": {
 				"border": {
@@ -302,7 +301,7 @@
 					"text": "var(--wp--preset--color--foreground)"
 				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--heading-font)",
+					"fontFamily": "var(--wp--preset--font-family--work-sans)",
 					"letterSpacing": "-0.02em",
 					"lineHeight": "1.125",
 					"textDecoration": "none"
@@ -322,7 +321,7 @@
 				"elements": {
 					"link": {
 						"typography": {
-							"fontFamily": "var(--wp--preset--font-family--heading-font)",
+							"fontFamily": "var(--wp--preset--font-family--work-sans)",
 							"fontSize": "1.375rem",
 							"fontWeight": "900",
 							"letterSpacing": "-0.44px",
@@ -337,7 +336,7 @@
 			},
 			"core/query-pagination": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--heading-font)",
+					"fontFamily": "var(--wp--preset--font-family--work-sans)",
 					"fontSize": "clamp(1.125rem, 4vw, 1.375rem)",
 					"fontWeight": "900",
 					"letterSpacing": "-0.02rem"
@@ -416,10 +415,6 @@
 							"margin": {
 								"left": "0"
 							}
-						},
-						"border": {
-							"color": "var(--wp--preset--color--primary)",
-							"width": "1px"
 						}
 					}
 				}
@@ -451,6 +446,30 @@
 						}
 					}
 				}
+			},
+			"core/file": {
+				"elements": {
+					"button": {
+						"border": {
+							"width": "0"
+						}
+					}
+				}
+			},
+			"core/post-comments-form": {
+				"elements": {
+					"button": {
+						"border": {
+							"width": 0
+						},
+						"spacing": {
+							"padding": {
+								"left": 0,
+								"right": 0
+							}
+						}
+					}
+				}
 			}
 		},
 		"color": {
@@ -458,9 +477,29 @@
 			"text": "var(--wp--preset--color--foreground)"
 		},
 		"elements": {
+			"button": {
+				"border": {
+					"color": "var(--wp--preset--color--primary)",
+					"width": "1px",
+					"radius": "0"
+				},
+				"color": {
+					"background": "var(--wp--preset--color--primary)",
+					"text": "var(--wp--preset--color--background)"
+				},
+				"spacing": {
+					"padding": "calc(0.667em + 2px) calc(1.333em + 2px)"
+				},
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--work-sans)",
+					"fontSize": "1.375rem",
+					"fontWeight": "900",
+					"lineHeight": "1"
+				}
+			},
 			"h1": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--heading-font)",
+					"fontFamily": "var(--wp--preset--font-family--work-sans)",
 					"fontWeight": "900",
 					"fontSize": "clamp(3.375rem, 10vw, 5.875rem)",
 					"letterSpacing": "-0.02em",
@@ -469,7 +508,7 @@
 			},
 			"h2": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--heading-font)",
+					"fontFamily": "var(--wp--preset--font-family--work-sans)",
 					"fontWeight": "900",
 					"fontSize": "clamp(2rem, 8.5vw, 2.75rem)",
 					"letterSpacing": "-0.02em",
@@ -478,7 +517,7 @@
 			},
 			"h3": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--body-font)",
+					"fontFamily": "var(--wp--preset--font-family--petrona)",
 					"fontWeight": "300",
 					"fontSize": "clamp(1.5rem, 6vw, 2rem)",
 					"lineHeight": "1.2"
@@ -486,7 +525,7 @@
 			},
 			"h4": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--body-font)",
+					"fontFamily": "var(--wp--preset--font-family--petrona)",
 					"fontWeight": "700",
 					"fontSize": "clamp(1.375rem, 5vw, 1.75rem)",
 					"lineHeight": "1.1"
@@ -494,7 +533,7 @@
 			},
 			"h5": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--heading-font)",
+					"fontFamily": "var(--wp--preset--font-family--work-sans)",
 					"fontWeight": "900",
 					"fontSize": "1.375rem",
 					"textTransform": "uppercase",
@@ -504,7 +543,7 @@
 			},
 			"h6": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--body-font)",
+					"fontFamily": "var(--wp--preset--font-family--petrona)",
 					"fontWeight": "700",
 					"fontSize": "var(--wp--preset--font-size--medium)",
 					"lineHeight": "1.3"
@@ -513,6 +552,9 @@
 			"link": {
 				"color": {
 					"text": "var(--wp--preset--color--primary)"
+				},
+				"typography": {
+					"textDecoration": "none"
 				}
 			}
 		},
@@ -520,7 +562,7 @@
 			"blockGap": "var(--wp--custom--gap--vertical)"
 		},
 		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--body-font)",
+			"fontFamily": "var(--wp--preset--font-family--petrona)",
 			"fontSize": "var(--wp--preset--font-size--medium)",
 			"lineHeight": "1.6"
 		}