Add button hover styles

functions.php

@@ -13,13 +13,10 @@ function twentytwentytwo_support() {
 	 * Enqueue scripts and styles.
 	 */
 	function twentytwentytwo_styles() {
-		// Register theme stylesheet.
-		wp_register_style( 'twentytwentytwo-style', '' );
+		// Register theme stylesheet
+		wp_enqueue_style( 'twentytwentytwo-style', get_stylesheet_uri() );
 		// Add styles inline.
 		wp_add_inline_style( 'twentytwentytwo-style', twentytwentytwo_get_font_face_styles() );
-		// Enqueue theme stylesheet.
-		wp_style_add_data( 'twentytwentytwo-style', 'path', get_template_directory() . '/style.css' );
-		wp_enqueue_style( 'twentytwentytwo-style' );
 	}
 	add_action( 'wp_enqueue_scripts', 'twentytwentytwo_styles' );
 endif;
@@ -29,7 +26,9 @@ function twentytwentytwo_styles() {
 	 * Enqueue editor styles.
 	 */
 	function twentytwentytwo_editor_styles() {
-		wp_add_inline_style( 'wp-block-library', twentytwentytwo_get_font_face_styles() );
+		// Register theme stylesheet
+		wp_enqueue_style( 'twentytwentytwo-style', get_stylesheet_uri() );
+		wp_add_inline_style( 'twentytwentytwo-style', twentytwentytwo_get_font_face_styles() );
 	}
 	add_action( 'admin_init', 'twentytwentytwo_editor_styles' );
 endif;

style.css

@@ -16,3 +16,33 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
 Twenty Twenty-Two WordPress Theme, (C) 2021 WordPress.org
 Twenty Twenty-Two is distributed under the terms of the GNU GPL.
 */
+
+/**
+ * Button Block Hover Styles
+ */
+
+/* Give borders to buttons whose colors have not been customized. */
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color),
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color),
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color) {
+	border-color: var(--wp--custom--button--border--color);
+	border-width: var(--wp--custom--button--border--width);
+	border-style: var(--wp--custom--button--border--style);
+}
+
+/* Make button whose colors have been customized match the default button dimensions. */
+.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background, 
+.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color { 
+	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));
+}
+
+/* Change the colors on hover & focus */
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
+	color: var(--wp--custom--button--hover--color--text);
+	background-color: var(--wp--custom--button--hover--color--background);
+}

theme.json

@@ -105,6 +105,34 @@
 			]
 		},
 		"custom": {
+			"button": {
+				"border": {
+					"color": "var(--wp--preset--color--primary)",
+					"style": "solid",
+					"width": "2px"
+				},
+				"color": {
+					"background": "var(--wp--preset--color--background)",
+					"text": "var(--wp--preset--color--background)"
+				},
+				"hover": {
+					"color": {
+						"text": "var(--wp--preset--color--primary)",
+						"background": "var(--wp--preset--color--background)"
+					},
+					"border": {
+						"color": "var(--wp--preset--color--primary)"
+					}
+				},
+				"spacing": {
+					"padding": {
+						"top": "0.667em",
+						"bottom": "0.667em",
+						"left": "1.333em",
+						"right": "1.333em"
+					}
+				}
+			},
 			"spacing": {
 				"small": "max(1.25rem, 5vw)",
 				"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
@@ -193,6 +221,14 @@
 					"background": "var(--wp--preset--color--primary)",
 					"text": "var(--wp--preset--color--background)"
 				},
+				"spacing": {
+					"padding": {
+						"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)"
+					}
+				},
 				"typography": {
 					"fontSize": "var(--wp--preset--typography--font-size--normal)"
 				}