diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index be6f58e1ea875..9b35ea397ab7a 100644 --- 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,35 @@ function Navigation( { label={ __( 'Always' ) } /> -

{ __( 'Submenus' ) }

- { - setAttributes( { - openSubmenusOnClick: value, - } ); - } } - label={ __( 'Open on click' ) } - /> - { ! attributes.openSubmenusOnClick && ( - { - setAttributes( { - showSubmenuIcon: value, - } ); - } } - label={ __( 'Show icons' ) } - /> + { hasSubmenus && ( + <> +

{ __( 'Submenus' ) }

+ { + setAttributes( { + openSubmenusOnClick: value, + ...( value && { + showSubmenuIcon: true, + } ), // Make sure arrows are shown when we toggle this on. + } ); + } } + label={ __( 'Open on click' ) } + /> + + { + setAttributes( { + showSubmenuIcon: value, + } ); + } } + disabled={ + attributes.openSubmenusOnClick + } + label={ __( 'Show arrow' ) } + /> + ) } ) }