From e4363baa7f60c686becef6176c7f423e51af50cd Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 13 Aug 2025 12:33:50 +0100 Subject: [PATCH 1/6] 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) --- packages/editor/src/hooks/index.js | 1 + .../src/hooks/navigation-add-page-button.js | 87 +++++++++++++++++++ 2 files changed, 88 insertions(+) create mode 100644 packages/editor/src/hooks/navigation-add-page-button.js diff --git a/packages/editor/src/hooks/index.js b/packages/editor/src/hooks/index.js index e79a9207e48f58..2ea49653c7bc56 100644 --- a/packages/editor/src/hooks/index.js +++ b/packages/editor/src/hooks/index.js @@ -6,3 +6,4 @@ import './default-autocompleters'; import './media-upload'; import './pattern-overrides'; import './navigation-link-view-button'; +import './navigation-add-page-button'; diff --git a/packages/editor/src/hooks/navigation-add-page-button.js b/packages/editor/src/hooks/navigation-add-page-button.js new file mode 100644 index 00000000000000..27ae0a54e8c860 --- /dev/null +++ b/packages/editor/src/hooks/navigation-add-page-button.js @@ -0,0 +1,87 @@ +/** + * WordPress dependencies + */ +import { addFilter } from '@wordpress/hooks'; +import { createHigherOrderComponent } from '@wordpress/compose'; +import { useCallback } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { + __unstableBlockToolbarLastItem as BlockToolbarLastItem, + store as blockEditorStore, +} from '@wordpress/block-editor'; +import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { createBlock } from '@wordpress/blocks'; +import { plus } from '@wordpress/icons'; + +// Target block that should have the Add page button. +const SUPPORTED_BLOCK = 'core/navigation'; + +/** + * 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( 'core/navigation-link' ); + + // Insert the block at the end of the navigation + insertBlock( newBlock, blockCount, clientId ); + }, [ clientId, insertBlock, getBlockCount ] ); + + // Only show when in contentOnly mode + // if ( blockEditingMode !== 'contentOnly' ) { + // return null; + // } + + return ( + + + + { __( 'Add page' ) } + + + + ); +} + +/** + * Higher-order component that adds the Add page button to the Navigation block. + */ +const withNavigationAddPageButton = createHigherOrderComponent( + ( BlockEdit ) => ( props ) => { + const isSupportedBlock = props.name === SUPPORTED_BLOCK; + + return ( + <> + + { props.isSelected && isSupportedBlock && ( + + ) } + + ); + }, + 'withNavigationAddPageButton' +); + +// Register the filter. +addFilter( + 'editor.BlockEdit', + 'core/navigation/with-navigation-add-page-button', + withNavigationAddPageButton +); From c480aec3e4de71df2b1e99199468b525d94077db Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 13 Aug 2025 12:43:00 +0100 Subject: [PATCH 2/6] 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 --- .../editor/src/hooks/navigation-add-page-button.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/hooks/navigation-add-page-button.js b/packages/editor/src/hooks/navigation-add-page-button.js index 27ae0a54e8c860..0144562053d8eb 100644 --- a/packages/editor/src/hooks/navigation-add-page-button.js +++ b/packages/editor/src/hooks/navigation-add-page-button.js @@ -8,11 +8,12 @@ import { __ } from '@wordpress/i18n'; import { __unstableBlockToolbarLastItem as BlockToolbarLastItem, store as blockEditorStore, + useBlockEditingMode, } from '@wordpress/block-editor'; import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { createBlock } from '@wordpress/blocks'; -import { plus } from '@wordpress/icons'; +import { page } from '@wordpress/icons'; // Target block that should have the Add page button. const SUPPORTED_BLOCK = 'core/navigation'; @@ -27,6 +28,7 @@ const SUPPORTED_BLOCK = 'core/navigation'; function NavigationAddPageButton( { clientId } ) { const { insertBlock } = useDispatch( blockEditorStore ); const { getBlockCount } = useSelect( blockEditorStore ); + const blockEditingMode = useBlockEditingMode(); const onAddPage = useCallback( () => { // Get the current number of blocks to insert at the end @@ -40,16 +42,16 @@ function NavigationAddPageButton( { clientId } ) { }, [ clientId, insertBlock, getBlockCount ] ); // Only show when in contentOnly mode - // if ( blockEditingMode !== 'contentOnly' ) { - // return null; - // } + if ( blockEditingMode !== 'contentOnly' ) { + return null; + } return ( From 2698d465ab8eb3f22aac8f44b1814bcbc35db8d1 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 13 Aug 2025 12:48:07 +0100 Subject: [PATCH 3/6] 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 --- .../src/navigation/edit/index.js | 53 ++++++++++- packages/editor/src/hooks/index.js | 1 - .../src/hooks/navigation-add-page-button.js | 89 ------------------- 3 files changed, 52 insertions(+), 91 deletions(-) delete mode 100644 packages/editor/src/hooks/navigation-add-page-button.js diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 11e2b2690ee69e..54c1c5bf603f5d 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, + __unstableBlockToolbarLastItem, } 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'; /** @@ -76,6 +80,50 @@ import AccessibleMenuDescription from './accessible-menu-description'; import { unlock } from '../../lock-unlock'; import { useToolsPanelDropdownMenuProps } from '../../utils/hooks'; +/** + * 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 blockEditingMode = useBlockEditingMode(); + + 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( 'core/navigation-link' ); + + // Insert the block at the end of the navigation + insertBlock( newBlock, blockCount, clientId ); + }, [ clientId, insertBlock, getBlockCount ] ); + + // Only show when in contentOnly mode + if ( blockEditingMode !== 'contentOnly' ) { + return null; + } + + return ( + <__unstableBlockToolbarLastItem> + + + { __( 'Add page' ) } + + + + ); +} + function ColorTools( { textColor, setTextColor, @@ -937,6 +985,9 @@ function Navigation( { blockEditingMode={ blockEditingMode } /> { blockEditingMode === 'default' && stylingInspectorControls } + { isEntityAvailable && ( + + ) } { blockEditingMode === 'default' && isEntityAvailable && ( { hasResolvedCanUserUpdateNavigationMenu && diff --git a/packages/editor/src/hooks/index.js b/packages/editor/src/hooks/index.js index 2ea49653c7bc56..e79a9207e48f58 100644 --- a/packages/editor/src/hooks/index.js +++ b/packages/editor/src/hooks/index.js @@ -6,4 +6,3 @@ import './default-autocompleters'; import './media-upload'; import './pattern-overrides'; import './navigation-link-view-button'; -import './navigation-add-page-button'; diff --git a/packages/editor/src/hooks/navigation-add-page-button.js b/packages/editor/src/hooks/navigation-add-page-button.js deleted file mode 100644 index 0144562053d8eb..00000000000000 --- a/packages/editor/src/hooks/navigation-add-page-button.js +++ /dev/null @@ -1,89 +0,0 @@ -/** - * WordPress dependencies - */ -import { addFilter } from '@wordpress/hooks'; -import { createHigherOrderComponent } from '@wordpress/compose'; -import { useCallback } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { - __unstableBlockToolbarLastItem as BlockToolbarLastItem, - store as blockEditorStore, - useBlockEditingMode, -} from '@wordpress/block-editor'; -import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { createBlock } from '@wordpress/blocks'; -import { page } from '@wordpress/icons'; - -// Target block that should have the Add page button. -const SUPPORTED_BLOCK = 'core/navigation'; - -/** - * 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 blockEditingMode = useBlockEditingMode(); - - 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( 'core/navigation-link' ); - - // Insert the block at the end of the navigation - insertBlock( newBlock, blockCount, clientId ); - }, [ clientId, insertBlock, getBlockCount ] ); - - // Only show when in contentOnly mode - if ( blockEditingMode !== 'contentOnly' ) { - return null; - } - - return ( - - - - { __( 'Add page' ) } - - - - ); -} - -/** - * Higher-order component that adds the Add page button to the Navigation block. - */ -const withNavigationAddPageButton = createHigherOrderComponent( - ( BlockEdit ) => ( props ) => { - const isSupportedBlock = props.name === SUPPORTED_BLOCK; - - return ( - <> - - { props.isSelected && isSupportedBlock && ( - - ) } - - ); - }, - 'withNavigationAddPageButton' -); - -// Register the filter. -addFilter( - 'editor.BlockEdit', - 'core/navigation/with-navigation-add-page-button', - withNavigationAddPageButton -); From ff94165e9d5e2e5363997ca4015f75f53f1ba22f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 13 Aug 2025 12:54:17 +0100 Subject: [PATCH 4/6] 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 --- .../block-library/src/navigation/edit/index.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 54c1c5bf603f5d..aa58b647abfba1 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -26,7 +26,7 @@ import { __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown, __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, useBlockEditingMode, - __unstableBlockToolbarLastItem, + BlockControls, } from '@wordpress/block-editor'; import { EntityProvider, store as coreStore } from '@wordpress/core-data'; @@ -79,6 +79,7 @@ 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. @@ -90,26 +91,20 @@ import { useToolsPanelDropdownMenuProps } from '../../utils/hooks'; function NavigationAddPageButton( { clientId } ) { const { insertBlock } = useDispatch( blockEditorStore ); const { getBlockCount } = useSelect( blockEditorStore ); - const blockEditingMode = useBlockEditingMode(); 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( 'core/navigation-link' ); + const newBlock = createBlock( DEFAULT_BLOCK.name ); // Insert the block at the end of the navigation insertBlock( newBlock, blockCount, clientId ); }, [ clientId, insertBlock, getBlockCount ] ); - // Only show when in contentOnly mode - if ( blockEditingMode !== 'contentOnly' ) { - return null; - } - return ( - <__unstableBlockToolbarLastItem> + - + ); } @@ -985,7 +980,7 @@ function Navigation( { blockEditingMode={ blockEditingMode } /> { blockEditingMode === 'default' && stylingInspectorControls } - { isEntityAvailable && ( + { blockEditingMode === 'contentOnly' && isEntityAvailable && ( ) } { blockEditingMode === 'default' && isEntityAvailable && ( From 9ea7f4d3f7386cc432e6da8f567c0ffce226191c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 13 Aug 2025 12:55:19 +0100 Subject: [PATCH 5/6] 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 --- packages/block-library/src/navigation/edit/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index aa58b647abfba1..755a505623effa 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -97,7 +97,10 @@ function NavigationAddPageButton( { clientId } ) { const blockCount = getBlockCount( clientId ); // Create a new navigation link block (default block) - const newBlock = createBlock( DEFAULT_BLOCK.name ); + const newBlock = createBlock( DEFAULT_BLOCK.name, { + kind: DEFAULT_BLOCK.kind, + type: DEFAULT_BLOCK.type, + } ); // Insert the block at the end of the navigation insertBlock( newBlock, blockCount, clientId ); From 8435b2956bb731847390c2ddbf2b48004029bba6 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 3 Sep 2025 18:08:38 +0100 Subject: [PATCH 6/6] Pull in correct attributes for new block --- packages/block-library/src/navigation/edit/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 755a505623effa..e7b28238709881 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -98,8 +98,8 @@ function NavigationAddPageButton( { clientId } ) { // Create a new navigation link block (default block) const newBlock = createBlock( DEFAULT_BLOCK.name, { - kind: DEFAULT_BLOCK.kind, - type: DEFAULT_BLOCK.type, + kind: DEFAULT_BLOCK.attributes.kind, + type: DEFAULT_BLOCK.attributes.type, } ); // Insert the block at the end of the navigation