From c99c465e64a502bcec386afb7393d22a369ec66a Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 11 Jul 2023 17:32:12 +0100 Subject: [PATCH 1/3] Search block: Remove unnecessary useEffects --- packages/block-library/src/search/edit.js | 23 ++++------------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 80238ab1741f7e..ca61541033c497 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -143,25 +143,6 @@ export default function SearchEdit( { defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT }, } ); - useEffect( () => { - if ( hasOnlyButton && ! isSelected ) { - setAttributes( { - isSearchFieldHidden: true, - } ); - } - }, [ hasOnlyButton, isSelected, setAttributes ] ); - - // Show the search field when width changes. - useEffect( () => { - if ( ! hasOnlyButton || ! isSelected ) { - return; - } - - setAttributes( { - isSearchFieldHidden: false, - } ); - }, [ hasOnlyButton, isSelected, setAttributes, width ] ); - const getBlockClassNames = () => { return classnames( className, @@ -264,6 +245,10 @@ export default function SearchEdit( { }; const renderTextField = () => { + if ( hasOnlyButton && ! isSelected ) { + return; + } + // If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control. const textFieldClasses = classnames( 'wp-block-search__input', From 380286cb7ef73db403d309a922e6262ff1bb98ab Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 14 Jul 2023 16:20:18 +0100 Subject: [PATCH 2/3] try a different approach --- packages/block-library/src/search/edit.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index ca61541033c497..08ee21046317c2 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -143,6 +143,10 @@ export default function SearchEdit( { defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT }, } ); + setAttributes( { + isSearchFieldHidden: hasOnlyButton && ! isSelected, + } ); + const getBlockClassNames = () => { return classnames( className, @@ -245,10 +249,6 @@ export default function SearchEdit( { }; const renderTextField = () => { - if ( hasOnlyButton && ! isSelected ) { - return; - } - // If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control. const textFieldClasses = classnames( 'wp-block-search__input', From 739289e3ea05aae007a26a354a35ccc5538e252c Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 14 Jul 2023 21:44:12 +0100 Subject: [PATCH 3/3] Remove attribute --- packages/block-library/src/search/edit.js | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 08ee21046317c2..69bd5ff12a7f9f 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, useRef } from '@wordpress/element'; +import { useEffect, useRef, useState } from '@wordpress/element'; import { ToolbarDropdownMenu, ToolbarGroup, @@ -80,10 +80,8 @@ export default function SearchEdit( { buttonPosition, buttonUseIcon, buttonBehavior, - isSearchFieldHidden, style, } = attributes; - const insertedInNavigationBlock = useSelect( ( select ) => { const { getBlockParentsByBlockName, wasBlockJustInserted } = @@ -137,16 +135,15 @@ export default function SearchEdit( { const hasOnlyButton = 'button-only' === buttonPosition; const searchFieldRef = useRef(); const buttonRef = useRef(); + const [ isSearchFieldHidden, setIsSearchFieldHidden ] = useState( + hasOnlyButton && ! isSelected + ); const units = useCustomUnits( { availableUnits: [ '%', 'px' ], defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT }, } ); - setAttributes( { - isSearchFieldHidden: hasOnlyButton && ! isSelected, - } ); - const getBlockClassNames = () => { return classnames( className, @@ -182,7 +179,6 @@ export default function SearchEdit( { onClick: () => { setAttributes( { buttonPosition: 'button-outside', - isSearchFieldHidden: false, } ); }, }, @@ -194,7 +190,6 @@ export default function SearchEdit( { onClick: () => { setAttributes( { buttonPosition: 'button-inside', - isSearchFieldHidden: false, } ); }, }, @@ -206,7 +201,6 @@ export default function SearchEdit( { onClick: () => { setAttributes( { buttonPosition: 'no-button', - isSearchFieldHidden: false, } ); }, }, @@ -218,7 +212,6 @@ export default function SearchEdit( { onClick: () => { setAttributes( { buttonPosition: 'button-only', - isSearchFieldHidden: true, } ); }, }, @@ -303,9 +296,7 @@ export default function SearchEdit( { }; const handleButtonClick = () => { if ( hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior ) { - setAttributes( { - isSearchFieldHidden: ! isSearchFieldHidden, - } ); + setIsSearchFieldHidden( ! isSearchFieldHidden ); } };