WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
11/08/2021 02:26:27 PM (5 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.