From 643cdc2bd15c130a387405ddacf5fbb6fd908656 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 9 Apr 2024 14:57:37 -0700 Subject: [PATCH 1/7] =?UTF-8?q?Fix=20sticking=20=E2=80=9CReset=E2=80=9D=20?= =?UTF-8?q?option=20in=20`ToolsPanel`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/tools-panel/tools-panel-item/hook.ts | 16 +++++----------- .../src/tools-panel/tools-panel/hook.ts | 8 ++++++-- packages/components/src/tools-panel/types.ts | 1 + 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.ts b/packages/components/src/tools-panel/tools-panel-item/hook.ts index fe415b8723a88..4026777296c10 100644 --- a/packages/components/src/tools-panel/tools-panel-item/hook.ts +++ b/packages/components/src/tools-panel/tools-panel-item/hook.ts @@ -125,17 +125,11 @@ export function useToolsPanelItem( const isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined; const isValueSet = hasValue(); - const wasValueSet = usePrevious( isValueSet ); - const newValueSet = isValueSet && ! wasValueSet; - - // Notify the panel when an item's value has been set. - useEffect( () => { - if ( ! newValueSet ) { - return; - } - - flagItemCustomization( label, menuGroup ); - }, [ newValueSet, menuGroup, label, flagItemCustomization ] ); + // Notify the panel when an item's value has changed. + useEffect( + () => flagItemCustomization( isValueSet, label, menuGroup ), + [ isValueSet, menuGroup, label, flagItemCustomization ] + ); // Determine if the panel item's corresponding menu is being toggled and // trigger appropriate callback if it is. diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts index 8a38a15084b33..60c0c9ae91127 100644 --- a/packages/components/src/tools-panel/tools-panel/hook.ts +++ b/packages/components/src/tools-panel/tools-panel/hook.ts @@ -210,13 +210,17 @@ export function useToolsPanel( // separately to optional items and have different display states, // we need to update that when their value is customized. const flagItemCustomization = useCallback( - ( label: string, group: ToolsPanelMenuItemKey = 'default' ) => { + ( + value: boolean, + label: string, + group: ToolsPanelMenuItemKey = 'default' + ) => { setMenuItems( ( items ) => { const newState = { ...items, [ group ]: { ...items[ group ], - [ label ]: true, + [ label ]: value, }, }; return newState; diff --git a/packages/components/src/tools-panel/types.ts b/packages/components/src/tools-panel/types.ts index 9f4fc78bea46a..e8e2f950de9a3 100644 --- a/packages/components/src/tools-panel/types.ts +++ b/packages/components/src/tools-panel/types.ts @@ -176,6 +176,7 @@ export type ToolsPanelContext = { registerResetAllFilter: ( filter: ResetAllFilter ) => void; deregisterResetAllFilter: ( filter: ResetAllFilter ) => void; flagItemCustomization: ( + value: boolean, label: string, group?: ToolsPanelMenuItemKey ) => void; From 87adceb2857958ee12b0f0fc4453714b84830df8 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 10 Apr 2024 15:29:20 -0700 Subject: [PATCH 2/7] =?UTF-8?q?Tweak=20block-editor=E2=80=99s=20`Dimension?= =?UTF-8?q?Tool`=20to=20avoid=20updating=20tests`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dimensions-tool/width-height-tool.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/dimensions-tool/width-height-tool.js b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js index 6a4609f9a0bf2..8d8bba539f534 100644 --- a/packages/block-editor/src/components/dimensions-tool/width-height-tool.js +++ b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js @@ -60,13 +60,15 @@ export default function WidthHeightTool( { const height = value.height === 'auto' ? '' : value.height ?? ''; const onDimensionChange = ( dimension ) => ( nextDimension ) => { - const nextValue = { ...value }; - // Empty strings or undefined may be passed and both represent removing the value. - if ( ! nextDimension ) { - delete nextValue[ dimension ]; - } else { - nextValue[ dimension ] = nextDimension; - } + // Readies the nextValue by omitting the dimension to be changed. + const { [ dimension ]: existingDimensionValue, ...nextValue } = value; + // Bails when both nextDimension and its existing value are falsy. This + // can occur when a `onDeselect` callback runs after the state has + // already updated. In such cases calling onChange would be redundant. + if ( ! nextDimension && ! existingDimensionValue ) return; + + // Adds dimension only if non-falsy ('' or undefined may be passed). + if ( !! nextDimension ) nextValue[ dimension ] = nextDimension; onChange( nextValue ); }; From 7a960f1d126fb349cf4f8c015496abf264621af9 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 10 Apr 2024 18:01:13 -0700 Subject: [PATCH 3/7] =?UTF-8?q?Revert=20"Tweak=20block-editor=E2=80=99s=20?= =?UTF-8?q?`DimensionTool`=20to=20avoid=20updating=20tests`"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 3007db759ee55a7f02114b0f0072c826ab1c164f. --- .../dimensions-tool/width-height-tool.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/dimensions-tool/width-height-tool.js b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js index 8d8bba539f534..6a4609f9a0bf2 100644 --- a/packages/block-editor/src/components/dimensions-tool/width-height-tool.js +++ b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js @@ -60,15 +60,13 @@ export default function WidthHeightTool( { const height = value.height === 'auto' ? '' : value.height ?? ''; const onDimensionChange = ( dimension ) => ( nextDimension ) => { - // Readies the nextValue by omitting the dimension to be changed. - const { [ dimension ]: existingDimensionValue, ...nextValue } = value; - // Bails when both nextDimension and its existing value are falsy. This - // can occur when a `onDeselect` callback runs after the state has - // already updated. In such cases calling onChange would be redundant. - if ( ! nextDimension && ! existingDimensionValue ) return; - - // Adds dimension only if non-falsy ('' or undefined may be passed). - if ( !! nextDimension ) nextValue[ dimension ] = nextDimension; + const nextValue = { ...value }; + // Empty strings or undefined may be passed and both represent removing the value. + if ( ! nextDimension ) { + delete nextValue[ dimension ]; + } else { + nextValue[ dimension ] = nextDimension; + } onChange( nextValue ); }; From 753a8bf478b5a319aecd19e038be6d43faa4fa20 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 10 Apr 2024 18:03:09 -0700 Subject: [PATCH 4/7] =?UTF-8?q?Avoid=20calling=20`onDeselect`=20if=20item?= =?UTF-8?q?=E2=80=99s=20value=20is=20not=20set?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/components/src/tools-panel/tools-panel-item/hook.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.ts b/packages/components/src/tools-panel/tools-panel-item/hook.ts index 4026777296c10..93f0aec94d8e8 100644 --- a/packages/components/src/tools-panel/tools-panel-item/hook.ts +++ b/packages/components/src/tools-panel/tools-panel-item/hook.ts @@ -145,7 +145,7 @@ export function useToolsPanelItem( onSelect?.(); } - if ( ! isMenuItemChecked && wasMenuItemChecked ) { + if ( ! isMenuItemChecked && isValueSet && wasMenuItemChecked ) { onDeselect?.(); } }, [ From 48a579276e5061f3f0601f4d925b0dd85a12688c Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 17 Apr 2024 12:53:55 -0700 Subject: [PATCH 5/7] Skip flagging item customization for optional items without value Because they should not cause themselves to be hidden. --- .../src/tools-panel/tools-panel-item/hook.ts | 18 +++++++++++++----- .../src/tools-panel/tools-panel/hook.ts | 7 +++---- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.ts b/packages/components/src/tools-panel/tools-panel-item/hook.ts index 93f0aec94d8e8..ccc4573084d6a 100644 --- a/packages/components/src/tools-panel/tools-panel-item/hook.ts +++ b/packages/components/src/tools-panel/tools-panel-item/hook.ts @@ -125,11 +125,19 @@ export function useToolsPanelItem( const isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined; const isValueSet = hasValue(); - // Notify the panel when an item's value has changed. - useEffect( - () => flagItemCustomization( isValueSet, label, menuGroup ), - [ isValueSet, menuGroup, label, flagItemCustomization ] - ); + // Notify the panel when an item's value has changed except for optional + // items without value because the item should not cause itself to hide. + useEffect( () => { + if ( ! isShownByDefault && ! isValueSet ) return; + + flagItemCustomization( isValueSet, label, menuGroup ); + }, [ + isValueSet, + menuGroup, + label, + flagItemCustomization, + isShownByDefault, + ] ); // Determine if the panel item's corresponding menu is being toggled and // trigger appropriate callback if it is. diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts index 60c0c9ae91127..8742f1c494ce1 100644 --- a/packages/components/src/tools-panel/tools-panel/hook.ts +++ b/packages/components/src/tools-panel/tools-panel/hook.ts @@ -205,10 +205,9 @@ export function useToolsPanel( } ); }, [ panelItems, setMenuItems, menuItemOrder ] ); - // Force a menu item to be checked. - // This is intended for use with default panel items. They are displayed - // separately to optional items and have different display states, - // we need to update that when their value is customized. + // Updates the status of the panel’s menu items. For default items the + // value represents whether it differs from the default and for optional + // items whether the item is shown. const flagItemCustomization = useCallback( ( value: boolean, From fa554e4295fd8defa00d9e8a149643b796cb8acc Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 9 May 2024 12:14:17 -0700 Subject: [PATCH 6/7] Add changelog entry --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1abf63e762f50..356a0f1e13cbd 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -12,6 +12,10 @@ - `FormTokenField`: Hide label when not defined ([#61336](https://github.com/WordPress/gutenberg/pull/61336)). - Upgraded the @types/react and @types/react-dom packages ([#60796](https://github.com/WordPress/gutenberg/pull/60796)). +### Bug Fix + +- `ToolsPanel`: Fix sticking “Reset” option ([#60621](https://github.com/WordPress/gutenberg/pull/60621)). + ## 27.5.0 (2024-05-02) ### Enhancements From 0b0d8c73300e2650d87b46f42a5e5fb4ccbf971f Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 9 May 2024 13:47:59 -0700 Subject: [PATCH 7/7] Format --- packages/components/src/tools-panel/tools-panel-item/hook.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.ts b/packages/components/src/tools-panel/tools-panel-item/hook.ts index ccc4573084d6a..1e33e7c6740de 100644 --- a/packages/components/src/tools-panel/tools-panel-item/hook.ts +++ b/packages/components/src/tools-panel/tools-panel-item/hook.ts @@ -128,7 +128,9 @@ export function useToolsPanelItem( // Notify the panel when an item's value has changed except for optional // items without value because the item should not cause itself to hide. useEffect( () => { - if ( ! isShownByDefault && ! isValueSet ) return; + if ( ! isShownByDefault && ! isValueSet ) { + return; + } flagItemCustomization( isValueSet, label, menuGroup ); }, [