diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index d18ac79b8270c6..542aa662a73da0 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -438,7 +438,7 @@ Displays a page inside a list of all pages. ([Source](https://github.com/WordPre
- **Name:** core/page-list-item
- **Category:** widgets
- **Supports:** ~~html~~, ~~inserter~~, ~~lock~~, ~~reusable~~
-- **Attributes:** hasChildren, id, label, link, title
+- **Attributes:** hasChildren, id, label, link, onSelect, title
## Paragraph
diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js
index 4066aba9f1f9c5..b1423227790b1b 100644
--- a/packages/block-editor/src/components/off-canvas-editor/index.js
+++ b/packages/block-editor/src/components/off-canvas-editor/index.js
@@ -114,10 +114,16 @@ function OffCanvasEditor(
} );
const selectEditorBlock = useCallback(
( event, blockClientId ) => {
- updateBlockSelection( event, blockClientId );
- setSelectedTreeId( blockClientId );
+ let blockSelectionResult;
if ( onSelect ) {
- onSelect( getBlock( blockClientId ) );
+ blockSelectionResult = onSelect(
+ getBlock( blockClientId ),
+ event
+ );
+ }
+ if ( blockSelectionResult !== false ) {
+ updateBlockSelection( event, blockClientId );
+ setSelectedTreeId( blockClientId );
}
},
[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
index 5eb32b5c8eac76..69dbcffe89f4f7 100644
--- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -73,6 +73,13 @@ const MainContent = ( {
isExpanded={ true }
LeafMoreMenu={ LeafMoreMenu }
description={ description }
+ onSelect={ ( block ) => {
+ const onSelect = block.attributes?.onSelect;
+ if ( onSelect ) {
+ // If this returns false, then the block won't be selected.
+ return onSelect( block );
+ }
+ } }
/>
);
};
diff --git a/packages/block-library/src/page-list-item/block.json b/packages/block-library/src/page-list-item/block.json
index 04e7f7f574dd25..f83a2ffd3f0d66 100644
--- a/packages/block-library/src/page-list-item/block.json
+++ b/packages/block-library/src/page-list-item/block.json
@@ -23,6 +23,9 @@
},
"hasChildren": {
"type": "boolean"
+ },
+ "onSelect": {
+ "type": "function"
}
},
"usesContext": [
diff --git a/packages/block-library/src/page-list/convert-to-links-modal.js b/packages/block-library/src/page-list/convert-to-links-modal.js
new file mode 100644
index 00000000000000..50d360fbe8dd61
--- /dev/null
+++ b/packages/block-library/src/page-list/convert-to-links-modal.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export const convertDescription = __(
+ 'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking "Edit" below.'
+);
+
+export function ConvertToLinksModal( { onClick, disabled, closeModal } ) {
+ return (
+
+
+ { convertDescription }
+
+
+
+
+
+
+ );
+}
diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
index b3719aa4993871..b1824a02f70d22 100644
--- a/packages/block-library/src/page-list/edit.js
+++ b/packages/block-library/src/page-list/edit.js
@@ -8,8 +8,8 @@ import classnames from 'classnames';
*/
import { createBlock } from '@wordpress/blocks';
import {
- InspectorControls,
BlockControls,
+ InspectorControls,
useBlockProps,
useInnerBlocksProps,
getColorClassName,
@@ -18,12 +18,11 @@ import {
} from '@wordpress/block-editor';
import {
PanelBody,
- ToolbarButton,
Spinner,
Notice,
ComboboxControl,
Button,
- Modal,
+ ToolbarButton,
} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { useMemo, useState, useEffect } from '@wordpress/element';
@@ -34,16 +33,15 @@ import { useSelect } from '@wordpress/data';
* Internal dependencies
*/
import { useConvertToNavigationLinks } from './use-convert-to-navigation-links';
+import {
+ convertDescription,
+ ConvertToLinksModal,
+} from './convert-to-links-modal';
// We only show the edit option when page count is <= MAX_PAGE_COUNT
// Performance of Navigation Links is not good past this value.
const MAX_PAGE_COUNT = 100;
const NOOP = () => {};
-
-const convertDescription = __(
- 'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking "Edit" below.'
-);
-
function BlockContent( {
blockProps,
innerBlocksProps,
@@ -113,48 +111,6 @@ function BlockContent( {
}
}
-function ConvertToLinksModal( { onClick, disabled } ) {
- const [ isOpen, setOpen ] = useState( false );
- const openModal = () => setOpen( true );
- const closeModal = () => setOpen( false );
-
- return (
- <>
-
-
- { __( 'Edit' ) }
-
-
- { isOpen && (
-
-
- { convertDescription }
-
-
-
-
-
-
- ) }
-
- );
-}
-
export default function PageListEdit( {
context,
clientId,
@@ -182,6 +138,10 @@ export default function PageListEdit( {
pages?.length > 0 &&
pages?.length <= MAX_PAGE_COUNT;
+ const [ isModalOpen, setModalOpen ] = useState( false );
+ const openModal = () => setModalOpen( true );
+ const closeModal = () => setModalOpen( false );
+
const convertToNavigationLinks = useConvertToNavigationLinks( {
clientId,
pages,
@@ -242,6 +202,10 @@ export default function PageListEdit( {
title: page.title?.rendered,
link: page.url,
hasChildren,
+ onSelect: () => {
+ openModal();
+ return false;
+ },
};
let item = null;
const children = getBlockList( page.id );
@@ -312,6 +276,11 @@ export default function PageListEdit( {
return (
<>
+
+
+ { __( 'Edit' ) }
+
+
{ pagesTree.length > 0 && (
@@ -342,10 +311,11 @@ export default function PageListEdit( {
) }
- { allowConvertToLinks && (
+ { allowConvertToLinks && isModalOpen && (
) }