WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
11/08/2021 02:26:27 PM (3 years ago)
Author:
youknowriad
Message:

Block Editor: Update the WordPress Packages based on Gutenberg 11.9 RC1.

This brings the JS packages up to date and is the first step that will allow us
to include the other block editor updates for WordPress 5.9:
FSE infrastrucutre, site editor and global styles.

Props noisysocks.
See #54337.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/blocks/search.php

    r50761 r52042  
    2828    );
    2929
    30     $input_id        = 'wp-block-search__input-' . ++$instance_id;
    31     $classnames      = classnames_for_block_core_search( $attributes );
    32     $show_label      = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
    33     $use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
    34     $show_input      = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
    35     $show_button     = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
    36     $label_markup    = '';
    37     $input_markup    = '';
    38     $button_markup   = '';
    39     $inline_styles   = styles_for_block_core_search( $attributes );
    40 
    41     if ( $show_label ) {
    42         if ( ! empty( $attributes['label'] ) ) {
    43             $label_markup = sprintf(
    44                 '<label for="%s" class="wp-block-search__label">%s</label>',
    45                 $input_id,
    46                 $attributes['label']
    47             );
    48         } else {
    49             $label_markup = sprintf(
    50                 '<label for="%s" class="wp-block-search__label screen-reader-text">%s</label>',
    51                 $input_id,
    52                 __( 'Search' )
    53             );
    54         }
     30    $input_id         = 'wp-block-search__input-' . ++$instance_id;
     31    $classnames       = classnames_for_block_core_search( $attributes );
     32    $show_label       = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
     33    $use_icon_button  = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
     34    $show_input       = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
     35    $show_button      = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
     36    $label_markup     = '';
     37    $input_markup     = '';
     38    $button_markup    = '';
     39    $inline_styles    = styles_for_block_core_search( $attributes );
     40    $color_classes    = get_color_classes_for_block_core_search( $attributes );
     41    $is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
     42        'button-inside' === $attributes['buttonPosition'];
     43    // Border color classes need to be applied to the elements that have a border color.
     44    $border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
     45
     46    $label_markup = sprintf(
     47        '<label for="%1$s" class="wp-block-search__label screen-reader-text">%2$s</label>',
     48        $input_id,
     49        empty( $attributes['label'] ) ? __( 'Search' ) : $attributes['label']
     50    );
     51    if ( $show_label && ! empty( $attributes['label'] ) ) {
     52        $label_markup = sprintf(
     53            '<label for="%1$s" class="wp-block-search__label">%2$s</label>',
     54            $input_id,
     55            $attributes['label']
     56        );
    5557    }
    5658
    5759    if ( $show_input ) {
    58         $input_markup = sprintf(
    59             '<input type="search" id="%s" class="wp-block-search__input" name="s" value="%s" placeholder="%s" %s required />',
     60        $input_classes = ! $is_button_inside ? $border_color_classes : '';
     61        $input_markup  = sprintf(
     62            '<input type="search" id="%s" class="wp-block-search__input %s" name="s" value="%s" placeholder="%s" %s required />',
    6063            $input_id,
     64            $input_classes,
    6165            esc_attr( get_search_query() ),
    6266            esc_attr( $attributes['placeholder'] ),
    63             $inline_styles['shared']
     67            $inline_styles['input']
    6468        );
    6569    }
    … …  
    6771    if ( $show_button ) {
    6872        $button_internal_markup = '';
    69         $button_classes         = '';
    70 
     73        $button_classes         = $color_classes;
     74
     75        if ( ! $is_button_inside ) {
     76            $button_classes .= ' ' . $border_color_classes;
     77        }
    7178        if ( ! $use_icon_button ) {
    7279            if ( ! empty( $attributes['buttonText'] ) ) {
    … …  
    7481            }
    7582        } else {
    76             $button_classes        .= 'has-icon';
     83            $button_classes        .= ' has-icon';
    7784            $button_internal_markup =
    7885                '<svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24">
    … …  
    8289
    8390        $button_markup = sprintf(
    84             '<button type="submit" class="wp-block-search__button %s"%s>%s</button>',
     91            '<button type="submit" class="wp-block-search__button %s" %s>%s</button>',
    8592            $button_classes,
    86             $inline_styles['shared'],
     93            $inline_styles['button'],
    8794            $button_internal_markup
    8895        );
    8996    }
    9097
    91     $field_markup       = sprintf(
    92         '<div class="wp-block-search__inside-wrapper"%s>%s</div>',
     98    $field_markup_classes = $is_button_inside ? $border_color_classes : '';
     99    $field_markup         = sprintf(
     100        '<div class="wp-block-search__inside-wrapper %s" %s>%s</div>',
     101        $field_markup_classes,
    93102        $inline_styles['wrapper'],
    94103        $input_markup . $button_markup
    95104    );
    96     $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
     105    $wrapper_attributes   = get_block_wrapper_attributes( array( 'class' => $classnames ) );
    97106
    98107    return sprintf(
    … …  
    170179 */
    171180function styles_for_block_core_search( $attributes ) {
    172     $shared_styles  = array();
    173181    $wrapper_styles = array();
     182    $button_styles  = array();
     183    $input_styles   = array();
    174184
    175185    // Add width styles.
    … …  
    189199
    190200    if ( $has_border_radius ) {
    191         // Shared style for button and input radius values.
     201        $default_padding = '4px';
    192202        $border_radius   = $attributes['style']['border']['radius'];
    193         $shared_styles[] = sprintf( 'border-radius: %spx;', esc_attr( $border_radius ) );
    194 
    195203        // Apply wrapper border radius if button placed inside.
    196         $button_inside = ! empty( $attributes['buttonPosition'] ) &&
     204        $is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
    197205            'button-inside' === $attributes['buttonPosition'];
    198206
    199         if ( $button_inside ) {
    200             // We adjust the border radius value for the outer wrapper element
    201             // to make it visually consistent with the radius applied to inner
    202             // elements.
    203             $default_padding  = 4;
    204             $adjusted_radius  = $border_radius + $default_padding;
    205             $wrapper_styles[] = sprintf( 'border-radius: %dpx;', esc_attr( $adjusted_radius ) );
    206         }
     207        if ( is_array( $border_radius ) ) {
     208            // Apply styles for individual corner border radii.
     209            foreach ( $border_radius as $key => $value ) {
     210                if ( null !== $value ) {
     211                    // Convert camelCase key to kebab-case.
     212                    $name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );
     213
     214                    // Add shared styles for individual border radii for input & button.
     215                    $border_style    = sprintf(
     216                        'border-%s-radius: %s;',
     217                        esc_attr( $name ),
     218                        esc_attr( $value )
     219                    );
     220                    $input_styles[]  = $border_style;
     221                    $button_styles[] = $border_style;
     222
     223                    // Add adjusted border radius styles for the wrapper element
     224                    // if button is positioned inside.
     225                    if ( $is_button_inside && intval( $value ) !== 0 ) {
     226                        $wrapper_styles[] = sprintf(
     227                            'border-%s-radius: calc(%s + %s);',
     228                            esc_attr( $name ),
     229                            esc_attr( $value ),
     230                            $default_padding
     231                        );
     232                    }
     233                }
     234            }
     235        } else {
     236            // Numeric check is for backwards compatibility purposes.
     237            $border_radius   = is_numeric( $border_radius ) ? $border_radius . 'px' : $border_radius;
     238            $border_style    = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
     239            $input_styles[]  = $border_style;
     240            $button_styles[] = $border_style;
     241
     242            if ( $is_button_inside && intval( $border_radius ) !== 0 ) {
     243                // Adjust wrapper border radii to maintain visual consistency
     244                // with inner elements when button is positioned inside.
     245                $wrapper_styles[] = sprintf(
     246                    'border-radius: calc(%s + %s);',
     247                    esc_attr( $border_radius ),
     248                    $default_padding
     249                );
     250            }
     251        }
     252    }
     253
     254    // Add border color styles.
     255    $has_border_color = ! empty( $attributes['style']['border']['color'] );
     256
     257    if ( $has_border_color ) {
     258        $border_color     = $attributes['style']['border']['color'];
     259        $is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
     260            'button-inside' === $attributes['buttonPosition'];
     261
     262        // Apply wrapper border color if button placed inside.
     263        if ( $is_button_inside ) {
     264            $wrapper_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
     265        } else {
     266            $button_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
     267            $input_styles[]  = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
     268        }
     269    }
     270
     271    // Add color styles.
     272    $has_text_color = ! empty( $attributes['style']['color']['text'] );
     273    if ( $has_text_color ) {
     274        $button_styles[] = sprintf( 'color: %s;', esc_attr( $attributes['style']['color']['text'] ) );
     275    }
     276
     277    $has_background_color = ! empty( $attributes['style']['color']['background'] );
     278    if ( $has_background_color ) {
     279        $button_styles[] = sprintf( 'background-color: %s;', esc_attr( $attributes['style']['color']['background'] ) );
     280    }
     281
     282    $has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] );
     283    if ( $has_custom_gradient ) {
     284        $button_styles[] = sprintf( 'background: %s;', $attributes['style']['color']['gradient'] );
    207285    }
    208286
    209287    return array(
    210         'shared'  => ! empty( $shared_styles ) ? sprintf( ' style="%s"', implode( ' ', $shared_styles ) ) : '',
     288        'input'   => ! empty( $input_styles ) ? sprintf( ' style="%s"', implode( ' ', $input_styles ) ) : '',
     289        'button'  => ! empty( $button_styles ) ? sprintf( ' style="%s"', implode( ' ', $button_styles ) ) : '',
    211290        'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', implode( ' ', $wrapper_styles ) ) : '',
    212291    );
    213292}
     293
     294/**
     295 * Returns border color classnames depending on whether there are named or custom border colors.
     296 *
     297 * @param array $attributes The block attributes.
     298 *
     299 * @return string The border color classnames to be applied to the block elements.
     300 */
     301function get_border_color_classes_for_block_core_search( $attributes ) {
     302    $has_custom_border_color = ! empty( $attributes['style']['border']['color'] );
     303    $border_color_classes    = ! empty( $attributes['borderColor'] ) ? sprintf( 'has-border-color has-%s-border-color', $attributes['borderColor'] ) : '';
     304    // If there's a border color style and no `borderColor` text string, we still want to add the generic `has-border-color` class name to the element.
     305    if ( $has_custom_border_color && empty( $attributes['borderColor'] ) ) {
     306        $border_color_classes = 'has-border-color';
     307    }
     308    return $border_color_classes;
     309}
     310
     311/**
     312 * Returns color classnames depending on whether there are named or custom text and background colors.
     313 *
     314 * @param array $attributes The block attributes.
     315 *
     316 * @return string The color classnames to be applied to the block elements.
     317 */
     318function get_color_classes_for_block_core_search( $attributes ) {
     319    $classnames = array();
     320
     321    // Text color.
     322    $has_named_text_color  = ! empty( $attributes['textColor'] );
     323    $has_custom_text_color = ! empty( $attributes['style']['color']['text'] );
     324    if ( $has_named_text_color ) {
     325        $classnames[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] );
     326    } elseif ( $has_custom_text_color ) {
     327        // If a custom 'textColor' was selected instead of a preset, still add the generic `has-text-color` class.
     328        $classnames[] = 'has-text-color';
     329    }
     330
     331    // Background color.
     332    $has_named_background_color  = ! empty( $attributes['backgroundColor'] );
     333    $has_custom_background_color = ! empty( $attributes['style']['color']['background'] );
     334    $has_named_gradient          = ! empty( $attributes['gradient'] );
     335    $has_custom_gradient         = ! empty( $attributes['style']['color']['gradient'] );
     336    if (
     337        $has_named_background_color ||
     338        $has_custom_background_color ||
     339        $has_named_gradient ||
     340        $has_custom_gradient
     341    ) {
     342        $classnames[] = 'has-background';
     343    }
     344    if ( $has_named_background_color ) {
     345        $classnames[] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] );
     346    }
     347    if ( $has_named_gradient ) {
     348        $classnames[] = sprintf( 'has-%s-gradient-background', $attributes['gradient'] );
     349    }
     350
     351    return implode( ' ', $classnames );
     352}
Note: See TracChangeset for help on using the changeset viewer.