diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index d9d6f52dd3a939..cb60a37a4828a4 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -6,6 +6,7 @@ - Playlist: Shorten the track toolbar button label from "Add track" to "Add". - Gallery: Rename the dynamic variation's "Convert to images" action to "Detach", and confirm it in a dialog explaining that the gallery will keep its current images but stop updating automatically ([#80727](https://github.com/WordPress/gutenberg/pull/80727)). +- Page List: Rename the "Edit" action to "Detach", and confirm it in a dialog explaining that the list will keep its current pages but stop adding new ones automatically, matching the Gallery block ([#80847](https://github.com/WordPress/gutenberg/pull/80847)). ### Bug Fixes 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 deleted file mode 100644 index f2ab425a1ef10a..00000000000000 --- a/packages/block-library/src/page-list/convert-to-links-modal.js +++ /dev/null @@ -1,53 +0,0 @@ -/** - * WordPress dependencies - */ -import { Button, Modal } from '@wordpress/components'; -import { useInstanceId } from '@wordpress/compose'; -import { __ } from '@wordpress/i18n'; - -export const convertDescription = __( - "This Navigation Menu displays your website's pages. Editing it will enable you to add, delete, or reorder pages. However, new pages will no longer be added automatically." -); - -export function ConvertToLinksModal( { onClick, onClose, disabled } ) { - return ( - -

- { convertDescription } -

-
- - -
- - ); -} diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js index 037b4c1042823a..f5e5b451ec7108 100644 --- a/packages/block-library/src/page-list/edit.js +++ b/packages/block-library/src/page-list/edit.js @@ -24,9 +24,10 @@ import { Button, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, + __experimentalConfirmDialog as ConfirmDialog, } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; -import { useMemo, useState, useEffect, useCallback } from '@wordpress/element'; +import { useMemo, useState, useEffect } from '@wordpress/element'; import { useEntityRecords } from '@wordpress/core-data'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -34,16 +35,34 @@ import { useSelect, useDispatch } from '@wordpress/data'; * Internal dependencies */ import { useConvertToNavigationLinks } from './use-convert-to-navigation-links'; -import { - convertDescription, - ConvertToLinksModal, -} from './convert-to-links-modal'; import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; -// We only show the edit option when page count is <= MAX_PAGE_COUNT +// We only show the detach 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 = () => {}; + +// Shown from both the block toolbar and the Settings panel so the two entry +// points explain the change identically. +function DetachPageListDialog( { isBusy, onConfirm, onCancel } ) { + return ( + + { __( + "This Navigation Menu displays your website's pages. Detaching will enable you to add, delete, or reorder pages. However, new pages will no longer be added automatically." + ) } + + ); +} + function BlockContent( { blockProps, innerBlocksProps, @@ -122,9 +141,7 @@ export default function PageListEdit( { setAttributes, } ) { const { parentPageID } = attributes; - const [ isOpen, setOpen ] = useState( false ); - const openModal = useCallback( () => setOpen( true ), [] ); - const closeModal = () => setOpen( false ); + const [ isConfirmingDetach, setIsConfirmingDetach ] = useState( false ); const dropdownMenuProps = useToolsPanelDropdownMenuProps(); const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords( @@ -300,16 +317,10 @@ export default function PageListEdit( { useEffect( () => { if ( hasSelectedChild || hasDraggedChild ) { - openModal(); + setIsConfirmingDetach( true ); selectBlock( parentClientId ); } - }, [ - hasSelectedChild, - hasDraggedChild, - parentClientId, - selectBlock, - openModal, - ] ); + }, [ hasSelectedChild, hasDraggedChild, parentClientId, selectBlock ] ); return ( <> @@ -349,18 +360,21 @@ export default function PageListEdit( { ) } { allowConvertToLinks && ( -
-

{ convertDescription }

- -
+ ) } @@ -369,17 +383,23 @@ export default function PageListEdit( { <> setIsConfirmingDetach( true ) } > - { __( 'Edit' ) } + { __( 'Detach' ) } - { isOpen && ( - { + convertToNavigationLinks(); + setIsConfirmingDetach( false ); + } } + onCancel={ () => setIsConfirmingDetach( false ) } /> ) } diff --git a/packages/block-library/src/page-list/editor.scss b/packages/block-library/src/page-list/editor.scss index 2813dc1675b8ea..34ce584a11441e 100644 --- a/packages/block-library/src/page-list/editor.scss +++ b/packages/block-library/src/page-list/editor.scss @@ -1,5 +1,3 @@ -@use "@wordpress/base-styles/breakpoints" as *; -@use "@wordpress/base-styles/mixins" as *; @use "@wordpress/base-styles/variables" as *; .wp-block-navigation { @@ -29,19 +27,6 @@ pointer-events: none; } -// Modal that shows conversion option. -.wp-block-page-list-modal { - @include break-small() { - max-width: $break-mobile; - } -} - -.wp-block-page-list-modal-buttons { - display: flex; - justify-content: flex-end; - gap: $grid-unit-15; -} - // Simulate open on click behaviour in the editor by opening on focus instead. .wp-block-page-list { diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index e189c0391854c1..167663489c446e 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -1541,24 +1541,27 @@ test.describe( 'Navigation block', () => { const itemCount = await pageItems.count(); expect( itemCount ).toBeGreaterThan( 0 ); - // Step 4: Convert Page List using Edit button + // Step 4: Convert Page List using the Detach button // Select the Page List block await editor.selectBlocks( pageListBlock ); - // Try using the toolbar Edit button instead - const editButton = page - .getByRole( 'button', { name: 'Edit' } ) + // Try using the toolbar Detach button instead + const detachButton = page + .getByRole( 'button', { name: 'Detach' } ) .first(); - await expect( editButton ).toBeVisible(); + await expect( detachButton ).toBeVisible(); - await editButton.click(); + await detachButton.click(); - // Wait for modal and approve conversion - await expect( - page.getByRole( 'dialog', { name: 'Edit Page List' } ) - ).toBeVisible(); + // Wait for the confirmation dialog and approve conversion + const detachDialog = page.getByRole( 'dialog', { + name: 'Detach Page List', + } ); + await expect( detachDialog ).toBeVisible(); - await page.getByRole( 'button', { name: 'Edit' } ).last().click(); + await detachDialog + .getByRole( 'button', { name: 'Detach' } ) + .click(); // Wait for conversion - check that Page List is gone await expect( pageListBlock ).toBeHidden();