From 24f7fbefacb7aea970059f127fd746ee8f171d3d Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Tue, 6 Jun 2023 11:01:51 -0400 Subject: [PATCH 1/3] Refactor to use tag processor for label, input, and button. --- packages/block-library/src/search/index.php | 90 +++++++++------------ 1 file changed, 40 insertions(+), 50 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index d125bacd1b51d8..7ab9f6e52687f2 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -33,10 +33,8 @@ function render_block_core_search( $attributes ) { $button_position = $show_button ? $attributes['buttonPosition'] : null; $query_params = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array(); $button_behavior = ( ! empty( $attributes['buttonBehavior'] ) ) ? $attributes['buttonBehavior'] : 'default'; - $input_markup = ''; - $button_markup = ''; - $input_aria = ''; - $button_aria = ''; + $input = ''; + $button = ''; $query_params_markup = ''; $inline_styles = styles_for_block_core_search( $attributes ); $color_classes = get_color_classes_for_block_core_search( $attributes ); @@ -47,29 +45,18 @@ function render_block_core_search( $attributes ) { $border_color_classes = get_border_color_classes_for_block_core_search( $attributes ); $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_classes = array( 'wp-block-search__label' ); - if ( ! empty( $typography_classes ) ) { - $label_classes[] = $typography_classes; + $label = new WP_HTML_Tag_Processor( sprintf( '', $inline_styles['label'], $label_inner_html ) ); + + if ( $label->next_tag() ) { + $label->set_attribute( 'for', $input_id ); + $label->add_class( 'wp-block-search__label' ); + if ( $show_label && ! empty( $attributes['label'] ) ) { + if ( ! empty( $typography_classes ) ) { + $label->add_class( $typography_classes ); + } + } else { + $label->add_class( 'screen-reader-text' ); } - $label_markup = sprintf( - '', - esc_attr( $input_id ), - esc_attr( implode( ' ', $label_classes ) ), - $inline_styles['label'], - $label_inner_html - ); - } - - if ( 'button-only' === $button_position && 'expand-searchfield' === $button_behavior ) { - $input_aria = 'aria-hidden="true" tabindex="-1"'; - wp_enqueue_script( 'wp-block--search-view', plugins_url( 'search/view.min.js', __FILE__ ) ); } $input_classes = array( 'wp-block-search__input' ); @@ -79,15 +66,18 @@ function render_block_core_search( $attributes ) { if ( ! empty( $typography_classes ) ) { $input_classes[] = $typography_classes; } - $input_markup = sprintf( - '', - $input_id, - esc_attr( implode( ' ', $input_classes ) ), - get_search_query(), - esc_attr( $attributes['placeholder'] ), - $inline_styles['input'], - $input_aria - ); + $input = new WP_HTML_Tag_Processor( sprintf( '', $inline_styles['input'] ) ); + if ( $input->next_tag() ) { + $input->set_attribute( 'id', $input_id ); + $input->set_attribute( 'class', implode( ' ', $input_classes ) ); + $input->set_attribute( 'value', get_search_query() ); + $input->set_attribute( 'placeholder', $attributes['placeholder'] ); + if ( 'button-only' === $button_position && 'expand-searchfield' === $button_behavior ) { + $input->set_attribute( 'aria-hidden', 'true' ); + $input->set_attribute( 'tabindex', '-1' ); + wp_enqueue_script( 'wp-block--search-view', plugins_url( 'search/view.min.js', __FILE__ ) ); + } + } if ( count( $query_params ) > 0 ) { foreach ( $query_params as $param => $value ) { @@ -117,27 +107,27 @@ function render_block_core_search( $attributes ) { $button_internal_markup = wp_kses_post( $attributes['buttonText'] ); } } else { - $button_aria = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) ); - $button_classes[] = 'has-icon'; - + $button_classes[] = 'has-icon'; $button_internal_markup = ' '; } - if ( 'expand-searchfield' === $attributes['buttonBehavior'] ) { - $button_aria = sprintf( 'aria-label="%s" aria-expanded="false" aria-controls="wp-block-search__input-%s"', __( 'Expand search field' ), esc_attr( $input_id ) ); - } // Include the button element class. $button_classes[] = wp_theme_get_element_class_name( 'button' ); - $button_markup = sprintf( - '', - esc_attr( implode( ' ', $button_classes ) ), - $inline_styles['button'], - $button_aria, - $button_internal_markup - ); + $button = new WP_HTML_Tag_Processor( sprintf( '', $inline_styles['button'], $button_internal_markup ) ); + + if ( $button->next_tag() ) { + $button->set_attribute( 'class', implode( ' ', $button_classes ) ); + if ( 'expand-searchfield' === $attributes['buttonBehavior'] ) { + $button->set_attribute( 'aria-label', __( 'Expand search field' ) ); + $button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id ); + $button->set_attribute( 'aria-expanded', 'false' ); + } else { + $button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) ); + } + } } $field_markup_classes = $is_button_inside ? $border_color_classes : ''; @@ -145,7 +135,7 @@ function render_block_core_search( $attributes ) { '
%s
', esc_attr( $field_markup_classes ), $inline_styles['wrapper'], - $input_markup . $query_params_markup . $button_markup + $input . $query_params_markup . $button ); $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) @@ -155,7 +145,7 @@ function render_block_core_search( $attributes ) { '
%s
', esc_url( home_url( '/' ) ), $wrapper_attributes, - $label_markup . $field_markup + $label . $field_markup ); } From a29298d5888bc0d52ee278fc28d931c14597e0df Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Tue, 6 Jun 2023 11:02:54 -0400 Subject: [PATCH 2/3] Fix searchLabel null bug. --- packages/block-library/src/search/view.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js index 6af84de23edcfa..0909121b25bf06 100644 --- a/packages/block-library/src/search/view.js +++ b/packages/block-library/src/search/view.js @@ -60,7 +60,9 @@ window.addEventListener( 'DOMContentLoaded', () => { searchButton.addEventListener( 'keydown', ( e ) => { hideSearchField( e ); } ); - searchLabel.addEventListener( 'click', handleButtonClick ); + if ( searchLabel ) { + searchLabel.addEventListener( 'click', handleButtonClick ); + } document.body.addEventListener( 'click', hideSearchField ); } ); } ); From 3124b38f46a3570a04bb96cd681b61f493ee704b Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Tue, 6 Jun 2023 11:51:35 -0400 Subject: [PATCH 3/3] Use add_class instead. --- packages/block-library/src/search/index.php | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 7ab9f6e52687f2..ce76587dbbb441 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -33,7 +33,6 @@ function render_block_core_search( $attributes ) { $button_position = $show_button ? $attributes['buttonPosition'] : null; $query_params = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array(); $button_behavior = ( ! empty( $attributes['buttonBehavior'] ) ) ? $attributes['buttonBehavior'] : 'default'; - $input = ''; $button = ''; $query_params_markup = ''; $inline_styles = styles_for_block_core_search( $attributes ); @@ -46,7 +45,6 @@ function render_block_core_search( $attributes ) { $label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] ); $label = new WP_HTML_Tag_Processor( sprintf( '', $inline_styles['label'], $label_inner_html ) ); - if ( $label->next_tag() ) { $label->set_attribute( 'for', $input_id ); $label->add_class( 'wp-block-search__label' ); @@ -59,6 +57,7 @@ function render_block_core_search( $attributes ) { } } + $input = new WP_HTML_Tag_Processor( sprintf( '', $inline_styles['input'] ) ); $input_classes = array( 'wp-block-search__input' ); if ( ! $is_button_inside && ! empty( $border_color_classes ) ) { $input_classes[] = $border_color_classes; @@ -66,10 +65,9 @@ function render_block_core_search( $attributes ) { if ( ! empty( $typography_classes ) ) { $input_classes[] = $typography_classes; } - $input = new WP_HTML_Tag_Processor( sprintf( '', $inline_styles['input'] ) ); if ( $input->next_tag() ) { + $input->add_class( implode( ' ', $input_classes ) ); $input->set_attribute( 'id', $input_id ); - $input->set_attribute( 'class', implode( ' ', $input_classes ) ); $input->set_attribute( 'value', get_search_query() ); $input->set_attribute( 'placeholder', $attributes['placeholder'] ); if ( 'button-only' === $button_position && 'expand-searchfield' === $button_behavior ) { @@ -119,8 +117,8 @@ function render_block_core_search( $attributes ) { $button = new WP_HTML_Tag_Processor( sprintf( '', $inline_styles['button'], $button_internal_markup ) ); if ( $button->next_tag() ) { - $button->set_attribute( 'class', implode( ' ', $button_classes ) ); - if ( 'expand-searchfield' === $attributes['buttonBehavior'] ) { + $button->add_class( implode( ' ', $button_classes ) ); + if ( 'expand-searchfield' === $attributes['buttonBehavior'] && 'button-only' === $attributes['buttonPosition'] ) { $button->set_attribute( 'aria-label', __( 'Expand search field' ) ); $button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id ); $button->set_attribute( 'aria-expanded', 'false' );