WordPress.org
Get WordPress

Make WordPress Core

Changeset 56604


Ignore:
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.

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/block-supports/colors.php

    r54873 r56604  
    2222    $has_gradients_support         = _wp_array_get( $color_support, array( 'gradients' ), false );
    2323    $has_link_colors_support       = _wp_array_get( $color_support, array( 'link' ), false );
     24    $has_button_colors_support     = _wp_array_get( $color_support, array( 'button' ), false );
     25    $has_heading_colors_support    = _wp_array_get( $color_support, array( 'heading' ), false );
    2426    $has_color_support             = $has_text_colors_support ||
    2527        $has_background_colors_support ||
    2628        $has_gradients_support ||
    27         $has_link_colors_support;
     29        $has_link_colors_support ||
     30        $has_button_colors_support ||
     31        $has_heading_colors_support;
    2832
    2933    if ( ! $block_type->attributes ) {

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

    r56028 r56604  
    2424 *
    2525 * @since 5.8.0
     26 * @since 6.4.0 Added support for button and heading element styling.
    2627 * @access private
    2728 *
    … …  
    3132 */
    3233function wp_render_elements_support( $block_content, $block ) {
    33     if ( ! $block_content ) {
     34    if ( ! $block_content || empty( $block['attrs'] ) ) {
    3435        return $block_content;
    3536    }
    3637
    37     $block_type                    = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
    38     $skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
    39 
    40     if ( $skip_link_color_serialization ) {
     38    $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
     39
     40    $element_color_properties = array(
     41        'button'  => array(
     42            'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' ),
     43            'paths' => array(
     44                'style.elements.button.color.text',
     45                'style.elements.button.color.background',
     46                'style.elements.button.color.gradient',
     47            ),
     48        ),
     49        'link'    => array(
     50            'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' ),
     51            'paths' => array(
     52                'style.elements.link.color.text',
     53                'style.elements.link.:hover.color.text',
     54            ),
     55        ),
     56        'heading' => array(
     57            'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' ),
     58            'paths' => array(
     59                'style.elements.heading.color.text',
     60                'style.elements.heading.color.background',
     61                'style.elements.heading.color.gradient',
     62                'style.elements.h1.color.text',
     63                'style.elements.h1.color.background',
     64                'style.elements.h1.color.gradient',
     65                'style.elements.h2.color.text',
     66                'style.elements.h2.color.background',
     67                'style.elements.h2.color.gradient',
     68                'style.elements.h3.color.text',
     69                'style.elements.h3.color.background',
     70                'style.elements.h3.color.gradient',
     71                'style.elements.h4.color.text',
     72                'style.elements.h4.color.background',
     73                'style.elements.h4.color.gradient',
     74                'style.elements.h5.color.text',
     75                'style.elements.h5.color.background',
     76                'style.elements.h5.color.gradient',
     77                'style.elements.h6.color.text',
     78                'style.elements.h6.color.background',
     79                'style.elements.h6.color.gradient',
     80            ),
     81        ),
     82    );
     83
     84    $skip_all_element_color_serialization = $element_color_properties['button']['skip'] &&
     85        $element_color_properties['link']['skip'] &&
     86        $element_color_properties['heading']['skip'];
     87
     88    if ( $skip_all_element_color_serialization ) {
    4189        return $block_content;
    4290    }
    4391
    44     $link_color = null;
    45     if ( ! empty( $block['attrs'] ) ) {
    46         $link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
    47     }
    48 
    49     $hover_link_color = null;
    50     if ( ! empty( $block['attrs'] ) ) {
    51         $hover_link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', ':hover', 'color', 'text' ), null );
    52     }
    53 
    54     /*
    55      * For now we only care about link colors.
    56      * This code in the future when we have a public API
    57      * should take advantage of WP_Theme_JSON::compute_style_properties
    58      * and work for any element and style.
    59      */
    60     if ( null === $link_color && null === $hover_link_color ) {
     92    $element_colors_set = 0;
     93
     94    foreach ( $element_color_properties as $element_config ) {
     95        if ( $element_config['skip'] ) {
     96            continue;
     97        }
     98
     99        foreach ( $element_config['paths'] as $path ) {
     100            if ( null !== _wp_array_get( $block['attrs'], explode( '.', $path ), null ) ) {
     101                $element_colors_set++;
     102            }
     103        }
     104    }
     105
     106    if ( ! $element_colors_set ) {
    61107        return $block_content;
    62108    }
    … …  
    91137    $element_block_styles = isset( $block['attrs']['style']['elements'] ) ? $block['attrs']['style']['elements'] : null;
    92138
    93     /*
    94     * For now we only care about link color.
    95     */
    96     $skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
    97 
    98     if ( $skip_link_color_serialization ) {
     139    if ( ! $element_block_styles ) {
    99140        return null;
    100141    }
    101     $class_name        = wp_get_elements_class_name( $block );
    102     $link_block_styles = isset( $element_block_styles['link'] ) ? $element_block_styles['link'] : null;
    103 
    104     wp_style_engine_get_styles(
    105         $link_block_styles,
    106         array(
    107             'selector' => ".$class_name a",
    108             'context'  => 'block-supports',
    109         )
     142
     143    $skip_link_color_serialization         = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
     144    $skip_heading_color_serialization      = wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' );
     145    $skip_button_color_serialization       = wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' );
     146    $skips_all_element_color_serialization = $skip_link_color_serialization &&
     147        $skip_heading_color_serialization &&
     148        $skip_button_color_serialization;
     149
     150    if ( $skips_all_element_color_serialization ) {
     151        return null;
     152    }
     153
     154    $class_name = wp_get_elements_class_name( $block );
     155
     156    $element_types = array(
     157        'button'  => array(
     158            'selector' => ".$class_name .wp-element-button, .$class_name .wp-block-button__link",
     159            'skip'     => $skip_button_color_serialization,
     160        ),
     161        'link'    => array(
     162            'selector'       => ".$class_name a",
     163            'hover_selector' => ".$class_name a:hover",
     164            'skip'           => $skip_link_color_serialization,
     165        ),
     166        'heading' => array(
     167            'selector' => ".$class_name h1, .$class_name h2, .$class_name h3, .$class_name h4, .$class_name h5, .$class_name h6",
     168            'skip'     => $skip_heading_color_serialization,
     169            'elements' => array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ),
     170        ),
    110171    );
    111172
    112     if ( isset( $link_block_styles[':hover'] ) ) {
    113         wp_style_engine_get_styles(
    114             $link_block_styles[':hover'],
    115             array(
    116                 'selector' => ".$class_name a:hover",
    117                 'context'  => 'block-supports',
    118             )
    119         );
     173    foreach ( $element_types as $element_type => $element_config ) {
     174        if ( $element_config['skip'] ) {
     175            continue;
     176        }
     177
     178        $element_style_object = _wp_array_get( $element_block_styles, array( $element_type ), null );
     179
     180        // Process primary element type styles.
     181        if ( $element_style_object ) {
     182            wp_style_engine_get_styles(
     183                $element_style_object,
     184                array(
     185                    'selector' => $element_config['selector'],
     186                    'context'  => 'block-supports',
     187                )
     188            );
     189
     190            if ( isset( $element_style_object[':hover'] ) ) {
     191                wp_style_engine_get_styles(
     192                    $element_style_object[':hover'],
     193                    array(
     194                        'selector' => $element_config['hover_selector'],
     195                        'context'  => 'block-supports',
     196                    )
     197                );
     198            }
     199        }
     200
     201        // Process related elements e.g. h1-h6 for headings.
     202        if ( isset( $element_config['elements'] ) ) {
     203            foreach ( $element_config['elements'] as $element ) {
     204                $element_style_object = _wp_array_get( $element_block_styles, array( $element ), null );
     205
     206                if ( $element_style_object ) {
     207                    wp_style_engine_get_styles(
     208                        $element_style_object,
     209                        array(
     210                            'selector' => ".$class_name $element",
     211                            'context'  => 'block-supports',
     212                        )
     213                    );
     214                }
     215            }
     216        }
    120217    }
    121218

  • trunk/src/wp-includes/style-engine/class-wp-style-engine.php

    r56574 r56604  
    7171                ),
    7272                'path'          => array( 'color', 'background' ),
     73                'css_vars'      => array(
     74                    'color' => '--wp--preset--color--$slug',
     75                ),
    7376                'classnames'    => array(
    7477                    'has-background'             => true,
    … …  
    8184                ),
    8285                'path'          => array( 'color', 'gradient' ),
     86                'css_vars'      => array(
     87                    'gradient' => '--wp--preset--gradient--$slug',
     88                ),
    8389                'classnames'    => array(
    8490                    'has-background'                => true,

  • trunk/tests/phpunit/tests/block-supports/elements.php

    r55235 r56604  
    107107        );
    108108    }
     109
     110    /**
     111     * Test wp_render_elements_support() with a group block that has a button
     112     * element color set.
     113     *
     114     * @ticket 59309
     115     */
     116    public function test_group_with_button_element_style() {
     117        $result = self::make_unique_id_one(
     118            wp_render_elements_support(
     119                '<div class="wp-block-group"><div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"><div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div></div></div>',
     120                array(
     121                    'blockName' => 'core/group',
     122                    'attrs'     => array(
     123                        'style' => array(
     124                            'elements' => array(
     125                                'button' => array(
     126                                    'color' => array(
     127                                        'text' => 'var:preset|color|vivid-red',
     128                                    ),
     129                                ),
     130                            ),
     131                        ),
     132                    ),
     133                )
     134            )
     135        );
     136        $this->assertSame(
     137            $result,
     138            '<div class="wp-block-group wp-elements-1"><div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"><div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div></div></div>'
     139        );
     140    }
     141
     142    /**
     143     * Test wp_render_elements_support() with a group block that has a heading
     144     * element color set.
     145     *
     146     * @ticket 59309
     147     */
     148    public function test_group_with_heading_element_style() {
     149        $result = self::make_unique_id_one(
     150            wp_render_elements_support(
     151                '<div class="wp-block-group"><h2 class="wp-block-heading">Test</h2></div>',
     152                array(
     153                    'blockName' => 'core/group',
     154                    'attrs'     => array(
     155                        'style' => array(
     156                            'elements' => array(
     157                                'heading' => array(
     158                                    'color' => array(
     159                                        'text' => 'var:preset|color|vivid-red',
     160                                    ),
     161                                ),
     162                            ),
     163                        ),
     164                    ),
     165                )
     166            )
     167        );
     168        $this->assertSame(
     169            $result,
     170            '<div class="wp-block-group wp-elements-1"><h2 class="wp-block-heading">Test</h2></div>'
     171        );
     172    }
    109173}
Note: See TracChangeset for help on using the changeset viewer.