Elements: Button - Fix element selectors (#41822)

* Add ui for button elements * prettier fixes * attempt to bring background color for button styling * set background color for button element * enables multiple color stack in the color indicator * use zstack for multiple color display, cleanup the UI for multiple color selection * Elements: Fix button element selectors * add missing files * lint fix * add comment Co-authored-by: Andrei Draganescu <[email protected]>
WordPress · Jun 22, 2022 · 58bb3b2 · 58bb3b2
1 parent e460b95
commit 58bb3b2
Show file tree

Hide file tree

Showing 19 changed files with 496 additions and 19 deletions.
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -107,7 +107,12 @@ protected static function get_blocks_metadata() {
 						break;
 					}
 
-					$element_selector[] = $selector . ' ' . $el_selector;
+					// This converts selectors like '.wp-element-button, .wp-block-button__link'
+					// to an array, so that the block selector is added to both parts of the selector.
+					$el_selectors = explode( ',', $el_selector );
+					foreach ( $el_selectors as $el_selector_item ) {
+						$element_selector[] = $selector . ' ' . $el_selector_item;
+					}
 				}
 				static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
 			}

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * WP_Theme_JSON_Resolver_6_1 class
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Class that abstracts the processing of the different data sources
+ * for site-level config and offers an API to work with them.
+ *
+ * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
+ * This is a low-level API that may need to do breaking changes. Please,
+ * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
+ *
+ * @access private
+ */
+class WP_Theme_JSON_Resolver_6_1 extends WP_Theme_JSON_Resolver_6_0 {
+	/**
+	 * Return core's origin config.
+	 *
+	 * @return WP_Theme_JSON_Gutenberg Entity that holds core data.
+	 */
+	public static function get_core_data() {
+		if ( null !== static::$core ) {
+			return static::$core;
+		}
+
+		$config       = static::read_json_file( __DIR__ . '/theme.json' );
+		$config       = static::translate( $config );
+		static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' );
+
+		return static::$core;
+	}
+}
diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json
@@ -0,0 +1,257 @@
+{
+	"version": 2,
+	"settings": {
+		"appearanceTools": false,
+		"border": {
+			"color": false,
+			"radius": false,
+			"style": false,
+			"width": false
+		},
+		"color": {
+			"background": true,
+			"custom": true,
+			"customDuotone": true,
+			"customGradient": true,
+			"defaultDuotone": true,
+			"defaultGradients": true,
+			"defaultPalette": true,
+			"duotone": [
+				{
+					"name": "Dark grayscale",
+					"colors": [ "#000000", "#7f7f7f" ],
+					"slug": "dark-grayscale"
+				},
+				{
+					"name": "Grayscale",
+					"colors": [ "#000000", "#ffffff" ],
+					"slug": "grayscale"
+				},
+				{
+					"name": "Purple and yellow",
+					"colors": [ "#8c00b7", "#fcff41" ],
+					"slug": "purple-yellow"
+				},
+				{
+					"name": "Blue and red",
+					"colors": [ "#000097", "#ff4747" ],
+					"slug": "blue-red"
+				},
+				{
+					"name": "Midnight",
+					"colors": [ "#000000", "#00a5ff" ],
+					"slug": "midnight"
+				},
+				{
+					"name": "Magenta and yellow",
+					"colors": [ "#c7005a", "#fff278" ],
+					"slug": "magenta-yellow"
+				},
+				{
+					"name": "Purple and green",
+					"colors": [ "#a60072", "#67ff66" ],
+					"slug": "purple-green"
+				},
+				{
+					"name": "Blue and orange",
+					"colors": [ "#1900d8", "#ffa96b" ],
+					"slug": "blue-orange"
+				}
+			],
+			"gradients": [
+				{
+					"name": "Vivid cyan blue to vivid purple",
+					"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
+					"slug": "vivid-cyan-blue-to-vivid-purple"
+				},
+				{
+					"name": "Light green cyan to vivid green cyan",
+					"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
+					"slug": "light-green-cyan-to-vivid-green-cyan"
+				},
+				{
+					"name": "Luminous vivid amber to luminous vivid orange",
+					"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
+					"slug": "luminous-vivid-amber-to-luminous-vivid-orange"
+				},
+				{
+					"name": "Luminous vivid orange to vivid red",
+					"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
+					"slug": "luminous-vivid-orange-to-vivid-red"
+				},
+				{
+					"name": "Very light gray to cyan bluish gray",
+					"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
+					"slug": "very-light-gray-to-cyan-bluish-gray"
+				},
+				{
+					"name": "Cool to warm spectrum",
+					"gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
+					"slug": "cool-to-warm-spectrum"
+				},
+				{
+					"name": "Blush light purple",
+					"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
+					"slug": "blush-light-purple"
+				},
+				{
+					"name": "Blush bordeaux",
+					"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
+					"slug": "blush-bordeaux"
+				},
+				{
+					"name": "Luminous dusk",
+					"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
+					"slug": "luminous-dusk"
+				},
+				{
+					"name": "Pale ocean",
+					"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
+					"slug": "pale-ocean"
+				},
+				{
+					"name": "Electric grass",
+					"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
+					"slug": "electric-grass"
+				},
+				{
+					"name": "Midnight",
+					"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
+					"slug": "midnight"
+				}
+			],
+			"link": false,
+			"palette": [
+				{
+					"name": "Black",
+					"slug": "black",
+					"color": "#000000"
+				},
+				{
+					"name": "Cyan bluish gray",
+					"slug": "cyan-bluish-gray",
+					"color": "#abb8c3"
+				},
+				{
+					"name": "White",
+					"slug": "white",
+					"color": "#ffffff"
+				},
+				{
+					"name": "Pale pink",
+					"slug": "pale-pink",
+					"color": "#f78da7"
+				},
+				{
+					"name": "Vivid red",
+					"slug": "vivid-red",
+					"color": "#cf2e2e"
+				},
+				{
+					"name": "Luminous vivid orange",
+					"slug": "luminous-vivid-orange",
+					"color": "#ff6900"
+				},
+				{
+					"name": "Luminous vivid amber",
+					"slug": "luminous-vivid-amber",
+					"color": "#fcb900"
+				},
+				{
+					"name": "Light green cyan",
+					"slug": "light-green-cyan",
+					"color": "#7bdcb5"
+				},
+				{
+					"name": "Vivid green cyan",
+					"slug": "vivid-green-cyan",
+					"color": "#00d084"
+				},
+				{
+					"name": "Pale cyan blue",
+					"slug": "pale-cyan-blue",
+					"color": "#8ed1fc"
+				},
+				{
+					"name": "Vivid cyan blue",
+					"slug": "vivid-cyan-blue",
+					"color": "#0693e3"
+				},
+				{
+					"name": "Vivid purple",
+					"slug": "vivid-purple",
+					"color": "#9b51e0"
+				}
+			],
+			"text": true
+		},
+		"spacing": {
+			"blockGap": null,
+			"margin": false,
+			"padding": false,
+			"units": [ "px", "em", "rem", "vh", "vw", "%" ]
+		},
+		"typography": {
+			"customFontSize": true,
+			"dropCap": true,
+			"fontSizes": [
+				{
+					"name": "Small",
+					"slug": "small",
+					"size": "13px"
+				},
+				{
+					"name": "Medium",
+					"slug": "medium",
+					"size": "20px"
+				},
+				{
+					"name": "Large",
+					"slug": "large",
+					"size": "36px"
+				},
+				{
+					"name": "Extra Large",
+					"slug": "x-large",
+					"size": "42px"
+				}
+			],
+			"fontStyle": true,
+			"fontWeight": true,
+			"letterSpacing": true,
+			"lineHeight": false,
+			"textDecoration": true,
+			"textTransform": true
+		},
+		"blocks": {
+			"core/button": {
+				"border": {
+					"radius": true
+				}
+			},
+			"core/pullquote": {
+				"border": {
+					"color": true,
+					"radius": true,
+					"style": true,
+					"width": true
+				}
+			}
+		}
+	},
+	"styles": {
+		"elements": {
+			"button": {
+				"color": {
+					"text": "#fff",
+					"background": "#32373c"
+				},
+				"typography": {
+					"fontSize": "1.125em",
+					"textDecoration": "none"
+				}
+			}
+		},
+		"spacing": { "blockGap": "24px" }
+	}
+}
diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php
@@ -15,7 +15,7 @@
  *
  * @access private
  */
