Make WordPress Core


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.

File:
1 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
Note: See TracChangeset for help on using the changeset viewer.