ToolsPanel: Ensure display of optional items when panel id is null (#…

…47864)

packages/components/CHANGELOG.md

@@ -20,6 +20,8 @@
 -   `BorderBoxControl`: migrate tests to TypeScript, remove act() call ([47755](https://github.com/WordPress/gutenberg/pull/47755)).
 -   `Toolbar`: Convert to TypeScript ([#47087](https://github.com/WordPress/gutenberg/pull/47087)).
 -   `MenuItemsChoice`: Convert to TypeScript ([#47180](https://github.com/WordPress/gutenberg/pull/47180)).
+-   `ToolsPanel`: Allow display of optional items when values are updated externally to item controls ([47727](https://github.com/WordPress/gutenberg/pull/47727)).
+-   `ToolsPanel`: Ensure display of optional items when values are updated externally and multiple blocks selected ([47864](https://github.com/WordPress/gutenberg/pull/47864)).
 
 ## 23.3.0 (2023-02-01)
 
@@ -53,7 +55,6 @@
 
 -   `TabPanel`: Fix initial tab selection when the tab declaration is lazily added to the `tabs` array ([47100](https://github.com/WordPress/gutenberg/pull/47100)).
 -   `InputControl`: Avoid the "controlled to uncontrolled" warning by forcing the internal `<input />` element to be always in controlled mode ([47250](https://github.com/WordPress/gutenberg/pull/47250)).
--   `ToolsPanel`: Allow display of optional items when values are updated externally to item controls ([47727](https://github.com/WordPress/gutenberg/pull/47727)).
 
 ## 23.2.0 (2023-01-11)
 

packages/components/src/tools-panel/test/index.js

@@ -316,7 +316,7 @@ describe( 'ToolsPanel', () => {
 			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
 		} );
 
-		it( 'should render optional panel item when corresponding value is updated externally', async () => {
+		it( 'should render optional panel item when value is updated externally and panel has an ID', async () => {
 			const ToolsPanelOptional = ( { toolsPanelItemValue } ) => {
 				const itemProps = {
 					attributes: { value: toolsPanelItemValue },
@@ -325,7 +325,7 @@ describe( 'ToolsPanel', () => {
 					onDeselect: jest.fn(),
 					onSelect: jest.fn(),
 				};
-				altControlProps.attributes.value = toolsPanelItemValue;
+
 				return (
 					<ToolsPanel { ...defaultProps }>
 						<ToolsPanelItem { ...itemProps }>
@@ -342,7 +342,41 @@ describe( 'ToolsPanel', () => {
 
 			rerender( <ToolsPanelOptional toolsPanelItemValue={ 100 } /> );
 
-			const controlRerendered = screen.queryByText( 'Optional control' );
+			const controlRerendered = screen.getByText( 'Optional control' );
+
+			expect( controlRerendered ).toBeInTheDocument();
+		} );
+
+		it( 'should render optional item when value is updated externally and panelId is null', async () => {
+			// This test partially covers: https://github.com/WordPress/gutenberg/issues/47368
+			const ToolsPanelOptional = ( { toolsPanelItemValue } ) => {
+				const itemProps = {
+					attributes: { value: toolsPanelItemValue },
+					hasValue: () => !! toolsPanelItemValue,
+					label: 'Alt',
+					onDeselect: jest.fn(),
+					onSelect: jest.fn(),
+				};
+
+				// The null panelId below simulates the panel prop when there
+				// are multiple blocks selected.
+				return (
+					<ToolsPanel { ...defaultProps } panelId={ null }>
+						<ToolsPanelItem { ...itemProps }>
+							<div>Optional control</div>
+						</ToolsPanelItem>
+					</ToolsPanel>
+				);
+			};
+
+			const { rerender } = render( <ToolsPanelOptional /> );
+			const control = screen.queryByText( 'Optional control' );
+
+			expect( control ).not.toBeInTheDocument();
+
+			rerender( <ToolsPanelOptional toolsPanelItemValue={ 99 } /> );
+
+			const controlRerendered = screen.getByText( 'Optional control' );
 
 			expect( controlRerendered ).toBeInTheDocument();
 		} );

packages/components/src/tools-panel/tools-panel-item/hook.ts

@@ -86,30 +86,40 @@ export function useToolsPanelItem(
 		deregisterPanelItem,
 	] );
 
+	// Note: `label` is used as a key when building menu item state in
+	// `ToolsPanel`.
+	const menuGroup = isShownByDefault ? 'default' : 'optional';
+	const isMenuItemChecked = menuItems?.[ menuGroup ]?.[ label ];
+	const wasMenuItemChecked = usePrevious( isMenuItemChecked );
+	const isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;
+
 	const isValueSet = hasValue();
 	const wasValueSet = usePrevious( isValueSet );
-
-	// If this item represents a default control it will need to notify the
-	// panel when a custom value has been set.
+	const newValueSet = isValueSet && ! wasValueSet;
+
+	// Notify the panel when an item's value has been set.
+	//
+	// 1. For default controls, this is so "reset" appears beside its menu item.
+	// 2. For optional controls, when the panel ID is `null`, it allows the
+	// panel to ensure the item is toggled on for display in the menu, given the
+	// value has been set external to the control.
 	useEffect( () => {
-		if ( isShownByDefault && isValueSet && ! wasValueSet ) {
-			flagItemCustomization( label );
+		if ( ! newValueSet ) {
+			return;
+		}
+
+		if ( isShownByDefault || currentPanelId === null ) {
+			flagItemCustomization( label, menuGroup );
 		}
 	}, [
-		isValueSet,
-		wasValueSet,
+		currentPanelId,
+		newValueSet,
 		isShownByDefault,
+		menuGroup,
 		label,
 		flagItemCustomization,
 	] );
 
-	// Note: `label` is used as a key when building menu item state in
-	// `ToolsPanel`.
-	const menuGroup = isShownByDefault ? 'default' : 'optional';
-	const isMenuItemChecked = menuItems?.[ menuGroup ]?.[ label ];
-	const wasMenuItemChecked = usePrevious( isMenuItemChecked );
-	const isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;
-
 	// Determine if the panel item's corresponding menu is being toggled and
 	// trigger appropriate callback if it is.
 	useEffect( () => {