From 1e59424d9b2e16f038f89d7cb34dc9c24bf96826 Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 3 Feb 2023 16:29:55 +0000 Subject: [PATCH 1/4] Page List: Move modal to it's own file --- .../src/page-list/convert-to-links-modal.js | 53 ++++++++++++++++++ packages/block-library/src/page-list/edit.js | 56 ++----------------- 2 files changed, 58 insertions(+), 51 deletions(-) create mode 100644 packages/block-library/src/page-list/convert-to-links-modal.js 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..0afcea88d877c6 --- /dev/null +++ b/packages/block-library/src/page-list/convert-to-links-modal.js @@ -0,0 +1,53 @@ +/** + * WordPress dependencies + */ +import { BlockControls } from '@wordpress/block-editor'; +import { ToolbarButton, Button, Modal } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { useState } from '@wordpress/element'; + +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 } ) { + const [ isOpen, setOpen ] = useState( false ); + const openModal = () => setOpen( true ); + const closeModal = () => setOpen( false ); + + return ( + <> + + + { __( 'Edit' ) } + + + { isOpen && ( + +

+ { convertDescription } +

+
+ + +
+ + ) } + + ); +} diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js index b3719aa4993871..50419cf5ea9134 100644 --- a/packages/block-library/src/page-list/edit.js +++ b/packages/block-library/src/page-list/edit.js @@ -9,7 +9,6 @@ import classnames from 'classnames'; import { createBlock } from '@wordpress/blocks'; import { InspectorControls, - BlockControls, useBlockProps, useInnerBlocksProps, getColorClassName, @@ -18,15 +17,13 @@ import { } from '@wordpress/block-editor'; import { PanelBody, - ToolbarButton, Spinner, Notice, ComboboxControl, Button, - Modal, } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; -import { useMemo, useState, useEffect } from '@wordpress/element'; +import { useMemo, useEffect } from '@wordpress/element'; import { useEntityRecords } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; @@ -34,16 +31,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 +109,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, From bc2fe350d5c5394a2409da7400f9976f9c386413 Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 3 Feb 2023 16:54:15 +0000 Subject: [PATCH 2/4] make the modal an uncontrolled component --- .../src/page-list/convert-to-links-modal.js | 65 +++++++------------ packages/block-library/src/page-list/edit.js | 16 ++++- 2 files changed, 39 insertions(+), 42 deletions(-) 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 index 0afcea88d877c6..50d360fbe8dd61 100644 --- a/packages/block-library/src/page-list/convert-to-links-modal.js +++ b/packages/block-library/src/page-list/convert-to-links-modal.js @@ -1,53 +1,38 @@ /** * WordPress dependencies */ -import { BlockControls } from '@wordpress/block-editor'; -import { ToolbarButton, Button, Modal } from '@wordpress/components'; +import { Button, Modal } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; 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 } ) { - const [ isOpen, setOpen ] = useState( false ); - const openModal = () => setOpen( true ); - const closeModal = () => setOpen( false ); - +export function ConvertToLinksModal( { onClick, disabled, closeModal } ) { return ( - <> - - - { __( 'Edit' ) } - - - { isOpen && ( - +

+ { convertDescription } +

+
+ + - -
- - ) } - + { __( 'Edit' ) } + + + ); } diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js index 50419cf5ea9134..40a3e3fd9d3e5c 100644 --- a/packages/block-library/src/page-list/edit.js +++ b/packages/block-library/src/page-list/edit.js @@ -8,6 +8,7 @@ import classnames from 'classnames'; */ import { createBlock } from '@wordpress/blocks'; import { + BlockControls, InspectorControls, useBlockProps, useInnerBlocksProps, @@ -21,9 +22,10 @@ import { Notice, ComboboxControl, Button, + ToolbarButton, } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; -import { useMemo, useEffect } from '@wordpress/element'; +import { useMemo, useState, useEffect } from '@wordpress/element'; import { useEntityRecords } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; @@ -136,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, @@ -266,6 +272,11 @@ export default function PageListEdit( { return ( <> + + + { __( 'Edit' ) } + + { pagesTree.length > 0 && ( @@ -296,10 +307,11 @@ export default function PageListEdit( { ) } - { allowConvertToLinks && ( + { allowConvertToLinks && isModalOpen && ( ) } Date: Fri, 3 Feb 2023 18:42:34 +0000 Subject: [PATCH 3/4] Prevent block selection on Page List Item blocks --- docs/reference-guides/core-blocks.md | 2 +- .../src/components/off-canvas-editor/index.js | 12 +++++++++--- .../src/navigation/edit/menu-inspector-controls.js | 7 +++++++ packages/block-library/src/page-list-item/block.json | 3 +++ packages/block-library/src/page-list/edit.js | 4 ++++ 5 files changed, 24 insertions(+), 4 deletions(-) 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..364b326faddb2b 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 fasle, 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/edit.js b/packages/block-library/src/page-list/edit.js index 40a3e3fd9d3e5c..b1824a02f70d22 100644 --- a/packages/block-library/src/page-list/edit.js +++ b/packages/block-library/src/page-list/edit.js @@ -202,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 ); From 6e159aa5b359dd69e594ac2702285a20837dc84b Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 3 Feb 2023 18:59:43 +0000 Subject: [PATCH 4/4] Update packages/block-library/src/navigation/edit/menu-inspector-controls.js --- .../src/navigation/edit/menu-inspector-controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 364b326faddb2b..69dbcffe89f4f7 100644 --- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js +++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js @@ -76,7 +76,7 @@ const MainContent = ( { onSelect={ ( block ) => { const onSelect = block.attributes?.onSelect; if ( onSelect ) { - // If this returns fasle, then the block won't be selected. + // If this returns false, then the block won't be selected. return onSelect( block ); } } }