Changeset 56604 for trunk/src/wp-includes/block-supports/elements.php

Timestamp:

09/18/2023 06:25:49 AM (20 months ago)

Author:

isabel_brison

Message:

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.

File:

• trunk/src/wp-includes/block-supports/elements.php (modified) (3 diffs)

trunk/src/wp-includes/block-supports/elements.php

@@ -24 +24 @@
  *
  * @since 5.8.0
+ * @since 6.4.0 Added support for button and heading element styling.
  * @access private
  *
@@ -31 +32 @@
  */
 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'] );
-    $skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
-
-    if ( $skip_link_color_serialization ) {
+    $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+
+    $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;
-    if ( ! empty( $block['attrs'] ) ) {
-        $link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
-    }
-
-    $hover_link_color = null;
-    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 ) {
+    $element_colors_set = 0;
+
+    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++;
+            }
+        }
+    }
+
+    if ( ! $element_colors_set ) {
         return $block_content;
     }
@@ -91 +137 @@
     $element_block_styles = isset( $block['attrs']['style']['elements'] ) ? $block['attrs']['style']['elements'] : null;
 
-    /*
-    * 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 ) {
+    if ( ! $element_block_styles ) {
         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(
-        $link_block_styles,
-        array(
-            'selector' => ".$class_name a",
-            'context'  => 'block-supports',
-        )
+
+    $skip_link_color_serialization         = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
+    $skip_heading_color_serialization      = wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' );
+    $skip_button_color_serialization       = wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' );
+    $skips_all_element_color_serialization = $skip_link_color_serialization &&
+        $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'] ) ) {
-        wp_style_engine_get_styles(
-            $link_block_styles[':hover'],
-            array(
-                'selector' => ".$class_name a:hover",
-                'context'  => 'block-supports',
-            )
-        );
+    foreach ( $element_types as $element_type => $element_config ) {
+        if ( $element_config['skip'] ) {
+            continue;
+        }
+
+        $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',
+                        )
+                    );
+                }
+            }
+        }
     }