WordPress.org
Get WordPress

Make WordPress Core

Changeset 54211


Ignore:
Timestamp:
09/19/2022 08:12:02 PM (4 years ago)
Author:
audrasjb
Message:

Editor: Backport block supports (border, color, elements, spacing) from Gutenberg to WP 6.1.

This changeset backports border, color, elements and spacing block supports changes from Gutenberg to WP 6.1.

See tracking issue on Gutenberg repository: ​gutenberg#43440.

Props ramonopoly, glendaviesnz, bernhard-reiter, audrasjb, costdev.
See #56467.

Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed

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

    r53240 r54211  
    1212 *
    1313 * @since 5.8.0
     14 * @since 6.1.0 Improved conditional blocks optimization.
    1415 * @access private
    1516 *
    … …  
    1718 */
    1819function wp_register_border_support( $block_type ) {
    19         // Determine if any border related features are supported.
    20         $has_border_support       = block_has_support( $block_type, array( '__experimentalBorder' ) );
    21         $has_border_color_support = wp_has_border_feature_support( $block_type, 'color' );
    22 
    2320        // Setup attributes and styles within that if needed.
    2421        if ( ! $block_type->attributes ) {
    … …  
    2623        }
    2724
    28         if ( $has_border_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
     25        if ( block_has_support( $block_type, array( '__experimentalBorder' ) ) && ! array_key_exists( 'style', $block_type->attributes ) ) {
    2926                $block_type->attributes['style'] = array(
    3027                        'type' => 'object',
    … …  
    3229        }
    3330
    34         if ( $has_border_color_support && ! array_key_exists( 'borderColor', $block_type->attributes ) ) {
     31        if ( wp_has_border_feature_support( $block_type, 'color' ) && ! array_key_exists( 'borderColor', $block_type->attributes ) ) {
    3532                $block_type->attributes['borderColor'] = array(
    3633                        'type' => 'string',
    … …  
    4441 *
    4542 * @since 5.8.0
     43 * @since 6.1.0 Implemented the style engine to generate CSS and classnames.
    4644 * @access private
    4745 *
    … …  
    5553        }
    5654
    57         $classes = array();
    58         $styles  = array();
     55        $border_block_styles      = array();
     56        $has_border_color_support = wp_has_border_feature_support( $block_type, 'color' );
     57        $has_border_width_support = wp_has_border_feature_support( $block_type, 'width' );
    5958
    6059        // Border radius.
    … …  
    6665                $border_radius = $block_attributes['style']['border']['radius'];
    6766
    68                 if ( is_array( $border_radius ) ) {
    69                         // We have individual border radius corner values.
    70                         foreach ( $border_radius as $key => $radius ) {
    71                                 // Convert CamelCase corner name to kebab-case.
    72                                 $corner   = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );
    73                                 $styles[] = sprintf( 'border-%s-radius: %s;', $corner, $radius );
    74                         }
    75                 } else {
    76                         // This check handles original unitless implementation.
    77                         if ( is_numeric( $border_radius ) ) {
    78                                 $border_radius .= 'px';
    79                         }
     67                if ( is_numeric( $border_radius ) ) {
     68                        $border_radius .= 'px';
     69                }
    8070
    81                         $styles[] = sprintf( 'border-radius: %s;', $border_radius );
    82                 }
     71                $border_block_styles['radius'] = $border_radius;
    8372        }
    8473
    … …  
    8978                ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' )
    9079        ) {
    91                 $border_style = $block_attributes['style']['border']['style'];
    92                 $styles[]     = sprintf( 'border-style: %s;', $border_style );
     80                $border_block_styles['style'] = $block_attributes['style']['border']['style'];
    9381        }
    9482
    9583        // Border width.
    9684        if (
    97                 wp_has_border_feature_support( $block_type, 'width' ) &&
     85                $has_border_width_support &&
    9886                isset( $block_attributes['style']['border']['width'] ) &&
    9987                ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' )
    … …  
    10694                }
    10795
    108                 $styles[] = sprintf( 'border-width: %s;', $border_width );
     96                $border_block_styles['width'] = $border_width;
    10997        }
    11098
    11199        // Border color.
    112100        if (
    113                 wp_has_border_feature_support( $block_type, 'color' ) &&
     101                $has_border_color_support &&
    114102                ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' )
    115103        ) {
    116                 $has_named_border_color  = array_key_exists( 'borderColor', $block_attributes );
    117                 $has_custom_border_color = isset( $block_attributes['style']['border']['color'] );
     104                $preset_border_color          = array_key_exists( 'borderColor', $block_attributes ) ? "var:preset|color|{$block_attributes['borderColor']}" : null;
     105                $custom_border_color          = _wp_array_get( $block_attributes, array( 'style', 'border', 'color' ), null );
     106                $border_block_styles['color'] = $preset_border_color ? $preset_border_color : $custom_border_color;
     107        }
    118108
    119                 if ( $has_named_border_color || $has_custom_border_color ) {
    120                         $classes[] = 'has-border-color';
    121                 }
    122 
    123                 if ( $has_named_border_color ) {
    124                         $classes[] = sprintf( 'has-%s-border-color', $block_attributes['borderColor'] );
    125                 } elseif ( $has_custom_border_color ) {
    126                         $border_color = $block_attributes['style']['border']['color'];
    127                         $styles[]     = sprintf( 'border-color: %s;', $border_color );
     109        // Generates styles for individual border sides.
     110        if ( $has_border_color_support || $has_border_width_support ) {
     111                foreach ( array( 'top', 'right', 'bottom', 'left' ) as $side ) {
     112                        $border                       = _wp_array_get( $block_attributes, array( 'style', 'border', $side ), null );
     113                        $border_side_values           = array(
     114                                'width' => isset( $border['width'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' ) ? $border['width'] : null,
     115                                'color' => isset( $border['color'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' ) ? $border['color'] : null,
     116                                'style' => isset( $border['style'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' ) ? $border['style'] : null,
     117                        );
     118                        $border_block_styles[ $side ] = $border_side_values;
    128119                }
    129120        }
    … …  
    131122        // Collect classes and styles.
    132123        $attributes = array();
     124        $styles     = wp_style_engine_get_styles( array( 'border' => $border_block_styles ) );
    133125
    134         if ( ! empty( $classes ) ) {
    135                 $attributes['class'] = implode( ' ', $classes );
     126        if ( ! empty( $styles['classnames'] ) ) {
     127                $attributes['class'] = $styles['classnames'];
    136128        }
    137129
    138         if ( ! empty( $styles ) ) {
    139                 $attributes['style'] = implode( ' ', $styles );
     130        if ( ! empty( $styles['css'] ) ) {
     131                $attributes['style'] = $styles['css'];
    140132        }
    141133

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

    r53076 r54211  
    1111 *
    1212 * @since 5.6.0
     13 * @since 6.1.0 Improved $color_support assignment optimization.
    1314 * @access private
    1415 *
    … …  
    1617 */
    1718function wp_register_colors_support( $block_type ) {
    18         $color_support = false;
    19         if ( property_exists( $block_type, 'supports' ) ) {
    20                 $color_support = _wp_array_get( $block_type->supports, array( 'color' ), false );
    21         }
     19        $color_support                 = property_exists( $block_type, 'supports' ) ? _wp_array_get( $block_type->supports, array( 'color' ), false ) : false;
    2220        $has_text_colors_support       = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'text' ), true ) );
    2321        $has_background_colors_support = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'background' ), true ) );
    … …  
    6462 *
    6563 * @since 5.6.0
     64 * @since 6.1.0 Implemented the style engine to generate CSS and classnames.
    6665 * @access private
    6766 *
    … …  
    8483        $has_background_colors_support = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'background' ), true ) );
    8584        $has_gradients_support         = _wp_array_get( $color_support, array( 'gradients' ), false );
    86         $classes                       = array();
    87         $styles                        = array();
     85        $color_block_styles            = array();
    8886
    8987        // Text colors.
    90         // Check support for text colors.
    9188        if ( $has_text_colors_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'text' ) ) {
    92                 $has_named_text_color  = array_key_exists( 'textColor', $block_attributes );
    93                 $has_custom_text_color = isset( $block_attributes['style']['color']['text'] );
    94 
    95                 // Apply required generic class.
    96                 if ( $has_custom_text_color || $has_named_text_color ) {
    97                         $classes[] = 'has-text-color';
    98                 }
    99                 // Apply color class or inline style.
    100                 if ( $has_named_text_color ) {
    101                         $classes[] = sprintf( 'has-%s-color', _wp_to_kebab_case( $block_attributes['textColor'] ) );
    102                 } elseif ( $has_custom_text_color ) {
    103                         $styles[] = sprintf( 'color: %s;', $block_attributes['style']['color']['text'] );
    104                 }
     89                $preset_text_color          = array_key_exists( 'textColor', $block_attributes ) ? "var:preset|color|{$block_attributes['textColor']}" : null;
     90                $custom_text_color          = _wp_array_get( $block_attributes, array( 'style', 'color', 'text' ), null );
     91                $color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color;
    10592        }
    10693
    10794        // Background colors.
    10895        if ( $has_background_colors_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'background' ) ) {
    109                 $has_named_background_color  = array_key_exists( 'backgroundColor', $block_attributes );
    110                 $has_custom_background_color = isset( $block_attributes['style']['color']['background'] );
    111 
    112                 // Apply required background class.
    113                 if ( $has_custom_background_color || $has_named_background_color ) {
    114                         $classes[] = 'has-background';
    115                 }
    116                 // Apply background color classes or styles.
    117                 if ( $has_named_background_color ) {
    118                         $classes[] = sprintf( 'has-%s-background-color', _wp_to_kebab_case( $block_attributes['backgroundColor'] ) );
    119                 } elseif ( $has_custom_background_color ) {
    120                         $styles[] = sprintf( 'background-color: %s;', $block_attributes['style']['color']['background'] );
    121                 }
     96                $preset_background_color          = array_key_exists( 'backgroundColor', $block_attributes ) ? "var:preset|color|{$block_attributes['backgroundColor']}" : null;
     97                $custom_background_color          = _wp_array_get( $block_attributes, array( 'style', 'color', 'background' ), null );
     98                $color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color;
    12299        }
    123100
    124101        // Gradients.
    125102        if ( $has_gradients_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'gradients' ) ) {
    126                 $has_named_gradient  = array_key_exists( 'gradient', $block_attributes );
    127                 $has_custom_gradient = isset( $block_attributes['style']['color']['gradient'] );
    128 
    129                 if ( $has_named_gradient || $has_custom_gradient ) {
    130                         $classes[] = 'has-background';
    131                 }
    132                 // Apply required background class.
    133                 if ( $has_named_gradient ) {
    134                         $classes[] = sprintf( 'has-%s-gradient-background', _wp_to_kebab_case( $block_attributes['gradient'] ) );
    135                 } elseif ( $has_custom_gradient ) {
    136                         $styles[] = sprintf( 'background: %s;', $block_attributes['style']['color']['gradient'] );
    137                 }
     103                $preset_gradient_color          = array_key_exists( 'gradient', $block_attributes ) ? "var:preset|gradient|{$block_attributes['gradient']}" : null;
     104                $custom_gradient_color          = _wp_array_get( $block_attributes, array( 'style', 'color', 'gradient' ), null );
     105                $color_block_styles['gradient'] = $preset_gradient_color ? $preset_gradient_color : $custom_gradient_color;
    138106        }
    139107
    140108        $attributes = array();
    141         if ( ! empty( $classes ) ) {
    142                 $attributes['class'] = implode( ' ', $classes );
     109        $styles     = wp_style_engine_get_styles( array( 'color' => $color_block_styles ), array( 'convert_vars_to_classnames' => true ) );
     110
     111        if ( ! empty( $styles['classnames'] ) ) {
     112                $attributes['class'] = $styles['classnames'];
    143113        }
    144         if ( ! empty( $styles ) ) {
    145                 $attributes['style'] = implode( ' ', $styles );
     114
     115        if ( ! empty( $styles['css'] ) ) {
     116                $attributes['style'] = $styles['css'];
    146117        }
    147118

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

    r53260 r54211  
    9090 *
    9191 * @since 6.0.0
     92 * @since 6.1.0 Implemented the style engine to generate CSS and classnames.
    9293 * @access private
    9394 *
    … …  
    9899 */
    99100function wp_render_elements_support_styles( $pre_render, $block ) {
    100         $block_type                    = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
     101        $block_type           = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
     102        $element_block_styles = isset( $block['attrs']['style']['elements'] ) ? $block['attrs']['style']['elements'] : null;
     103
     104        /*
     105        * For now we only care about link color.
     106        */
    101107        $skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
     108
    102109        if ( $skip_link_color_serialization ) {
    103110                return null;
    104111        }
     112        $class_name        = wp_get_elements_class_name( $block );
     113        $link_block_styles = isset( $element_block_styles['link'] ) ? $element_block_styles['link'] : null;
    105114
    106         $link_color = null;
    107         if ( ! empty( $block['attrs'] ) ) {
    108                 $link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
    109         }
    110 
    111         /*
    112         * For now we only care about link color.
    113         * This code in the future when we have a public API
    114         * should take advantage of WP_Theme_JSON::compute_style_properties
    115         * and work for any element and style.
    116         */
    117         if ( null === $link_color ) {
    118                 return null;
    119         }
    120 
    121         $class_name = wp_get_elements_class_name( $block );
    122 
    123         if ( strpos( $link_color, 'var:preset|color|' ) !== false ) {
    124                 // Get the name from the string and add proper styles.
    125                 $index_to_splice = strrpos( $link_color, '|' ) + 1;
    126                 $link_color_name = substr( $link_color, $index_to_splice );
    127                 $link_color      = "var(--wp--preset--color--$link_color_name)";
    128         }
    129         $link_color_declaration = esc_html( safecss_filter_attr( "color: $link_color" ) );
    130 
    131         $style = ".$class_name a{" . $link_color_declaration . ';}';
    132 
    133         wp_enqueue_block_support_styles( $style );
     115        wp_style_engine_get_styles(
     116                $link_block_styles,
     117                array(
     118                        'selector' => ".$class_name a",
     119                        'context'  => 'block-supports',
     120                )
     121        );
    134122
    135123        return null;

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

    r53076 r54211  
    3838 *
    3939 * @since 5.8.0
     40 * @since 6.1.0 Implemented the style engine to generate CSS and classnames.
    4041 * @access private
    4142 *
    … …  
    4950        }
    5051
     52        $attributes          = array();
    5153        $has_padding_support = block_has_support( $block_type, array( 'spacing', 'padding' ), false );
    5254        $has_margin_support  = block_has_support( $block_type, array( 'spacing', 'margin' ), false );
    53         $skip_padding        = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'padding' );
    54         $skip_margin         = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'margin' );
    55         $styles              = array();
     55        $block_styles        = isset( $block_attributes['style'] ) ? $block_attributes['style'] : null;
    5656
    57         if ( $has_padding_support && ! $skip_padding ) {
    58                 $padding_value = _wp_array_get( $block_attributes, array( 'style', 'spacing', 'padding' ), null );
    59                 if ( is_array( $padding_value ) ) {
    60                         foreach ( $padding_value as $key => $value ) {
    61                                 $styles[] = sprintf( 'padding-%s: %s;', $key, $value );
    62                         }
    63                 } elseif ( null !== $padding_value ) {
    64                         $styles[] = sprintf( 'padding: %s;', $padding_value );
    65                 }
     57        if ( ! $block_styles ) {
     58                return $attributes;
    6659        }
    6760
    68         if ( $has_margin_support && ! $skip_margin ) {
    69                 $margin_value = _wp_array_get( $block_attributes, array( 'style', 'spacing', 'margin' ), null );
    70                 if ( is_array( $margin_value ) ) {
    71                         foreach ( $margin_value as $key => $value ) {
    72                                 $styles[] = sprintf( 'margin-%s: %s;', $key, $value );
    73                         }
    74                 } elseif ( null !== $margin_value ) {
    75                         $styles[] = sprintf( 'margin: %s;', $margin_value );
    76                 }
     61        $skip_padding                    = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'padding' );
     62        $skip_margin                     = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'margin' );
     63        $spacing_block_styles            = array();
     64        $spacing_block_styles['padding'] = $has_padding_support && ! $skip_padding ? _wp_array_get( $block_styles, array( 'spacing', 'padding' ), null ) : null;
     65        $spacing_block_styles['margin']  = $has_margin_support && ! $skip_margin ? _wp_array_get( $block_styles, array( 'spacing', 'margin' ), null ) : null;
     66        $styles                          = wp_style_engine_get_styles( array( 'spacing' => $spacing_block_styles ) );
     67
     68        if ( ! empty( $styles['css'] ) ) {
     69                $attributes['style'] = $styles['css'];
    7770        }
    7871
    79         return empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) );
     72        return $attributes;
    8073}
    8174

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

    r53680 r54211  
    6565                $expected = array(
    6666                        'class' => 'has-border-color has-red-border-color',
    67                         'style' => 'border-radius: 10px; border-style: dashed; border-width: 1px;',
     67                        'style' => 'border-radius:10px;border-style:dashed;border-width:1px;',
    6868                );
    6969
    … …  
    155155                $actual   = wp_apply_border_support( $block_type, $block_atts );
    156156                $expected = array(
    157                         'style' => 'border-style: dotted; border-width: 1px;',
     157                        'style' => 'border-style:dotted;border-width:1px;',
    158158                );
    159159

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

    r53680 r54211  
    6161
    6262                $actual   = wp_apply_colors_support( $block_type, $block_atts );
    63                 $expected = array( 'class' => 'has-text-color has-fg-1-color has-background has-bg-2-background-color has-background has-gr-3-gradient-background' );
     63                $expected = array( 'class' => 'has-text-color has-fg-1-color has-background has-bg-2-background-color has-gr-3-gradient-background' );
    6464
    6565                $this->assertSame( $expected, $actual );
    … …  
    144144                $expected = array(
    145145                        'class' => 'has-text-color',
    146                         'style' => 'color: #d92828;',
     146                        'style' => 'color:#d92828;',
    147147                );
    148148

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

    r53680 r54211  
    6464                $actual   = wp_apply_spacing_support( $block_type, $block_atts );
    6565                $expected = array(
    66                         'style' => 'padding: 111px; margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;',
     66                        'style' => 'padding:111px;margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;',
    6767                );
    6868
    … …  
    160160                $actual   = wp_apply_spacing_support( $block_type, $block_atts );
    161161                $expected = array(
    162                         'style' => 'padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;',
     162                        'style' => 'padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;',
    163163                );
    164164

  • trunk/tests/phpunit/tests/blocks/supportedStyles.php

    r51657 r54211  
    221221                );
    222222
    223                 $expected_styles  = 'test: style; color: #000; background-color: #fff;';
     223                $expected_styles  = 'test: style;color:#000;background-color:#fff;';
    224224                $expected_classes = 'foo-bar-class wp-block-example has-text-color has-background';
    225225
    … …  
    284284
    285285                $expected_classes = 'foo-bar-class wp-block-example has-background';
    286                 $expected_styles  = 'test: style; background: some-gradient-style;';
     286                $expected_styles  = 'test: style; background:some-gradient-style;';
    287287
    288288                $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
    … …  
    564564
    565565                $expected_classes = 'foo-bar-class wp-block-example has-text-color has-background alignwide';
    566                 $expected_styles  = 'test: style; color: #000; background-color: #fff; font-size: 10px; line-height: 20;';
     566                $expected_styles  = 'test: style; color:#000; background-color:#fff; font-size: 10px; line-height: 20;';
    567567
    568568                $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
Note: See TracChangeset for help on using the changeset viewer.