From 402132fda8341ea631e6d9e4169e303a7e3047d3 Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Thu, 29 Aug 2024 18:34:01 +0200
Subject: [PATCH 1/4] Add button styles to `theme.json`, include style
 variation.

---
 theme.json | 69 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 60 insertions(+), 9 deletions(-)

diff --git a/theme.json b/theme.json
index 7f84aae5..5cfef2e0 100644
--- a/theme.json
+++ b/theme.json
@@ -931,6 +931,35 @@
 			"lineHeight": "1.4"
 		},
 		"blocks": {
+			"core/button": {
+				"typography": {
+					"fontSize": "var:preset|font-size|small"
+				},
+				"spacing": {
+					"padding": {
+						"bottom": "1rem",
+						"left": "2.25rem",
+						"right": "2.25rem",
+						"top": "1rem"
+					}
+				},
+				"variations": {
+					"outline": {
+						"border": {
+							"color": "var:preset|color|contrast",
+							"width": "1px"
+						},
+						"spacing": {
+							"padding": {
+								"bottom": "1rem",
+								"left": "2.25rem",
+								"right": "2.25rem",
+								"top": "1rem"
+							}
+						}
+					}
+				}
+			},
 			"core/code": {
 				"typography": {
 					"fontFamily": "var:preset|font-family|fira-code",
@@ -1111,20 +1140,42 @@
 		},
 		"elements": {
 			"button": {
-				"typography": {
-					"fontSize": "var:preset|font-size|small"
-				},
 				"color": {
 					"background": "var:preset|color|contrast",
 					"text": "var:preset|color|base"
 				},
-				"spacing": {
-					"padding": {
-						"bottom": "1rem",
-						"left": "2.25rem",
-						"right": "2.25rem",
-						"top": "1rem"
+				":active": {
+					"color": {
+						"background": "var:preset|color|accent-1",
+						"text": "var:preset|color|contrast"
+					}
+				},
+				":focus": {
+					"color": {
+						"background": "var:preset|color|accent-1",
+						"text": "var:preset|color|contrast"
+					},
+					"outline": {
+						"color": "var:preset|color|primary",
+						"offset": "2px",
+						"style": "dotted",
+						"width": "1px"
 					}
+				},
+				":hover": {
+					"color": {
+						"background": "var:preset|color|accent-1",
+						"text": "var:preset|color|contrast"
+					},
+					"border": {
+						"color": "var:preset|color|accent-1"
+					}
+				},
+				"border": {
+					"color": "var:preset|color|contrast",
+					"radius": "100px",
+					"width": "1px",
+					"style": "solid"
 				}
 			},
 			"caption": {

From 84475a31682d6e3ae327f32070b8953c150c9192 Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Thu, 29 Aug 2024 18:34:47 +0200
Subject: [PATCH 2/4] Add outline styles.

---
 assets/css/button-outline.css |  6 ++++++
 functions.php                 | 25 +++++++++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 assets/css/button-outline.css

diff --git a/assets/css/button-outline.css b/assets/css/button-outline.css
new file mode 100644
index 00000000..fdb0fd71
--- /dev/null
+++ b/assets/css/button-outline.css
@@ -0,0 +1,6 @@
+.wp-block-button.is-style-outline
+	> .wp-block-button__link:not(.has-text-color, .has-background):hover {
+	background-color: var(--wp--preset--color--contrast, transparent);
+	color: var(--wp--preset--color--base);
+	border-color: var(--wp--preset--color--contrast, currentColor);
+}
diff --git a/functions.php b/functions.php
index 93982676..1bff96d8 100644
--- a/functions.php
+++ b/functions.php
@@ -35,3 +35,28 @@ function twentytwentyfive_enqueue_styles() {
 	);
 }
 add_action( 'wp_enqueue_scripts', 'twentytwentyfive_enqueue_styles' );
+
+/**
+ * Enqueue custom block stylesheets
+ *
+ * @since Twenty Twenty-Five 1.0
+ * @return void
+ */
+function twentytwentyfive_block_stylesheets() {
+	/**
+	 * The wp_enqueue_block_style() function allows us to enqueue a stylesheet
+	 * for a specific block. These will only get loaded when the block is rendered
+	 * (both in the editor and on the front end), improving performance
+	 * and reducing the amount of data requested by visitors.
+	 */
+	wp_enqueue_block_style(
+		'core/button',
+		array(
+			'handle' => 'twentytwentyfour-button-style-outline',
+			'src'    => get_parent_theme_file_uri( 'assets/css/button-outline.css' ),
+			'ver'    => wp_get_theme( get_template() )->get( 'Version' ),
+			'path'   => get_parent_theme_file_path( 'assets/css/button-outline.css' ),
+		)
+	);
+}
+add_action( 'init', 'twentytwentyfive_block_stylesheets' );

From b076a327c75763fbed8e3f0fadd2dfb8945489ab Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Thu, 29 Aug 2024 18:39:25 +0200
Subject: [PATCH 3/4] Update theme ref.

---
 functions.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/functions.php b/functions.php
index 1bff96d8..2eecc30f 100644
--- a/functions.php
+++ b/functions.php
@@ -52,7 +52,7 @@ function twentytwentyfive_block_stylesheets() {
 	wp_enqueue_block_style(
 		'core/button',
 		array(
-			'handle' => 'twentytwentyfour-button-style-outline',
+			'handle' => 'twentytwentyfive-button-style-outline',
 			'src'    => get_parent_theme_file_uri( 'assets/css/button-outline.css' ),
 			'ver'    => wp_get_theme( get_template() )->get( 'Version' ),
 			'path'   => get_parent_theme_file_path( 'assets/css/button-outline.css' ),

From 779e9730c67c926423278825972b6bcd362286f4 Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Tue, 3 Sep 2024 16:54:33 +0200
Subject: [PATCH 4/4] Adjust `font-size`

---
 theme.json | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/theme.json b/theme.json
index 9416cafe..2ce980c4 100644
--- a/theme.json
+++ b/theme.json
@@ -943,7 +943,7 @@
 			},
 			"core/button": {
 				"typography": {
-					"fontSize": "var:preset|font-size|small"
+					"fontSize": "var:preset|font-size|medium"
 				},
 				"spacing": {
 					"padding": {
@@ -1248,9 +1248,6 @@
 		},
 		"elements": {
 			"button": {
-				"typography": {
-					"fontSize": "var:preset|font-size|medium"
-				},
 				"color": {
 					"background": "var:preset|color|contrast",
 					"text": "var:preset|color|base"