-class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_0 {
+class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_1 {
 	/**
 	 * Returns the theme's data.
 	 *
@@ -115,7 +115,7 @@ public static function get_block_data() {
 
 		// Core here means it's the lower level part of the styles chain.
 		// It can be a core or a third-party block.
-		return new WP_Theme_JSON( $config, 'core' );
+		return new WP_Theme_JSON_Gutenberg( $config, 'core' );
 	}
 
 	/**

diff --git a/lib/load.php b/lib/load.php
@@ -127,6 +127,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.1/persisted-preferences.php';
 require __DIR__ . '/compat/wordpress-6.1/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-6-1.php';
+require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php';
 require __DIR__ . '/compat/wordpress-6.1/block-template-utils.php';
 require __DIR__ . '/compat/wordpress-6.1/wp-theme-get-post-templates.php';
 require __DIR__ . '/compat/wordpress-6.1/script-loader.php';

diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
@@ -95,14 +95,6 @@
 				"//": "100% causes an oval, but any explicit but really high value retains the pill shape.",
 				"radius": "9999px"
 			},
-			"color": {
-				"text": "#fff",
-				"background": "#32373c"
-			},
-			"typography": {
-				"fontSize": "1.125em",
-				"textDecoration": "none"
-			},
 			"spacing": {
 				"padding": {
 					"//": "The extra 2px are added to size solids the same as the outline versions.",

diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json
@@ -56,7 +56,16 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"__experimentalStyle": {
+			"elements": {
+				"button": {
+					"typography": {
+						"fontSize": "0.8em"
+					}
+				}
+			}
+		}
 	},
 	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",

diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
@@ -21,14 +21,10 @@
 
 //This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
 .wp-block-file__button {
-	background: #32373c;
 	border-radius: 2em;
-	color: $white;
-	font-size: 0.8em;
 	padding: 0.5em 1em;
 
 	&:is(a) {
-		text-decoration: none;
 
 		&:hover,
 		&:visited,

diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
@@ -1,8 +1,6 @@
 .wp-block-search__button {
-	background: #f7f7f7;
 	border: 1px solid #ccc;
 	padding: 0.375em 0.625em;
-	color: #32373c;
 	margin-left: 0.625em;
 	word-break: normal;
 	font-size: inherit;