From d25ef9b1c296a1de2f3c0ea8596642bd3df3ef61 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Wed, 17 Apr 2024 12:53:55 -0700
Subject: [PATCH] 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 93f0aec94d8e8f..ccc4573084d6ac 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 60c0c9ae91127e..8742f1c494ce1b 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,