Fix sticking “Reset” option in ToolsPanel (#60621)

* Fix sticking “Reset” option in `ToolsPanel` * Avoid calling `onDeselect` if item’s value is not set * Skip flagging item customization for optional items without value Because they should not cause themselves to be hidden. * Add changelog entry * Format Co-authored-by: stokesman <[email protected]> Co-authored-by: tyxla <[email protected]>
WordPress · May 9, 2024 · b793539 · b793539 · github-actions · May 9, 2024
1 parent de09691
commit b793539
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git 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

diff --git 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,21 @@ 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.
+	// 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 ( ! newValueSet ) {
+		if ( ! isShownByDefault && ! isValueSet ) {
 			return;
 		}
 
-		flagItemCustomization( label, menuGroup );
-	}, [ newValueSet, menuGroup, label, flagItemCustomization ] );
+		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.
@@ -151,7 +155,7 @@ export function useToolsPanelItem(
 			onSelect?.();
 		}
 
-		if ( ! isMenuItemChecked && wasMenuItemChecked ) {
+		if ( ! isMenuItemChecked && isValueSet && wasMenuItemChecked ) {
 			onDeselect?.();
 		}
 	}, [

diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts
@@ -205,18 +205,21 @@ 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(
-		( 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
@@ -176,6 +176,7 @@ export type ToolsPanelContext = {
 	registerResetAllFilter: ( filter: ResetAllFilter ) => void;
 	deregisterResetAllFilter: ( filter: ResetAllFilter ) => void;
 	flagItemCustomization: (
+		value: boolean,
 		label: string,
 		group?: ToolsPanelMenuItemKey
 	) => void;