Merge pull request #157 from WordPress/try/add-button-styles

Try: Add buttons styles. Co-authored-by: juanfra <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: carolinan <[email protected]> Co-authored-by: beafialho <[email protected]>
WordPress · Sep 4, 2024 · c0311ec · c0311ec
2 parents a76109d + 324ace4
commit c0311ec
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 10 deletions.
diff --git a/assets/css/button-outline.css 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
@@ -37,7 +37,32 @@ function twentytwentyfive_enqueue_styles() {
 add_action( 'wp_enqueue_scripts', 'twentytwentyfive_enqueue_styles' );
 
 /**
- * Register custom block 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' => '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' ),
+		)
+	);
+}
+add_action( 'init', 'twentytwentyfive_block_stylesheets' );
+
+/**
+ * Register custom block styles.
  *
  * @since Twenty Twenty-Five 1.0
  * @return void

diff --git a/theme.json b/theme.json
@@ -941,6 +941,35 @@
 					"radius": "100px"
 				}
 			},
+			"core/button": {
+				"typography": {
+					"fontSize": "var:preset|font-size|medium"
+				},
+				"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",
@@ -1219,20 +1248,42 @@
 		},
 		"elements": {
 			"button": {
-				"typography": {
-					"fontSize": "var:preset|font-size|medium"
-				},
 				"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": {