Change default controls display in block supports panel

Default controls now show as checked when panel initially displayed. These controls can also now be toggled off from display.

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

@@ -16,7 +16,6 @@ import BlockSupportPanelTitle from './title';
 const BlockSupportPanel = ( props ) => {
 	const { children, className, label: menuLabel, resetAll, title } = props;
 	const [ menuItems, setMenuItems ] = useState( {} );
-	const [ defaultControls, setDefaultControls ] = useState( {} );
 
 	// If a block support UI has been disabled via theme.json a boolean `false`
 	// will be passed as a child. This panel is only interested in the children
@@ -25,48 +24,20 @@ const BlockSupportPanel = ( props ) => {
 		? children.filter( Boolean )
 		: [];
 
-	// 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.
+	// 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.
 	useEffect( () => {
 		const items = {};
-		const defaults = {};
 
 		filteredChildren.forEach( ( child ) => {
-			items[ child.props.label ] = child.props.hasValue( child.props );
-			defaults[ child.props.label ] = child.props.isShownByDefault;
+			const { hasValue, isShownByDefault, label } = child.props;
+			items[ label ] = isShownByDefault || hasValue( child.props );
 		} );
 
 		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;
 	}
@@ -77,9 +48,8 @@ const BlockSupportPanel = ( props ) => {
 		);
 	};
 
-	// 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.
+	// Toggles the display of the block support control and resets its
+	// associated block attribute via the control's reset callback prop.
 	const toggleControl = ( label ) => {
 		const isSelected = menuItems[ label ];
 
@@ -122,13 +92,7 @@ const BlockSupportPanel = ( props ) => {
 				resetAll={ resetAllControls }
 			/>
 			{ filteredChildren.map( ( child ) => {
-				// 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;
+				return menuItems[ child.props.label ] ? child : null;
 			} ) }
 		</div>
 	);