WordPress.org
Get WordPress

Make WordPress Core

Changeset 54211


Ignore:
Timestamp:
09/19/2022 08:12:02 PM (2 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.