Skip to content

Page List: Invoke the convert to links modal on any interactions with the page list item block #47748

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
scruffian wants to merge 4 commits into from
Closed

Page List: Invoke the convert to links modal on any interactions with the page list item block #47748

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e59424
Page List: Move modal to it's own file
scruffian Feb 3, 2023
bc2fe35
make the modal an uncontrolled component
scruffian Feb 3, 2023
936cc34
Prevent block selection on Page List Item blocks
scruffian Feb 3, 2023
6e159aa
Update packages/block-library/src/navigation/edit/menu-inspector-cont…
scruffian Feb 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
12 changes: 9 additions & 3 deletions packages/block-editor/src/components/off-canvas-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Copy link
Contributor Author

@scruffian scruffian Feb 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is needed to allow blocks to prevent their selection.

updateBlockSelection( event, blockClientId );
setSelectedTreeId( blockClientId );
}
},
[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
Expand Down
7 changes: 7 additions & 0 deletions packages/block-library/src/navigation/edit/menu-inspector-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}
} }
/>
);
};
Expand Down
3 changes: 3 additions & 0 deletions packages/block-library/src/page-list-item/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@
},
"hasChildren": {
"type": "boolean"
},
"onSelect": {
"type": "function"
}
},
"usesContext": [
Expand Down
38 changes: 38 additions & 0 deletions packages/block-library/src/page-list/convert-to-links-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 } ) {
Copy link
Contributor Author

@scruffian scruffian Feb 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to convert this into a controlled component so it could be invoked from other places.

return (
<Modal
onRequestClose={ closeModal }
title={ __( 'Edit this menu' ) }
className={ 'wp-block-page-list-modal' }
aria={ {
describedby: 'wp-block-page-list-modal__description',
} }
>
<p id={ 'wp-block-page-list-modal__description' }>
{ convertDescription }
</p>
<div className="wp-block-page-list-modal-buttons">
<Button variant="tertiary" onClick={ closeModal }>
{ __( 'Cancel' ) }
</Button>
<Button
variant="primary"
disabled={ disabled }
onClick={ onClick }
>
{ __( 'Edit' ) }
</Button>
</div>
</Modal>
);
}
72 changes: 21 additions & 51 deletions packages/block-library/src/page-list/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import classnames from 'classnames';
*/
import { createBlock } from '@wordpress/blocks';
import {
InspectorControls,
BlockControls,
InspectorControls,
useBlockProps,
useInnerBlocksProps,
getColorClassName,
Expand All @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -113,48 +111,6 @@ function BlockContent( {
}
}

function ConvertToLinksModal( { onClick, disabled } ) {
const [ isOpen, setOpen ] = useState( false );
const openModal = () => setOpen( true );
const closeModal = () => setOpen( false );

return (
<>
<BlockControls group="other">
<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
{ __( 'Edit' ) }
</ToolbarButton>
</BlockControls>
{ isOpen && (
<Modal
onRequestClose={ closeModal }
title={ __( 'Edit this menu' ) }
className={ 'wp-block-page-list-modal' }
aria={ {
describedby: 'wp-block-page-list-modal__description',
} }
>
<p id={ 'wp-block-page-list-modal__description' }>
{ convertDescription }
</p>
<div className="wp-block-page-list-modal-buttons">
<Button variant="tertiary" onClick={ closeModal }>
{ __( 'Cancel' ) }
</Button>
<Button
variant="primary"
disabled={ disabled }
onClick={ onClick }
>
{ __( 'Edit' ) }
</Button>
</div>
</Modal>
) }
</>
);
}

export default function PageListEdit( {
context,
clientId,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -242,6 +202,10 @@ export default function PageListEdit( {
title: page.title?.rendered,
link: page.url,
hasChildren,
onSelect: () => {
openModal();
return false;
Copy link
Contributor Author

@scruffian scruffian Feb 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

returning false stops the block being selected in the canvas.

},
};
let item = null;
const children = getBlockList( page.id );
Expand Down Expand Up @@ -312,6 +276,11 @@ export default function PageListEdit( {

return (
<>
<BlockControls group="other">
<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
{ __( 'Edit' ) }
</ToolbarButton>
</BlockControls>
<InspectorControls>
{ pagesTree.length > 0 && (
<PanelBody>
Expand Down Expand Up @@ -342,10 +311,11 @@ export default function PageListEdit( {
</PanelBody>
) }
</InspectorControls>
{ allowConvertToLinks && (
{ allowConvertToLinks && isModalOpen && (
<ConvertToLinksModal
disabled={ ! hasResolvedPages }
onClick={ convertToNavigationLinks }
closeModal={ closeModal }
/>
) }
<BlockContent
Expand Down