Pseudo elements supports on button elements (#43088)

* pseudoelements supports on button elements

* refactor into a utility function

* linting

lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

@@ -21,7 +21,8 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 {
 	 * Note: this will effect both top level and block level elements.
 	 */
 	const VALID_ELEMENT_PSEUDO_SELECTORS = array(
-		'link' => array( ':hover', ':focus', ':active', ':visited' ),
+		'link'   => array( ':hover', ':focus', ':active', ':visited' ),
+		'button' => array( ':hover', ':focus', ':active', ':visited' ),
 	);
 
 	/**
@@ -333,6 +334,29 @@ public static function remove_insecure_properties( $theme_json ) {
 		),
 	);
 
+	/**
+	 * 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.
+	 *
+	 * @param string $element The string with all the element's selectors.
+	 * @param string $selector The string we want to append to the selectors.
+	 * @param string $position The position we wand to append the selector in.
+	 * @return string element selector.
+	 */
+	private static function appendToSelector( $element, $selector, $position = 0 ) {
+		$element_selector = array();
+		$el_selectors     = explode( ',', $element );
+		foreach ( $el_selectors as $el_selector_item ) {
+			if ( 0 === $position ) {
+				$element_selector[] = $selector . $el_selector_item;
+			} else {
+				$element_selector[] = $el_selector_item . $selector;
+			}
+		}
+		$element_selector = implode( ',', $element_selector );
+		return $element_selector;
+	}
+
 	/**
 	 * Returns the metadata for each block.
 	 *
@@ -416,14 +440,9 @@ protected static function get_blocks_metadata() {
 						break;
 					}
 
-					// 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;
-					}
+					$element_selector = static::appendToSelector( $el_selector, $selector . ' ', 0 );
 				}
-				static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
+				static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = $element_selector;
 			}
 		}
 
@@ -481,9 +500,13 @@ protected static function get_style_nodes( $theme_json, $selectors = array() ) {
 					foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
 
 						if ( isset( $theme_json['styles']['elements'][ $element ][ $pseudo_selector ] ) ) {
+
+							$element_selector = array();
+							$element_selector = static::appendToSelector( static::ELEMENTS[ $element ], $pseudo_selector, 1 );
+
 							$nodes[] = array(
 								'path'     => array( 'styles', 'elements', $element ),
-								'selector' => static::ELEMENTS[ $element ] . $pseudo_selector,
+								'selector' => $element_selector,
 							);
 						}
 					}
@@ -566,9 +589,13 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) {
 					if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
 						foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
 							if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ) ) {
+
+								$block_selector = array();
+								$block_selector = static::appendToSelector( $selectors[ $name ]['elements'][ $element ], $pseudo_selector, 1 );
+
 								$nodes[] = array(
 									'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
-									'selector' => $selectors[ $name ]['elements'][ $element ] . $pseudo_selector,
+									'selector' => $block_selector,
 								);
 							}
 						}