WordPress.org
Get WordPress

Make WordPress Core

Changeset 56604


Ignore:
Timestamp:
09/18/2023 06:25:49 AM (3 years 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.