diff -r 34716fd837a4 -r be944660c56a wp/wp-includes/blocks/search.php --- a/wp/wp-includes/blocks/search.php Tue Dec 15 15:52:01 2020 +0100 +++ b/wp/wp-includes/blocks/search.php Wed Sep 21 18:19:35 2022 +0200 @@ -27,51 +27,79 @@ ) ); - $input_id = 'wp-block-search__input-' . ++$instance_id; - $label_markup = ''; - $button_markup = ''; + $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 ); - if ( ! empty( $attributes['label'] ) ) { - $label_markup = sprintf( - '', + if ( $show_label ) { + if ( ! empty( $attributes['label'] ) ) { + $label_markup = sprintf( + '', + $input_id, + $attributes['label'] + ); + } else { + $label_markup = sprintf( + '', + $input_id, + __( 'Search' ) + ); + } + } + + if ( $show_input ) { + $input_markup = sprintf( + '', $input_id, - $attributes['label'] - ); - } else { - $label_markup = sprintf( - '', - $input_id, - __( 'Search' ) + esc_attr( get_search_query() ), + esc_attr( $attributes['placeholder'] ), + $inline_styles['shared'] ); } - $input_markup = sprintf( - '', - $input_id, - esc_attr( get_search_query() ), - esc_attr( $attributes['placeholder'] ) - ); + if ( $show_button ) { + $button_internal_markup = ''; + $button_classes = ''; - if ( ! empty( $attributes['buttonText'] ) ) { + if ( ! $use_icon_button ) { + if ( ! empty( $attributes['buttonText'] ) ) { + $button_internal_markup = $attributes['buttonText']; + } + } else { + $button_classes .= 'has-icon'; + $button_internal_markup = + ' + + '; + } + $button_markup = sprintf( - '', - $attributes['buttonText'] + '', + $button_classes, + $inline_styles['shared'], + $button_internal_markup ); } - $class = 'wp-block-search'; - if ( isset( $attributes['className'] ) ) { - $class .= ' ' . $attributes['className']; - } - if ( isset( $attributes['align'] ) ) { - $class .= ' align' . $attributes['align']; - } + $field_markup = sprintf( + '
%s
', + $inline_styles['wrapper'], + $input_markup . $button_markup + ); + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); return sprintf( - '', - esc_attr( $class ), + '
%s
', esc_url( home_url( '/' ) ), - $label_markup . $input_markup . $button_markup + $wrapper_attributes, + $label_markup . $field_markup ); } @@ -87,3 +115,99 @@ ); } add_action( 'init', 'register_block_core_search' ); + +/** + * Builds the correct top level classnames for the 'core/search' block. + * + * @param array $attributes The block attributes. + * + * @return string The classnames used in the block. + */ +function classnames_for_block_core_search( $attributes ) { + $classnames = array(); + + if ( ! empty( $attributes['buttonPosition'] ) ) { + if ( 'button-inside' === $attributes['buttonPosition'] ) { + $classnames[] = 'wp-block-search__button-inside'; + } + + if ( 'button-outside' === $attributes['buttonPosition'] ) { + $classnames[] = 'wp-block-search__button-outside'; + } + + if ( 'no-button' === $attributes['buttonPosition'] ) { + $classnames[] = 'wp-block-search__no-button'; + } + + if ( 'button-only' === $attributes['buttonPosition'] ) { + $classnames[] = 'wp-block-search__button-only'; + } + } + + if ( isset( $attributes['buttonUseIcon'] ) ) { + if ( ! empty( $attributes['buttonPosition'] ) && 'no-button' !== $attributes['buttonPosition'] ) { + if ( $attributes['buttonUseIcon'] ) { + $classnames[] = 'wp-block-search__icon-button'; + } else { + $classnames[] = 'wp-block-search__text-button'; + } + } + } + + return implode( ' ', $classnames ); +} + +/** + * Builds an array of inline styles for the search block. + * + * The result will contain one entry for shared styles such as those for the + * inner input or button and a second for the inner wrapper should the block + * be positioning the button "inside". + * + * @param array $attributes The block attributes. + * + * @return array Style HTML attribute. + */ +function styles_for_block_core_search( $attributes ) { + $shared_styles = array(); + $wrapper_styles = array(); + + // Add width styles. + $has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ); + $button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition']; + + if ( $has_width && ! $button_only ) { + $wrapper_styles[] = sprintf( + 'width: %d%s;', + esc_attr( $attributes['width'] ), + esc_attr( $attributes['widthUnit'] ) + ); + } + + // Add border radius styles. + $has_border_radius = ! empty( $attributes['style']['border']['radius'] ); + + if ( $has_border_radius ) { + // Shared style for button and input radius values. + $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 ( $button_inside ) { + // We adjust the border radius value for the outer wrapper element + // to make it visually consistent with the radius applied to inner + // elements. + $default_padding = 4; + $adjusted_radius = $border_radius + $default_padding; + $wrapper_styles[] = sprintf( 'border-radius: %dpx;', esc_attr( $adjusted_radius ) ); + } + } + + return array( + 'shared' => ! empty( $shared_styles ) ? sprintf( ' style="%s"', implode( ' ', $shared_styles ) ) : '', + 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', implode( ' ', $wrapper_styles ) ) : '', + ); +}