diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 11e2b2690ee69e..e7b28238709881 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -26,6 +26,7 @@ import { __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown, __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, useBlockEditingMode, + BlockControls, } from '@wordpress/block-editor'; import { EntityProvider, store as coreStore } from '@wordpress/core-data'; @@ -40,10 +41,13 @@ import { Button, Spinner, Notice, + ToolbarButton, + ToolbarGroup, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { speak } from '@wordpress/a11y'; -import { close, Icon } from '@wordpress/icons'; +import { close, Icon, page } from '@wordpress/icons'; +import { createBlock } from '@wordpress/blocks'; import { useInstanceId } from '@wordpress/compose'; /** @@ -75,6 +79,48 @@ import AccessibleDescription from './accessible-description'; import AccessibleMenuDescription from './accessible-menu-description'; import { unlock } from '../../lock-unlock'; import { useToolsPanelDropdownMenuProps } from '../../utils/hooks'; +import { DEFAULT_BLOCK } from '../constants'; + +/** + * Component that renders the Add page button for the Navigation block. + * + * @param {Object} props Component props. + * @param {string} props.clientId Block client ID. + * @return {JSX.Element|null} The Add page button component or null if not applicable. + */ +function NavigationAddPageButton( { clientId } ) { + const { insertBlock } = useDispatch( blockEditorStore ); + const { getBlockCount } = useSelect( blockEditorStore ); + + const onAddPage = useCallback( () => { + // Get the current number of blocks to insert at the end + const blockCount = getBlockCount( clientId ); + + // Create a new navigation link block (default block) + const newBlock = createBlock( DEFAULT_BLOCK.name, { + kind: DEFAULT_BLOCK.attributes.kind, + type: DEFAULT_BLOCK.attributes.type, + } ); + + // Insert the block at the end of the navigation + insertBlock( newBlock, blockCount, clientId ); + }, [ clientId, insertBlock, getBlockCount ] ); + + return ( + + + + { __( 'Add page' ) } + + + + ); +} function ColorTools( { textColor, @@ -937,6 +983,9 @@ function Navigation( { blockEditingMode={ blockEditingMode } /> { blockEditingMode === 'default' && stylingInspectorControls } + { blockEditingMode === 'contentOnly' && isEntityAvailable && ( + + ) } { blockEditingMode === 'default' && isEntityAvailable && ( { hasResolvedCanUserUpdateNavigationMenu &&