only show submenu options when relevant

WordPress · Nov 24, 2021 · d77ed8c · d77ed8c
1 parent fe7c3ae
commit d77ed8c
Showing 1 changed file with 32 additions and 22 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -136,13 +136,19 @@ function Navigation( {
 		`navigationMenu/${ navigationMenuId }`
 	);
 
-	const { innerBlocks, isInnerBlockSelected } = useSelect(
+	const { innerBlocks, isInnerBlockSelected, hasSubmenus } = useSelect(
 		( select ) => {
 			const { getBlocks, hasSelectedInnerBlock } = select(
 				blockEditorStore
 			);
+			const blocks = getBlocks( clientId );
+			const firstSubmenu = blocks.find(
+				( block ) => block.name === 'core/navigation-submenu'
+			);
+
 			return {
-				innerBlocks: getBlocks( clientId ),
+				hasSubmenus: !! firstSubmenu,
+				innerBlocks: blocks,
 				isInnerBlockSelected: hasSelectedInnerBlock( clientId, true ),
 			};
 		},
@@ -406,26 +412,30 @@ function Navigation( {
 									label={ __( 'Always' ) }
 								/>
 							</ToggleGroupControl>
-							<h3>{ __( 'Submenus' ) }</h3>
-							<ToggleControl
-								checked={ openSubmenusOnClick }
-								onChange={ ( value ) => {
-									setAttributes( {
-										openSubmenusOnClick: value,
-									} );
-								} }
-								label={ __( 'Open on click' ) }
-							/>
-							{ ! attributes.openSubmenusOnClick && (
-								<ToggleControl
-									checked={ showSubmenuIcon }
-									onChange={ ( value ) => {
-										setAttributes( {
-											showSubmenuIcon: value,
-										} );
-									} }
-									label={ __( 'Show icons' ) }
-								/>
+							{ hasSubmenus && (
+								<>
+									<h3>{ __( 'Submenus' ) }</h3>
+									<ToggleControl
+										checked={ openSubmenusOnClick }
+										onChange={ ( value ) => {
+											setAttributes( {
+												openSubmenusOnClick: value,
+											} );
+										} }
+										label={ __( 'Open on click' ) }
+									/>
+									{ ! attributes.openSubmenusOnClick && (
+										<ToggleControl
+											checked={ showSubmenuIcon }
+											onChange={ ( value ) => {
+												setAttributes( {
+													showSubmenuIcon: value,
+												} );
+											} }
+											label={ __( 'Show icons' ) }
+										/>
+									) }
+								</>
 							) }
 						</PanelBody>
 					) }