From 6baab10ad0c22bd2cb5dfcf325abe8d00487339a Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Tue, 9 May 2023 14:59:36 -0400 Subject: [PATCH 01/22] Build docs. --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/search/block.json | 9 +++ packages/block-library/src/search/edit.js | 63 ++++++++++++++++++- packages/block-library/src/search/editor.scss | 6 ++ packages/block-library/src/search/index.php | 45 +++++++------ packages/block-library/src/search/style.scss | 40 ++++++++++++ packages/block-library/src/search/view.js | 61 ++++++++++++++++++ 7 files changed, 204 insertions(+), 22 deletions(-) create mode 100644 packages/block-library/src/search/view.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index e5d20bb7b1edd5..d4835f39dec222 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -726,7 +726,7 @@ Help visitors find your content. ([Source](https://github.com/WordPress/gutenber - **Name:** core/search - **Category:** widgets - **Supports:** align (center, left, right), anchor, color (background, gradients, text), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** buttonPosition, buttonText, buttonUseIcon, label, placeholder, query, showLabel, width, widthUnit +- **Attributes:** buttonBehavior, buttonPosition, buttonText, buttonUseIcon, isSearchFieldHidden, label, placeholder, query, showLabel, width, widthUnit ## Separator diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index 387295ebb36dea..3a6c2dd7e17bb5 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -42,6 +42,14 @@ "query": { "type": "object", "default": {} + }, + "buttonBehavior": { + "type": "string", + "default": "expand-searchfield" + }, + "isSearchFieldHidden": { + "type": "boolean", + "default": false } }, "supports": { @@ -83,6 +91,7 @@ }, "html": false }, + "viewScript": "file:./view.js", "editorStyle": "wp-block-search-editor", "style": "wp-block-search" } diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 5d82ced145926f..3afe7bdf6f8fcf 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -19,7 +19,7 @@ import { useSetting, } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; +import { useEffect, useRef } from '@wordpress/element'; import { ToolbarDropdownMenu, ToolbarGroup, @@ -59,6 +59,8 @@ import { // button is placed inside wrapper. const DEFAULT_INNER_PADDING = '4px'; +const BUTTON_BEHAVIOR_EXPAND = 'expand-searchfield'; + export default function SearchEdit( { className, attributes, @@ -77,6 +79,8 @@ export default function SearchEdit( { buttonText, buttonPosition, buttonUseIcon, + buttonBehavior, + isSearchFieldHidden, style, } = attributes; @@ -130,12 +134,32 @@ export default function SearchEdit( { const isButtonPositionOutside = 'button-outside' === buttonPosition; const hasNoButton = 'no-button' === buttonPosition; const hasOnlyButton = 'button-only' === buttonPosition; + const searchFieldRef = useRef(); + const buttonRef = useRef(); const units = useCustomUnits( { availableUnits: [ '%', 'px' ], defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT }, } ); + useEffect( () => { + if ( hasOnlyButton && ! isSelected ) { + setAttributes( { + isSearchFieldHidden: true, + } ); + } + }, [ isSelected ] ); + + useEffect( () => { + if ( hasOnlyButton || ! isSelected ) { + return; + } + + setAttributes( { + isSearchFieldHidden: false, + } ); + }, [ width ] ); + const getBlockClassNames = () => { return classnames( className, @@ -152,6 +176,12 @@ export default function SearchEdit( { : undefined, buttonUseIcon && ! hasNoButton ? 'wp-block-search__icon-button' + : undefined, + hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior + ? 'wp-block-search__button-behavior-expand' + : undefined, + hasOnlyButton && isSearchFieldHidden + ? 'wp-block-search__searchfield-hidden' : undefined ); }; @@ -165,6 +195,7 @@ export default function SearchEdit( { onClick: () => { setAttributes( { buttonPosition: 'button-outside', + isSearchFieldHidden: false, } ); }, }, @@ -176,6 +207,7 @@ export default function SearchEdit( { onClick: () => { setAttributes( { buttonPosition: 'button-inside', + isSearchFieldHidden: false, } ); }, }, @@ -187,6 +219,19 @@ export default function SearchEdit( { onClick: () => { setAttributes( { buttonPosition: 'no-button', + isSearchFieldHidden: false, + } ); + }, + }, + { + role: 'menuitemradio', + title: __( 'Button Only' ), + isActive: buttonPosition === 'button-only', + icon: buttonOnly, + onClick: () => { + setAttributes( { + buttonPosition: 'button-only', + isSearchFieldHidden: true, } ); }, }, @@ -247,6 +292,7 @@ export default function SearchEdit( { onChange={ ( event ) => setAttributes( { placeholder: event.target.value } ) } + ref={ searchFieldRef } /> ); }; @@ -268,6 +314,13 @@ export default function SearchEdit( { ? { borderRadius } : borderProps.style ), }; + const handleButtonClick = () => { + if ( hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior ) { + setAttributes( { + isSearchFieldHidden: ! isSearchFieldHidden, + } ); + } + }; return ( <> @@ -281,6 +334,8 @@ export default function SearchEdit( { ? stripHTML( buttonText ) : __( 'Search' ) } + onClick={ handleButtonClick } + ref={ buttonRef } > @@ -297,6 +352,7 @@ export default function SearchEdit( { onChange={ ( html ) => setAttributes( { buttonText: html } ) } + onClick={ handleButtonClick } /> ) } @@ -516,14 +572,15 @@ export default function SearchEdit( { } } showHandle={ isSelected } > - { ( isButtonPositionInside || isButtonPositionOutside ) && ( + { ( isButtonPositionInside || + isButtonPositionOutside || + hasOnlyButton ) && ( <> { renderTextField() } { renderButton() } ) } - { hasOnlyButton && renderButton() } { hasNoButton && renderTextField() } diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss index 381e009d5ee07c..655f587fa1a89f 100644 --- a/packages/block-library/src/search/editor.scss +++ b/packages/block-library/src/search/editor.scss @@ -18,4 +18,10 @@ &__components-button-group { margin-top: 10px; } + + &.wp-block-search__button-behavior-expand { + .wp-block-search__input { + transition-duration: 300ms; + } + } } diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index f42622551fc562..c91aa0617b1545 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -29,7 +29,6 @@ function render_block_core_search( $attributes ) { $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; $query_params = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array(); $input_markup = ''; @@ -64,23 +63,21 @@ function render_block_core_search( $attributes ) { ); } - if ( $show_input ) { - $input_classes = array( 'wp-block-search__input' ); - if ( ! $is_button_inside && ! empty( $border_color_classes ) ) { - $input_classes[] = $border_color_classes; - } - 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_classes = array( 'wp-block-search__input' ); + if ( ! $is_button_inside && ! empty( $border_color_classes ) ) { + $input_classes[] = $border_color_classes; + } + 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'] + ); if ( count( $query_params ) > 0 ) { foreach ( $query_params as $param => $value ) { @@ -142,6 +139,13 @@ function render_block_core_search( $attributes ) { array( 'class' => $classnames ) ); + + if ( ! empty( $attributes['buttonPosition'] ) && ! empty( $attributes['buttonBehavior'] ) ) { + if ( 'button-only' === $attributes['buttonPosition'] && 'expand-searchfield' === $attributes['buttonBehavior'] ) { + wp_enqueue_script( 'wp-block--search-view', plugins_url( 'search/view.min.js', __FILE__ ) ); + } + } + return sprintf( '
%s
', esc_url( home_url( '/' ) ), @@ -188,6 +192,11 @@ function classnames_for_block_core_search( $attributes ) { if ( 'button-only' === $attributes['buttonPosition'] ) { $classnames[] = 'wp-block-search__button-only'; + if ( ! empty( $attributes['buttonBehavior'] ) ) { + if ( 'expand-searchfield' === $attributes['buttonBehavior'] ) { + $classnames[] = 'wp-block-search__button-behavior-expand'; + } + } } } @@ -297,7 +306,7 @@ function styles_for_block_core_search( $attributes ) { $has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ); $button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition']; - if ( $has_width && ! $button_only ) { + if ( $has_width ) { $wrapper_styles[] = sprintf( 'width: %d%s;', esc_attr( $attributes['width'] ), diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 6f6c550dacbc15..844ced269d9682 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -81,3 +81,43 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px .wp-block-search.aligncenter .wp-block-search__inside-wrapper { margin: auto; } + +.wp-block-search__button-behavior-expand { + .wp-block-search__inside-wrapper { + transition-property: width; + min-width: 0 !important; + } + + .wp-block-search__input { + transition-property: all; + transition-duration: 0; + flex-basis: 100%; + } + + // !important here to override inline styles on button only deselected view. + &.wp-block-search__searchfield-hidden { + overflow: hidden; + + .wp-block-search__inside-wrapper { + overflow: hidden; + } + + .wp-block-search__input { + width: 0 !important; + min-width: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + border-left-width: 0 !important; + border-right-width: 0 !important; + flex-grow: 0; + margin: 0; + flex-basis: 0; + } + } +} + +.wp-block[data-align="right"] .wp-block-search__button-behavior-expand { + .wp-block-search__inside-wrapper { + float: right; + } +} diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js new file mode 100644 index 00000000000000..92e43cb8bd0e64 --- /dev/null +++ b/packages/block-library/src/search/view.js @@ -0,0 +1,61 @@ +window.addEventListener( 'DOMContentLoaded', () => { + const transitionDuration = 300; + const hiddenClass = 'wp-block-search__searchfield-hidden'; + const wrapperClass = '.wp-block-search__inside-wrapper'; + const buttonClass = '.wp-block-search__button'; + + Array.from( + document.getElementsByClassName( + 'wp-block-search__button-behavior-expand' + ) + ).forEach( ( block ) => { + const wrapper = block.querySelector( wrapperClass ); + const searchField = block.querySelector( '.wp-block-search__input' ); + const button = block.querySelector( buttonClass ); + + // Hide search on init. + block.classList.add( hiddenClass ); + setTimeout( + () => + ( searchField.style.transitionDuration = `${ transitionDuration }ms` ), + transitionDuration + ); + + const toggleSearchField = ( e ) => { + if ( e.target !== button && ! e.target.closest( buttonClass ) ) { + return false; + } + + e.preventDefault(); + + return block.classList.contains( hiddenClass ) + ? doShowSearchField() + : doHideSearchField(); + }; + + const doShowSearchField = () => { + block.classList.remove( hiddenClass ); + searchField.focus(); + + wrapper.removeEventListener( 'click', toggleSearchField ); + document.body.addEventListener( 'click', doSearch ); + }; + + const doHideSearchField = () => { + block.classList.add( hiddenClass ); + }; + + const doSearch = ( e ) => { + if ( e.target.closest( wrapperClass ) ) { + return false; + } + + doHideSearchField(); + + document.body.removeEventListener( 'click', doSearch ); + wrapper.addEventListener( 'click', toggleSearchField ); + }; + + wrapper.addEventListener( 'click', toggleSearchField ); + } ); +} ); From eccace1ebba39e56eb6c47065539e4da971280b1 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Wed, 10 May 2023 09:20:10 -0400 Subject: [PATCH 02/22] Fix lint errors. --- packages/block-library/src/search/index.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index c91aa0617b1545..ffe7ca857e46d5 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -139,7 +139,6 @@ function render_block_core_search( $attributes ) { array( 'class' => $classnames ) ); - if ( ! empty( $attributes['buttonPosition'] ) && ! empty( $attributes['buttonBehavior'] ) ) { if ( 'button-only' === $attributes['buttonPosition'] && 'expand-searchfield' === $attributes['buttonBehavior'] ) { wp_enqueue_script( 'wp-block--search-view', plugins_url( 'search/view.min.js', __FILE__ ) ); @@ -304,7 +303,6 @@ function styles_for_block_core_search( $attributes ) { // Add width styles. $has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ); - $button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition']; if ( $has_width ) { $wrapper_styles[] = sprintf( From b97611804ba3c715b932065e0bbd7f58ab97d364 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Wed, 10 May 2023 12:16:24 -0400 Subject: [PATCH 03/22] Fix php lint. --- packages/block-library/src/search/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index ffe7ca857e46d5..e5f254700aaab7 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -302,7 +302,7 @@ function styles_for_block_core_search( $attributes ) { $show_label = ( isset( $attributes['showLabel'] ) ) && false !== $attributes['showLabel']; // Add width styles. - $has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ); + $has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ); if ( $has_width ) { $wrapper_styles[] = sprintf( From 73176c118e8098413b5880557930b4a57e1446a6 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 11 May 2023 16:12:35 -0400 Subject: [PATCH 04/22] Remove duplicate call to view script. --- packages/block-library/src/search/block.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index 3a6c2dd7e17bb5..c3e63556c3ff42 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -91,7 +91,6 @@ }, "html": false }, - "viewScript": "file:./view.js", "editorStyle": "wp-block-search-editor", "style": "wp-block-search" } From 0cb5ef222e370ea31f0369abf46ad5067449af69 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Fri, 12 May 2023 09:45:07 -0400 Subject: [PATCH 05/22] List all dependencies in useEffect calls. --- packages/block-library/src/search/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 3afe7bdf6f8fcf..1a3d10323952bc 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -148,7 +148,7 @@ export default function SearchEdit( { isSearchFieldHidden: true, } ); } - }, [ isSelected ] ); + }, [ hasOnlyButton, isSelected, setAttributes ] ); useEffect( () => { if ( hasOnlyButton || ! isSelected ) { @@ -158,7 +158,7 @@ export default function SearchEdit( { setAttributes( { isSearchFieldHidden: false, } ); - }, [ width ] ); + }, [ hasOnlyButton, isSelected, setAttributes, width ] ); const getBlockClassNames = () => { return classnames( From 7f2869a000a4da38bd0f361f7663c02bb261d69e Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Fri, 12 May 2023 09:56:20 -0400 Subject: [PATCH 06/22] Add isSearchFieldHidden and buttonBehavior attributes to fixtures. --- test/integration/fixtures/blocks/core__search.json | 4 +++- .../fixtures/blocks/core__search__custom-text.json | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/test/integration/fixtures/blocks/core__search.json b/test/integration/fixtures/blocks/core__search.json index 7b6125b5016b37..f692eac10993d8 100644 --- a/test/integration/fixtures/blocks/core__search.json +++ b/test/integration/fixtures/blocks/core__search.json @@ -7,7 +7,9 @@ "placeholder": "", "buttonPosition": "button-outside", "buttonUseIcon": false, - "query": {} + "query": {}, + "buttonBehavior": "expand-searchfield", + "isSearchFieldHidden": false }, "innerBlocks": [] } diff --git a/test/integration/fixtures/blocks/core__search__custom-text.json b/test/integration/fixtures/blocks/core__search__custom-text.json index 6e874946117966..c763cb60f65e86 100644 --- a/test/integration/fixtures/blocks/core__search__custom-text.json +++ b/test/integration/fixtures/blocks/core__search__custom-text.json @@ -9,7 +9,9 @@ "buttonText": "Custom button text", "buttonPosition": "button-outside", "buttonUseIcon": false, - "query": {} + "query": {}, + "buttonBehavior": "expand-searchfield", + "isSearchFieldHidden": false }, "innerBlocks": [] } From 223c2d27ecb2f533d2af5c5ea3a031ab8a43280f Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Fri, 12 May 2023 10:46:47 -0400 Subject: [PATCH 07/22] Allow input to expand on button focus and clean up CSS. --- packages/block-library/src/search/style.scss | 3 +-- packages/block-library/src/search/view.js | 9 +++------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 844ced269d9682..1e813d9cf6f16a 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -89,8 +89,7 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px } .wp-block-search__input { - transition-property: all; - transition-duration: 0; + transition-duration: 300ms; flex-basis: 100%; } diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js index 92e43cb8bd0e64..c77646587ce871 100644 --- a/packages/block-library/src/search/view.js +++ b/packages/block-library/src/search/view.js @@ -1,5 +1,4 @@ window.addEventListener( 'DOMContentLoaded', () => { - const transitionDuration = 300; const hiddenClass = 'wp-block-search__searchfield-hidden'; const wrapperClass = '.wp-block-search__inside-wrapper'; const buttonClass = '.wp-block-search__button'; @@ -15,11 +14,6 @@ window.addEventListener( 'DOMContentLoaded', () => { // Hide search on init. block.classList.add( hiddenClass ); - setTimeout( - () => - ( searchField.style.transitionDuration = `${ transitionDuration }ms` ), - transitionDuration - ); const toggleSearchField = ( e ) => { if ( e.target !== button && ! e.target.closest( buttonClass ) ) { @@ -38,6 +32,7 @@ window.addEventListener( 'DOMContentLoaded', () => { searchField.focus(); wrapper.removeEventListener( 'click', toggleSearchField ); + button.removeEventListener( 'focus', toggleSearchField ); document.body.addEventListener( 'click', doSearch ); }; @@ -54,8 +49,10 @@ window.addEventListener( 'DOMContentLoaded', () => { document.body.removeEventListener( 'click', doSearch ); wrapper.addEventListener( 'click', toggleSearchField ); + button.addEventListener( 'focus', toggleSearchField ); }; wrapper.addEventListener( 'click', toggleSearchField ); + button.addEventListener( 'focus', toggleSearchField ); } ); } ); From 48b7ba37e18fb6f4563f172fd08e40fedf13c13e Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 15 May 2023 12:13:58 -0400 Subject: [PATCH 08/22] Add hidden class on initial block rendering. --- packages/block-library/src/search/index.php | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index e5f254700aaab7..7ae0a5763c44b8 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -191,10 +191,8 @@ function classnames_for_block_core_search( $attributes ) { if ( 'button-only' === $attributes['buttonPosition'] ) { $classnames[] = 'wp-block-search__button-only'; - if ( ! empty( $attributes['buttonBehavior'] ) ) { - if ( 'expand-searchfield' === $attributes['buttonBehavior'] ) { - $classnames[] = 'wp-block-search__button-behavior-expand'; - } + if ( ! empty( $attributes['buttonBehavior'] ) && 'expand-searchfield' === $attributes['buttonBehavior'] ) { + $classnames[] = 'wp-block-search__button-behavior-expand wp-block-search__searchfield-hidden'; } } } From cc7bf1bb284d5f95115bc98c577268f10d11270d Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 15 May 2023 12:52:24 -0400 Subject: [PATCH 09/22] Remove unneeded CSS. --- packages/block-library/src/search/editor.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss index 655f587fa1a89f..381e009d5ee07c 100644 --- a/packages/block-library/src/search/editor.scss +++ b/packages/block-library/src/search/editor.scss @@ -18,10 +18,4 @@ &__components-button-group { margin-top: 10px; } - - &.wp-block-search__button-behavior-expand { - .wp-block-search__input { - transition-duration: 300ms; - } - } } From 05ba9a5b83479fc4e5cde9f4b67281d5cd03a0cd Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 15 May 2023 12:53:11 -0400 Subject: [PATCH 10/22] Allow focus and blur to toggle search field, and simplify logic. --- packages/block-library/src/search/view.js | 22 +++------------------- 1 file changed, 3 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js index c77646587ce871..5f092da50c1d9b 100644 --- a/packages/block-library/src/search/view.js +++ b/packages/block-library/src/search/view.js @@ -12,9 +12,6 @@ window.addEventListener( 'DOMContentLoaded', () => { const searchField = block.querySelector( '.wp-block-search__input' ); const button = block.querySelector( buttonClass ); - // Hide search on init. - block.classList.add( hiddenClass ); - const toggleSearchField = ( e ) => { if ( e.target !== button && ! e.target.closest( buttonClass ) ) { return false; @@ -32,27 +29,14 @@ window.addEventListener( 'DOMContentLoaded', () => { searchField.focus(); wrapper.removeEventListener( 'click', toggleSearchField ); - button.removeEventListener( 'focus', toggleSearchField ); - document.body.addEventListener( 'click', doSearch ); + button.addEventListener( 'blur', toggleSearchField ); + document.body.addEventListener( 'click', doHideSearchField ); }; const doHideSearchField = () => { block.classList.add( hiddenClass ); }; - const doSearch = ( e ) => { - if ( e.target.closest( wrapperClass ) ) { - return false; - } - - doHideSearchField(); - - document.body.removeEventListener( 'click', doSearch ); - wrapper.addEventListener( 'click', toggleSearchField ); - button.addEventListener( 'focus', toggleSearchField ); - }; - - wrapper.addEventListener( 'click', toggleSearchField ); - button.addEventListener( 'focus', toggleSearchField ); + searchField.addEventListener( 'focus', doShowSearchField ); } ); } ); From b028cbbb12801580812ef24138e866e3f327196e Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Wed, 17 May 2023 15:24:27 -0400 Subject: [PATCH 11/22] Handle keyboard navigation, event handling, and refactor. --- packages/block-library/src/search/view.js | 55 ++++++++++++++--------- 1 file changed, 33 insertions(+), 22 deletions(-) diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js index 5f092da50c1d9b..7afb45930598e4 100644 --- a/packages/block-library/src/search/view.js +++ b/packages/block-library/src/search/view.js @@ -1,42 +1,53 @@ window.addEventListener( 'DOMContentLoaded', () => { const hiddenClass = 'wp-block-search__searchfield-hidden'; - const wrapperClass = '.wp-block-search__inside-wrapper'; - const buttonClass = '.wp-block-search__button'; Array.from( document.getElementsByClassName( 'wp-block-search__button-behavior-expand' ) ).forEach( ( block ) => { - const wrapper = block.querySelector( wrapperClass ); const searchField = block.querySelector( '.wp-block-search__input' ); - const button = block.querySelector( buttonClass ); + const searchButton = block.querySelector( '.wp-block-search__button' ); + const activeElement = block.ownerDocument.activeElement; - const toggleSearchField = ( e ) => { - if ( e.target !== button && ! e.target.closest( buttonClass ) ) { - return false; + const toggleSearchField = ( showSearchField ) => { + if ( showSearchField ) { + return block.classList.remove( hiddenClass ); } - e.preventDefault(); - - return block.classList.contains( hiddenClass ) - ? doShowSearchField() - : doHideSearchField(); + return block.classList.add( hiddenClass ); }; - const doShowSearchField = () => { - block.classList.remove( hiddenClass ); - searchField.focus(); - - wrapper.removeEventListener( 'click', toggleSearchField ); - button.addEventListener( 'blur', toggleSearchField ); - document.body.addEventListener( 'click', doHideSearchField ); + const hideSearchField = ( e ) => { + if ( + e.type === 'blur' && + ( e.relatedTarget !== searchButton || + e.target === searchButton ) + ) { + return toggleSearchField( false ); + } + if ( + ! e.target.closest( '.wp-block-search__inside-wrapper' ) && + activeElement !== searchButton && + activeElement !== searchField + ) { + return toggleSearchField( false ); + } }; - const doHideSearchField = () => { - block.classList.add( hiddenClass ); + const handleButtonClick = ( e ) => { + if ( block.classList.contains( hiddenClass ) ) { + e.preventDefault(); + searchField.focus(); + } }; - searchField.addEventListener( 'focus', doShowSearchField ); + searchField.addEventListener( 'focus', () => + toggleSearchField( true ) + ); + searchField.addEventListener( 'blur', hideSearchField ); + searchButton.addEventListener( 'click', handleButtonClick ); + searchButton.addEventListener( 'blur', hideSearchField ); + document.body.addEventListener( 'click', hideSearchField ); } ); } ); From a76970121263db8420b3deca96bdeb11899eddc9 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 22 May 2023 15:56:26 -0400 Subject: [PATCH 12/22] Escape to close input, and do not allow focus to expand invisible element. --- packages/block-library/src/search/view.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js index 7afb45930598e4..62840c8ce8f59f 100644 --- a/packages/block-library/src/search/view.js +++ b/packages/block-library/src/search/view.js @@ -19,13 +19,6 @@ window.addEventListener( 'DOMContentLoaded', () => { }; const hideSearchField = ( e ) => { - if ( - e.type === 'blur' && - ( e.relatedTarget !== searchButton || - e.target === searchButton ) - ) { - return toggleSearchField( false ); - } if ( ! e.target.closest( '.wp-block-search__inside-wrapper' ) && activeElement !== searchButton && @@ -33,21 +26,26 @@ window.addEventListener( 'DOMContentLoaded', () => { ) { return toggleSearchField( false ); } + + if ( e.key === 'Escape' ) { + searchButton.focus(); + return toggleSearchField( false ); + } }; const handleButtonClick = ( e ) => { if ( block.classList.contains( hiddenClass ) ) { e.preventDefault(); searchField.focus(); + toggleSearchField( true ); } }; - searchField.addEventListener( 'focus', () => - toggleSearchField( true ) - ); searchField.addEventListener( 'blur', hideSearchField ); + searchField.addEventListener( 'keydown', ( e ) => { + hideSearchField( e ); + } ); searchButton.addEventListener( 'click', handleButtonClick ); - searchButton.addEventListener( 'blur', hideSearchField ); document.body.addEventListener( 'click', hideSearchField ); } ); } ); From 3a5c81af6ce638b0c891f368b99e2098eecd4634 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 22 May 2023 16:20:52 -0400 Subject: [PATCH 13/22] Add aria attributes to describe hidden / expanded states. --- packages/block-library/src/search/index.php | 22 ++++++++++++--------- packages/block-library/src/search/view.js | 5 +++++ 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 7ae0a5763c44b8..7d18d6b961535f 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -63,6 +63,14 @@ function render_block_core_search( $attributes ) { ); } + if ( ! empty( $attributes['buttonPosition'] ) && ! empty( $attributes['buttonBehavior'] ) ) { + if ( 'button-only' === $attributes['buttonPosition'] && 'expand-searchfield' === $attributes['buttonBehavior'] ) { + $aria_hidden = 'aria-hidden="true"'; + $aria_expanded = sprintf( ' aria-expanded="false" aria-controls="wp-block-search__input-%s"', esc_attr( $input_id ) ); + wp_enqueue_script( 'wp-block--search-view', plugins_url( 'search/view.min.js', __FILE__ ) ); + } + } + $input_classes = array( 'wp-block-search__input' ); if ( ! $is_button_inside && ! empty( $border_color_classes ) ) { $input_classes[] = $border_color_classes; @@ -71,12 +79,13 @@ function render_block_core_search( $attributes ) { $input_classes[] = $typography_classes; } $input_markup = sprintf( - '', + '', $input_id, esc_attr( implode( ' ', $input_classes ) ), get_search_query(), esc_attr( $attributes['placeholder'] ), - $inline_styles['input'] + $inline_styles['input'], + $aria_hidden ); if ( count( $query_params ) > 0 ) { @@ -119,11 +128,12 @@ function render_block_core_search( $attributes ) { // Include the button element class. $button_classes[] = wp_theme_get_element_class_name( 'button' ); + $aria_attributes = $aria_label .= $aria_expanded; $button_markup = sprintf( '', esc_attr( implode( ' ', $button_classes ) ), $inline_styles['button'], - $aria_label, + $aria_label .= $aria_expanded, $button_internal_markup ); } @@ -139,12 +149,6 @@ function render_block_core_search( $attributes ) { array( 'class' => $classnames ) ); - if ( ! empty( $attributes['buttonPosition'] ) && ! empty( $attributes['buttonBehavior'] ) ) { - if ( 'button-only' === $attributes['buttonPosition'] && 'expand-searchfield' === $attributes['buttonBehavior'] ) { - wp_enqueue_script( 'wp-block--search-view', plugins_url( 'search/view.min.js', __FILE__ ) ); - } - } - return sprintf( '
%s
', esc_url( home_url( '/' ) ), diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js index 62840c8ce8f59f..66910f459c81fb 100644 --- a/packages/block-library/src/search/view.js +++ b/packages/block-library/src/search/view.js @@ -12,9 +12,14 @@ window.addEventListener( 'DOMContentLoaded', () => { const toggleSearchField = ( showSearchField ) => { if ( showSearchField ) { + searchField.setAttribute( 'aria-hidden', 'false' ); + searchButton.setAttribute( 'aria-expanded', 'true' ); + return block.classList.remove( hiddenClass ); } + searchField.setAttribute( 'aria-hidden', 'true' ); + searchButton.setAttribute( 'aria-expanded', 'false' ); return block.classList.add( hiddenClass ); }; From 9282f832ced0fa673c9be68cd8db155cc30c7305 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 22 May 2023 16:23:59 -0400 Subject: [PATCH 14/22] Fix lint warnings. --- packages/block-library/src/search/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 7d18d6b961535f..69726318d7c2a9 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -133,7 +133,7 @@ function render_block_core_search( $attributes ) { '', esc_attr( implode( ' ', $button_classes ) ), $inline_styles['button'], - $aria_label .= $aria_expanded, + $aria_attributes, $button_internal_markup ); } From 41946f543899aab988780220354c1307b0beb693 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 22 May 2023 16:55:11 -0400 Subject: [PATCH 15/22] Fix php warnings. --- packages/block-library/src/search/index.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 69726318d7c2a9..b3820097849acd 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -63,6 +63,8 @@ function render_block_core_search( $attributes ) { ); } + $aria_hidden = ''; + $aria_expanded = ''; if ( ! empty( $attributes['buttonPosition'] ) && ! empty( $attributes['buttonBehavior'] ) ) { if ( 'button-only' === $attributes['buttonPosition'] && 'expand-searchfield' === $attributes['buttonBehavior'] ) { $aria_hidden = 'aria-hidden="true"'; From 919117f6a58f7b3ec9be83904dcd8172ea3f0018 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 22 May 2023 17:44:08 -0400 Subject: [PATCH 16/22] Add and remove relevant ARIA attributes when input state changes. --- packages/block-library/src/search/index.php | 9 ++++++--- packages/block-library/src/search/view.js | 9 ++++++++- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index b3820097849acd..82886f993fe572 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -63,10 +63,12 @@ function render_block_core_search( $attributes ) { ); } - $aria_hidden = ''; + $aria_label = ''; + $aria_hidden = ''; $aria_expanded = ''; if ( ! empty( $attributes['buttonPosition'] ) && ! empty( $attributes['buttonBehavior'] ) ) { if ( 'button-only' === $attributes['buttonPosition'] && 'expand-searchfield' === $attributes['buttonBehavior'] ) { + $aria_label = sprintf( 'aria-label="%s"', __( 'Expand search form' ) ); $aria_hidden = 'aria-hidden="true"'; $aria_expanded = sprintf( ' aria-expanded="false" aria-controls="wp-block-search__input-%s"', esc_attr( $input_id ) ); wp_enqueue_script( 'wp-block--search-view', plugins_url( 'search/view.min.js', __FILE__ ) ); @@ -109,7 +111,6 @@ function render_block_core_search( $attributes ) { if ( ! empty( $typography_classes ) ) { $button_classes[] = $typography_classes; } - $aria_label = ''; if ( ! $is_button_inside && ! empty( $border_color_classes ) ) { $button_classes[] = $border_color_classes; @@ -119,7 +120,9 @@ function render_block_core_search( $attributes ) { $button_internal_markup = wp_kses_post( $attributes['buttonText'] ); } } else { - $aria_label = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) ); + if ( 'expand-searchfield' != $attributes['buttonBehavior'] ) { + $aria_label = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) ); + } $button_classes[] = 'has-icon'; $button_internal_markup = diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js index 66910f459c81fb..2c780dfa996b03 100644 --- a/packages/block-library/src/search/view.js +++ b/packages/block-library/src/search/view.js @@ -10,16 +10,23 @@ window.addEventListener( 'DOMContentLoaded', () => { const searchButton = block.querySelector( '.wp-block-search__button' ); const activeElement = block.ownerDocument.activeElement; + const ariaLabel = searchButton.getAttribute( 'aria-label' ); + const id = searchField.getAttribute( 'id' ); + const toggleSearchField = ( showSearchField ) => { if ( showSearchField ) { searchField.setAttribute( 'aria-hidden', 'false' ); - searchButton.setAttribute( 'aria-expanded', 'true' ); + searchButton.removeAttribute( 'aria-expanded' ); + searchButton.removeAttribute( 'aria-controls' ); + searchButton.removeAttribute( 'aria-label' ); return block.classList.remove( hiddenClass ); } searchField.setAttribute( 'aria-hidden', 'true' ); searchButton.setAttribute( 'aria-expanded', 'false' ); + searchButton.setAttribute( 'aria-controls', id ); + searchButton.setAttribute( 'aria-label', ariaLabel ); return block.classList.add( hiddenClass ); }; From 18603602c62676d2b332ce6c5c932e0b34b85e7f Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Mon, 22 May 2023 17:49:45 -0400 Subject: [PATCH 17/22] Make strict comparison. --- packages/block-library/src/search/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 82886f993fe572..be51581ab81867 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -120,7 +120,7 @@ function render_block_core_search( $attributes ) { $button_internal_markup = wp_kses_post( $attributes['buttonText'] ); } } else { - if ( 'expand-searchfield' != $attributes['buttonBehavior'] ) { + if ( 'expand-searchfield' !== $attributes['buttonBehavior'] ) { $aria_label = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) ); } $button_classes[] = 'has-icon'; From c3b84f59079a939785a4d1734636f6b0a5368438 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Tue, 23 May 2023 10:57:43 -0400 Subject: [PATCH 18/22] Clean up aria and take input out of taborder by default. --- packages/block-library/src/search/index.php | 29 +++++++++------------ packages/block-library/src/search/view.js | 4 ++- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index be51581ab81867..3dc781ff8d2f10 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -30,9 +30,13 @@ function render_block_core_search( $attributes ) { $show_label = ( ! empty( $attributes['showLabel'] ) ) ? true : false; $use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false; $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true; + $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 = ''; $query_params_markup = ''; $inline_styles = styles_for_block_core_search( $attributes ); $color_classes = get_color_classes_for_block_core_search( $attributes ); @@ -63,16 +67,9 @@ function render_block_core_search( $attributes ) { ); } - $aria_label = ''; - $aria_hidden = ''; - $aria_expanded = ''; - if ( ! empty( $attributes['buttonPosition'] ) && ! empty( $attributes['buttonBehavior'] ) ) { - if ( 'button-only' === $attributes['buttonPosition'] && 'expand-searchfield' === $attributes['buttonBehavior'] ) { - $aria_label = sprintf( 'aria-label="%s"', __( 'Expand search form' ) ); - $aria_hidden = 'aria-hidden="true"'; - $aria_expanded = sprintf( ' aria-expanded="false" aria-controls="wp-block-search__input-%s"', esc_attr( $input_id ) ); - wp_enqueue_script( 'wp-block--search-view', plugins_url( 'search/view.min.js', __FILE__ ) ); - } + 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' ); @@ -89,7 +86,7 @@ function render_block_core_search( $attributes ) { get_search_query(), esc_attr( $attributes['placeholder'] ), $inline_styles['input'], - $aria_hidden + $input_aria ); if ( count( $query_params ) > 0 ) { @@ -120,9 +117,7 @@ function render_block_core_search( $attributes ) { $button_internal_markup = wp_kses_post( $attributes['buttonText'] ); } } else { - if ( 'expand-searchfield' !== $attributes['buttonBehavior'] ) { - $aria_label = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) ); - } + $button_aria = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) ); $button_classes[] = 'has-icon'; $button_internal_markup = @@ -130,15 +125,17 @@ function render_block_core_search( $attributes ) { '; } + if ( 'expand-searchfield' !== $attributes['buttonBehavior'] ) { + $button_aria = sprintf( 'aria-label="%s" aria-expanded="false" aria-controls="wp-block-search__input-%s"', __( 'Expand search form' ), esc_attr( $input_id ) ); + } // Include the button element class. $button_classes[] = wp_theme_get_element_class_name( 'button' ); - $aria_attributes = $aria_label .= $aria_expanded; $button_markup = sprintf( '', esc_attr( implode( ' ', $button_classes ) ), $inline_styles['button'], - $aria_attributes, + $button_aria, $button_internal_markup ); } diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js index 2c780dfa996b03..34ad27297e574d 100644 --- a/packages/block-library/src/search/view.js +++ b/packages/block-library/src/search/view.js @@ -15,7 +15,8 @@ window.addEventListener( 'DOMContentLoaded', () => { const toggleSearchField = ( showSearchField ) => { if ( showSearchField ) { - searchField.setAttribute( 'aria-hidden', 'false' ); + searchField.removeAttribute( 'aria-hidden' ); + searchField.removeAttribute( 'tabindex' ); searchButton.removeAttribute( 'aria-expanded' ); searchButton.removeAttribute( 'aria-controls' ); searchButton.removeAttribute( 'aria-label' ); @@ -24,6 +25,7 @@ window.addEventListener( 'DOMContentLoaded', () => { } searchField.setAttribute( 'aria-hidden', 'true' ); + searchField.setAttribute( 'tabindex', '-1' ); searchButton.setAttribute( 'aria-expanded', 'false' ); searchButton.setAttribute( 'aria-controls', id ); searchButton.setAttribute( 'aria-label', ariaLabel ); From 7665720906561a8b71ba59d3a468cd75fa9a413c Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 25 May 2023 11:01:50 -0400 Subject: [PATCH 19/22] Fix label clicking behavior, remove unneeded event listeners. --- packages/block-library/src/search/view.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js index 34ad27297e574d..80711305f51e4c 100644 --- a/packages/block-library/src/search/view.js +++ b/packages/block-library/src/search/view.js @@ -8,8 +8,7 @@ window.addEventListener( 'DOMContentLoaded', () => { ).forEach( ( block ) => { const searchField = block.querySelector( '.wp-block-search__input' ); const searchButton = block.querySelector( '.wp-block-search__button' ); - const activeElement = block.ownerDocument.activeElement; - + const searchLabel = block.querySelector( '.wp-block-search__label' ); const ariaLabel = searchButton.getAttribute( 'aria-label' ); const id = searchField.getAttribute( 'id' ); @@ -33,11 +32,7 @@ window.addEventListener( 'DOMContentLoaded', () => { }; const hideSearchField = ( e ) => { - if ( - ! e.target.closest( '.wp-block-search__inside-wrapper' ) && - activeElement !== searchButton && - activeElement !== searchField - ) { + if ( ! e.target.closest( '.wp-block-search' ) ) { return toggleSearchField( false ); } @@ -55,11 +50,11 @@ window.addEventListener( 'DOMContentLoaded', () => { } }; - searchField.addEventListener( 'blur', hideSearchField ); searchField.addEventListener( 'keydown', ( e ) => { hideSearchField( e ); } ); searchButton.addEventListener( 'click', handleButtonClick ); + searchLabel.addEventListener( 'click', handleButtonClick ); document.body.addEventListener( 'click', hideSearchField ); } ); } ); From 13e8dd74206383f2353eab1d94a8f82016646f80 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 1 Jun 2023 12:04:29 -0400 Subject: [PATCH 20/22] Fix comparison bug. --- packages/block-library/src/search/index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 3dc781ff8d2f10..d125bacd1b51d8 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -125,8 +125,8 @@ function render_block_core_search( $attributes ) { '; } - if ( 'expand-searchfield' !== $attributes['buttonBehavior'] ) { - $button_aria = sprintf( 'aria-label="%s" aria-expanded="false" aria-controls="wp-block-search__input-%s"', __( 'Expand search form' ), esc_attr( $input_id ) ); + 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. From fe7ff74e97fe82fbd0ce3ddc3e57e3d44d2e6646 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 1 Jun 2023 12:29:46 -0400 Subject: [PATCH 21/22] Add and remove type and aria-label attributes to reflect form state. --- packages/block-library/src/search/view.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js index 80711305f51e4c..6af84de23edcfa 100644 --- a/packages/block-library/src/search/view.js +++ b/packages/block-library/src/search/view.js @@ -18,11 +18,13 @@ window.addEventListener( 'DOMContentLoaded', () => { searchField.removeAttribute( 'tabindex' ); searchButton.removeAttribute( 'aria-expanded' ); searchButton.removeAttribute( 'aria-controls' ); - searchButton.removeAttribute( 'aria-label' ); + searchButton.setAttribute( 'type', 'submit' ); + searchButton.setAttribute( 'aria-label', 'Submit Search' ); return block.classList.remove( hiddenClass ); } + searchButton.removeAttribute( 'type' ); searchField.setAttribute( 'aria-hidden', 'true' ); searchField.setAttribute( 'tabindex', '-1' ); searchButton.setAttribute( 'aria-expanded', 'false' ); @@ -50,10 +52,14 @@ window.addEventListener( 'DOMContentLoaded', () => { } }; + searchButton.removeAttribute( 'type' ); searchField.addEventListener( 'keydown', ( e ) => { hideSearchField( e ); } ); searchButton.addEventListener( 'click', handleButtonClick ); + searchButton.addEventListener( 'keydown', ( e ) => { + hideSearchField( e ); + } ); searchLabel.addEventListener( 'click', handleButtonClick ); document.body.addEventListener( 'click', hideSearchField ); } ); From b77edab36f4225b49dea0da8faa826f6102318f8 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Fri, 2 Jun 2023 13:30:05 -0400 Subject: [PATCH 22/22] Fix conditional on useEffect to show input on width change. --- packages/block-library/src/search/edit.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 1a3d10323952bc..d74e03d216660f 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -150,8 +150,9 @@ export default function SearchEdit( { } }, [ hasOnlyButton, isSelected, setAttributes ] ); + // Show the search field when width changes. useEffect( () => { - if ( hasOnlyButton || ! isSelected ) { + if ( ! hasOnlyButton || ! isSelected ) { return; }