Change back to default controls always displaying

packages/components/src/block-support-panel/index.js

@@ -25,23 +25,47 @@ const BlockSupportPanel = ( props ) => {
 		? children.filter( Boolean )
 		: [];
 
-	// On first render determine initial menu state. Default controls will
-	// initially display and have a check mark beside their menu item regardless
-	// of whether they have a value.
+	// Collect which controls have custom values. Used to update menu state to
+	// reflect customization for controls that display by default / always show.
+	const customizedChildren = filteredChildren.map( ( child ) =>
+		child.props.hasValue( child.props ) ? child.props.label : undefined
+	);
+
+	// On first render determine initial menu state and which controls should
+	// always display by default.
 	useEffect( () => {
 		const items = {};
 		const defaults = {};
 
 		filteredChildren.forEach( ( child ) => {
-			const { hasValue, isShownByDefault, label } = child.props;
-			items[ label ] = isShownByDefault || hasValue( child.props );
-			defaults[ label ] = isShownByDefault;
+			items[ child.props.label ] = child.props.hasValue( child.props );
+			defaults[ child.props.label ] = child.props.isShownByDefault;
 		} );
 
 		setMenuItems( items );
 		setDefaultControls( defaults );
 	}, [] );
 
+	// As the default controls are visible all the time. Reflect their
+	// customizations in the menu items' selected state.
+	useEffect( () => {
+		const menuLabels = Object.keys( menuItems );
+
+		// Skip if no children or menu state not initialized.
+		if ( menuLabels.length === 0 ) {
+			return;
+		}
+
+		const updatedItems = { ...menuItems };
+		menuLabels.forEach( ( label ) => {
+			if ( defaultControls[ label ] ) {
+				updatedItems[ label ] = customizedChildren.includes( label );
+			}
+		} );
+
+		setMenuItems( updatedItems );
+	}, customizedChildren );
+
 	if ( filteredChildren.length === 0 ) {
 		return null;
 	}
@@ -52,8 +76,9 @@ const BlockSupportPanel = ( props ) => {
 		);
 	};
 
-	// Toggles the display of the block support control and resets its
-	// associated block attribute via the control's reset callback prop.
+	// Toggles the customized state of the block support control and its display
+	// if it isn't to be displayed by default. When toggling off a control its
+	// associated block attribute is reset via the control's reset callback.
 	const toggleControl = ( label ) => {
 		const isSelected = menuItems[ label ];
 
@@ -77,8 +102,8 @@ const BlockSupportPanel = ( props ) => {
 		// Turn off menu items unless they are to display by default.
 		const resetMenuItems = {};
 
-		filteredChildren.forEach( ( { props: { label } } ) => {
-			resetMenuItems[ label ] = defaultControls[ label ];
+		filteredChildren.forEach( ( child ) => {
+			resetMenuItems[ child.props.label ] = false;
 		} );
 
 		setMenuItems( resetMenuItems );
@@ -96,7 +121,13 @@ const BlockSupportPanel = ( props ) => {
 				resetAll={ resetAllControls }
 			/>
 			{ filteredChildren.map( ( child ) => {
-				return menuItems[ child.props.label ] ? child : null;
+				// Only display the block support control if it is toggled on
+				// in the menu or is set to display by default.
+				const isShown =
+					menuItems[ child.props.label ] ||
+					defaultControls[ child.props.label ];
+
+				return isShown ? child : null;
 			} ) }
 		</div>
 	);