diff -r be944660c56a -r 3d72ae0968f4 wp/wp-includes/blocks/search.php
--- a/wp/wp-includes/blocks/search.php Wed Sep 21 18:19:35 2022 +0200
+++ b/wp/wp-includes/blocks/search.php Tue Sep 27 16:37:53 2022 +0200
@@ -27,73 +27,87 @@
)
);
- $input_id = 'wp-block-search__input-' . ++$instance_id;
- $classnames = classnames_for_block_core_search( $attributes );
- $show_label = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
- $use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
- $show_input = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
- $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
- $label_markup = '';
- $input_markup = '';
- $button_markup = '';
- $inline_styles = styles_for_block_core_search( $attributes );
+ $input_id = 'wp-block-search__input-' . ++$instance_id;
+ $classnames = classnames_for_block_core_search( $attributes );
+ $show_label = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
+ $use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
+ $show_input = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
+ $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
+ $input_markup = '';
+ $button_markup = '';
+ $inline_styles = styles_for_block_core_search( $attributes );
+ $color_classes = get_color_classes_for_block_core_search( $attributes );
+ $is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
+ 'button-inside' === $attributes['buttonPosition'];
+ // Border color classes need to be applied to the elements that have a border color.
+ $border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
- if ( $show_label ) {
- if ( ! empty( $attributes['label'] ) ) {
- $label_markup = sprintf(
- '',
- $input_id,
- $attributes['label']
- );
- } else {
- $label_markup = sprintf(
- '',
- $input_id,
- __( 'Search' )
- );
- }
+ $label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
+
+ $label_markup = sprintf(
+ '',
+ esc_attr( $input_id ),
+ $label_inner_html
+ );
+ if ( $show_label && ! empty( $attributes['label'] ) ) {
+ $label_markup = sprintf(
+ '',
+ $input_id,
+ $label_inner_html
+ );
}
if ( $show_input ) {
- $input_markup = sprintf(
- '',
+ $input_classes = ! $is_button_inside ? $border_color_classes : '';
+ $input_markup = sprintf(
+ '',
$input_id,
+ esc_attr( $input_classes ),
esc_attr( get_search_query() ),
esc_attr( $attributes['placeholder'] ),
- $inline_styles['shared']
+ $inline_styles['input']
);
}
if ( $show_button ) {
$button_internal_markup = '';
- $button_classes = '';
+ $button_classes = $color_classes;
+ $aria_label = '';
+ if ( ! $is_button_inside ) {
+ $button_classes .= ' ' . $border_color_classes;
+ }
if ( ! $use_icon_button ) {
if ( ! empty( $attributes['buttonText'] ) ) {
- $button_internal_markup = $attributes['buttonText'];
+ $button_internal_markup = wp_kses_post( $attributes['buttonText'] );
}
} else {
- $button_classes .= 'has-icon';
+ $aria_label = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) );
+ $button_classes .= ' has-icon';
+
$button_internal_markup =
'';
+
+ ';
}
$button_markup = sprintf(
- '',
- $button_classes,
- $inline_styles['shared'],
+ '',
+ esc_attr( $button_classes ),
+ $inline_styles['button'],
+ $aria_label,
$button_internal_markup
);
}
- $field_markup = sprintf(
- '
%s
',
+ $field_markup_classes = $is_button_inside ? $border_color_classes : '';
+ $field_markup = sprintf(
+ '%s
',
+ esc_attr( $field_markup_classes ),
$inline_styles['wrapper'],
$input_markup . $button_markup
);
- $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
+ $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
return sprintf(
'',
@@ -169,8 +183,11 @@
* @return array Style HTML attribute.
*/
function styles_for_block_core_search( $attributes ) {
- $shared_styles = array();
- $wrapper_styles = array();
+ $wrapper_styles = array();
+ $button_styles = array();
+ $input_styles = array();
+ $is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
+ 'button-inside' === $attributes['buttonPosition'];
// Add width styles.
$has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
@@ -184,30 +201,168 @@
);
}
+ // Add border width styles.
+ $has_border_width = ! empty( $attributes['style']['border']['width'] );
+
+ if ( $has_border_width ) {
+ $border_width = $attributes['style']['border']['width'];
+
+ if ( $is_button_inside ) {
+ $wrapper_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
+ } else {
+ $button_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
+ $input_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
+ }
+ }
+
// Add border radius styles.
$has_border_radius = ! empty( $attributes['style']['border']['radius'] );
if ( $has_border_radius ) {
- // Shared style for button and input radius values.
+ $default_padding = '4px';
$border_radius = $attributes['style']['border']['radius'];
- $shared_styles[] = sprintf( 'border-radius: %spx;', esc_attr( $border_radius ) );
- // Apply wrapper border radius if button placed inside.
- $button_inside = ! empty( $attributes['buttonPosition'] ) &&
- 'button-inside' === $attributes['buttonPosition'];
+ if ( is_array( $border_radius ) ) {
+ // Apply styles for individual corner border radii.
+ foreach ( $border_radius as $key => $value ) {
+ if ( null !== $value ) {
+ // Convert camelCase key to kebab-case.
+ $name = strtolower( preg_replace( '/(? ! empty( $shared_styles ) ? sprintf( ' style="%s"', implode( ' ', $shared_styles ) ) : '',
- 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', implode( ' ', $wrapper_styles ) ) : '',
+ 'input' => ! empty( $input_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $input_styles ) ) ) : '',
+ 'button' => ! empty( $button_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $button_styles ) ) ) : '',
+ 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) : '',
);
}
+
+/**
+ * Returns border color classnames depending on whether there are named or custom border colors.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string The border color classnames to be applied to the block elements.
+ */
+function get_border_color_classes_for_block_core_search( $attributes ) {
+ $has_custom_border_color = ! empty( $attributes['style']['border']['color'] );
+ $border_color_classes = ! empty( $attributes['borderColor'] ) ? sprintf( 'has-border-color has-%s-border-color', $attributes['borderColor'] ) : '';
+ // 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.
+ if ( $has_custom_border_color && empty( $attributes['borderColor'] ) ) {
+ $border_color_classes = 'has-border-color';
+ }
+ return $border_color_classes;
+}
+
+/**
+ * Returns color classnames depending on whether there are named or custom text and background colors.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string The color classnames to be applied to the block elements.
+ */
+function get_color_classes_for_block_core_search( $attributes ) {
+ $classnames = array();
+
+ // Text color.
+ $has_named_text_color = ! empty( $attributes['textColor'] );
+ $has_custom_text_color = ! empty( $attributes['style']['color']['text'] );
+ if ( $has_named_text_color ) {
+ $classnames[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] );
+ } elseif ( $has_custom_text_color ) {
+ // If a custom 'textColor' was selected instead of a preset, still add the generic `has-text-color` class.
+ $classnames[] = 'has-text-color';
+ }
+
+ // Background color.
+ $has_named_background_color = ! empty( $attributes['backgroundColor'] );
+ $has_custom_background_color = ! empty( $attributes['style']['color']['background'] );
+ $has_named_gradient = ! empty( $attributes['gradient'] );
+ $has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] );
+ if (
+ $has_named_background_color ||
+ $has_custom_background_color ||
+ $has_named_gradient ||
+ $has_custom_gradient
+ ) {
+ $classnames[] = 'has-background';
+ }
+ if ( $has_named_background_color ) {
+ $classnames[] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] );
+ }
+ if ( $has_named_gradient ) {
+ $classnames[] = sprintf( 'has-%s-gradient-background', $attributes['gradient'] );
+ }
+
+ return implode( ' ', $classnames );
+}