Add Navigation Add Page Button (#71192)

getdave · scruffian · web-flow · commit e9daf2a67755 · 2025-09-04T13:54:40.000+01:00
* Add Add page button to Navigation block toolbar

- Creates a new hook that adds an Add page button to Navigation blocks
- Button appears in the block toolbar when Navigation block is selected
- Clicking the button inserts a new navigation-link block at the end
- Hook follows the same pattern as navigation-link-view-button.js
- Button works in all editing modes (not just contentOnly)

* Fix Navigation Link Block to use contentOnly mode

- Added useBlockEditingMode hook import
- Used useBlockEditingMode() to get current block editing mode
- Fixed undefined blockEditingMode variable error
- Navigation Link Block now properly respects contentOnly mode

* Move Navigation Add Page Button from hook to Navigation block

- Moved NavigationAddPageButton component directly into Navigation block edit/index.js
- Added required imports: ToolbarButton, ToolbarGroup, page icon, createBlock, __unstableBlockToolbarLastItem
- Removed old navigation-add-page-button.js hook file
- Removed import from hooks/index.js
- Component now renders directly in Navigation block when isEntityAvailable is true
- Maintains same functionality: only shows in contentOnly mode

* Use DEFAULT_BLOCK constant from constants.js for createBlock

- Import DEFAULT_BLOCK from ../constants
- Replace hardcoded 'core/navigation-link' with DEFAULT_BLOCK.name
- Makes the code more maintainable and consistent with constants usage

* Use DEFAULT_BLOCK attributes when creating navigation link block

- Pass kind and type attributes from DEFAULT_BLOCK constant to createBlock
- Ensures new navigation link blocks are created with consistent default attributes
- Makes the block creation more robust and aligned with constants

* Pull in correct attributes for new block


Co-authored-by: getdave &lt;get_dave@git.wordpress.org&gt;
Co-authored-by: scruffian &lt;scruffian@git.wordpress.org&gt;
diff --git 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 (
+		<BlockControls>
+			<ToolbarGroup>
+				<ToolbarButton
+					name="add-page"
+					icon={ page }
+					title={ __( 'Add page' ) }
+					onClick={ onAddPage }
+				>
+					{ __( 'Add page' ) }
+				</ToolbarButton>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}
 
 function ColorTools( {
 	textColor,
@@ -937,6 +983,9 @@ function Navigation( {
 					blockEditingMode={ blockEditingMode }
 				/>
 				{ blockEditingMode === 'default' && stylingInspectorControls }
+				{ blockEditingMode === 'contentOnly' && isEntityAvailable && (
+					<NavigationAddPageButton clientId={ clientId } />
+				) }
 				{ blockEditingMode === 'default' && isEntityAvailable && (
 					<InspectorControls group="advanced">
 						{ hasResolvedCanUserUpdateNavigationMenu &&
