Editor: add block instance element color support for buttons and headings.

Adds support for buttons and headings to the colors and elements block supports, allowing button and heading element colors to be changed on individual blocks.

Props aaronrobertshaw.
Fixes #59309.


Built from https://develop.svn.wordpress.org/trunk@56604


git-svn-id: http://core.svn.wordpress.org/trunk@56116 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/block-supports/colors.php

@@ -21,10 +21,14 @@ function wp_register_colors_support( $block_type ) {
 	$has_background_colors_support = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'background' ), true ) );
 	$has_gradients_support         = _wp_array_get( $color_support, array( 'gradients' ), false );
 	$has_link_colors_support       = _wp_array_get( $color_support, array( 'link' ), false );
+	$has_button_colors_support     = _wp_array_get( $color_support, array( 'button' ), false );
+	$has_heading_colors_support    = _wp_array_get( $color_support, array( 'heading' ), false );
 	$has_color_support             = $has_text_colors_support ||
 		$has_background_colors_support ||
 		$has_gradients_support ||
-		$has_link_colors_support;
+		$has_link_colors_support ||
+		$has_button_colors_support ||
+		$has_heading_colors_support;
 
 	if ( ! $block_type->attributes ) {
 		$block_type->attributes = array();

wp-includes/block-supports/elements.php

@@ -23,6 +23,7 @@ function wp_get_elements_class_name( $block ) {
  * Updates the block content with elements class names.
  *
  * @since 5.8.0
+ * @since 6.4.0 Added support for button and heading element styling.
  * @access private
  *
  * @param string $block_content Rendered block content.
@@ -30,34 +31,79 @@ function wp_get_elements_class_name( $block ) {
  * @return string Filtered block content.
  */
 function wp_render_elements_support( $block_content, $block ) {
-	if ( ! $block_content ) {
+	if ( ! $block_content || empty( $block['attrs'] ) ) {
 		return $block_content;
 	}
 
-	$block_type                    = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
-	$skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
 
-	if ( $skip_link_color_serialization ) {
+	$element_color_properties = array(
+		'button'  => array(
+			'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' ),
+			'paths' => array(
+				'style.elements.button.color.text',
+				'style.elements.button.color.background',
+				'style.elements.button.color.gradient',
+			),
+		),
+		'link'    => array(
+			'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' ),
+			'paths' => array(
+				'style.elements.link.color.text',
+				'style.elements.link.:hover.color.text',
+			),
+		),
+		'heading' => array(
+			'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' ),
+			'paths' => array(
+				'style.elements.heading.color.text',
+				'style.elements.heading.color.background',
+				'style.elements.heading.color.gradient',
+				'style.elements.h1.color.text',
+				'style.elements.h1.color.background',
+				'style.elements.h1.color.gradient',
+				'style.elements.h2.color.text',
+				'style.elements.h2.color.background',
+				'style.elements.h2.color.gradient',
+				'style.elements.h3.color.text',
+				'style.elements.h3.color.background',
+				'style.elements.h3.color.gradient',
+				'style.elements.h4.color.text',
+				'style.elements.h4.color.background',
+				'style.elements.h4.color.gradient',
+				'style.elements.h5.color.text',
+				'style.elements.h5.color.background',
+				'style.elements.h5.color.gradient',
+				'style.elements.h6.color.text',
+				'style.elements.h6.color.background',
+				'style.elements.h6.color.gradient',
+			),
+		),
+	);
+
+	$skip_all_element_color_serialization = $element_color_properties['button']['skip'] &&
+		$element_color_properties['link']['skip'] &&
+		$element_color_properties['heading']['skip'];
+
+	if ( $skip_all_element_color_serialization ) {
 		return $block_content;
 	}
 
-	$link_color = null;
+	$element_colors_set = 0;
-	if ( ! empty( $block['attrs'] ) ) {
+
-		$link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
+	foreach ( $element_color_properties as $element_config ) {
+		if ( $element_config['skip'] ) {
+			continue;
+		}
+
+		foreach ( $element_config['paths'] as $path ) {
+			if ( null !== _wp_array_get( $block['attrs'], explode( '.', $path ), null ) ) {
+				$element_colors_set++;
+			}
+		}
 	}
 
-	$hover_link_color = null;
+	if ( ! $element_colors_set ) {
-	if ( ! empty( $block['attrs'] ) ) {
-		$hover_link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', ':hover', 'color', 'text' ), null );
-	}
-
-	/*
-	 * For now we only care about link colors.
-	 * This code in the future when we have a public API
-	 * should take advantage of WP_Theme_JSON::compute_style_properties
-	 * and work for any element and style.
-	 */
-	if ( null === $link_color && null === $hover_link_color ) {
 		return $block_content;
 	}
 
@@ -90,33 +136,84 @@ function wp_render_elements_support_styles( $pre_render, $block ) {
 	$block_type           = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
 	$element_block_styles = isset( $block['attrs']['style']['elements'] ) ? $block['attrs']['style']['elements'] : null;
 
-	/*
+	if ( ! $element_block_styles ) {
-	* For now we only care about link color.
-	*/
-	$skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
-
-	if ( $skip_link_color_serialization ) {
 		return null;
 	}
-	$class_name        = wp_get_elements_class_name( $block );
-	$link_block_styles = isset( $element_block_styles['link'] ) ? $element_block_styles['link'] : null;
 
-	wp_style_engine_get_styles(
+	$skip_link_color_serialization         = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
-		$link_block_styles,
+	$skip_heading_color_serialization      = wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' );
-		array(
+	$skip_button_color_serialization       = wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' );
-			'selector' => ".$class_name a",
+	$skips_all_element_color_serialization = $skip_link_color_serialization &&
-			'context'  => 'block-supports',
+		$skip_heading_color_serialization &&
-		)
+		$skip_button_color_serialization;
+
+	if ( $skips_all_element_color_serialization ) {
+		return null;
+	}
+
+	$class_name = wp_get_elements_class_name( $block );
+
+	$element_types = array(
+		'button'  => array(
+			'selector' => ".$class_name .wp-element-button, .$class_name .wp-block-button__link",
+			'skip'     => $skip_button_color_serialization,
+		),
+		'link'    => array(
+			'selector'       => ".$class_name a",
+			'hover_selector' => ".$class_name a:hover",
+			'skip'           => $skip_link_color_serialization,
+		),
+		'heading' => array(
+			'selector' => ".$class_name h1, .$class_name h2, .$class_name h3, .$class_name h4, .$class_name h5, .$class_name h6",
+			'skip'     => $skip_heading_color_serialization,
+			'elements' => array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ),
+		),
 	);
 
-	if ( isset( $link_block_styles[':hover'] ) ) {
+	foreach ( $element_types as $element_type => $element_config ) {
-		wp_style_engine_get_styles(
+		if ( $element_config['skip'] ) {
-			$link_block_styles[':hover'],
+			continue;
-			array(
+		}
-				'selector' => ".$class_name a:hover",
+
-				'context'  => 'block-supports',
+		$element_style_object = _wp_array_get( $element_block_styles, array( $element_type ), null );
-			)
+
-		);
+		// Process primary element type styles.
+		if ( $element_style_object ) {
+			wp_style_engine_get_styles(
+				$element_style_object,
+				array(
+					'selector' => $element_config['selector'],
+					'context'  => 'block-supports',
+				)
+			);
+
+			if ( isset( $element_style_object[':hover'] ) ) {
+				wp_style_engine_get_styles(
+					$element_style_object[':hover'],
+					array(
+						'selector' => $element_config['hover_selector'],
+						'context'  => 'block-supports',
+					)
+				);
+			}
+		}
+
+		// Process related elements e.g. h1-h6 for headings.
+		if ( isset( $element_config['elements'] ) ) {
+			foreach ( $element_config['elements'] as $element ) {
+				$element_style_object = _wp_array_get( $element_block_styles, array( $element ), null );
+
+				if ( $element_style_object ) {
+					wp_style_engine_get_styles(
+						$element_style_object,
+						array(
+							'selector' => ".$class_name $element",
+							'context'  => 'block-supports',
+						)
+					);
+				}
+			}
+		}
 	}
 
 	return null;

wp-includes/style-engine/class-wp-style-engine.php

@@ -70,6 +70,9 @@ final class WP_Style_Engine {
 					'default' => 'background-color',
 				),
 				'path'          => array( 'color', 'background' ),
+				'css_vars'      => array(
+					'color' => '--wp--preset--color--$slug',
+				),
 				'classnames'    => array(
 					'has-background'             => true,
 					'has-$slug-background-color' => 'color',
@@ -80,6 +83,9 @@ final class WP_Style_Engine {
 					'default' => 'background',
 				),
 				'path'          => array( 'color', 'gradient' ),
+				'css_vars'      => array(
+					'gradient' => '--wp--preset--gradient--$slug',
+				),
 				'classnames'    => array(
 					'has-background'                => true,
 					'has-$slug-gradient-background' => 'gradient',

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.4-alpha-56603';
+$wp_version = '6.4-alpha-56604';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.