@wordpress/block-library 10.2.0 → 10.4.0

package/src/navigation-link/link-ui/page-creator.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	Button,
 	TextControl,
@@ -15,10 +12,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import DialogWrapper from './dialog-wrapper';
 
 /**

package/src/navigation-link/save.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { InnerBlocks } from '@wordpress/block-editor';
 
 export default function save() {

package/src/navigation-link/shared/controls.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	Button,
 	__experimentalToolsPanel as ToolsPanel,
@@ -18,10 +15,6 @@ import {
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { external } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 import { useHandleLinkChange } from './use-handle-link-change';
 import { useEntityBinding } from './use-entity-binding';

package/src/navigation-link/shared/invalid-draft-display.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 

package/src/navigation-link/shared/test/controls.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { render, screen, fireEvent } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import { Controls } from '../controls';
 
 // Mock the updateAttributes function

package/src/navigation-link/shared/test/update-attributes.test.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { updateAttributes } from '../update-attributes';
 
 describe( 'updateAttributes', () => {

package/src/navigation-link/shared/test/use-enable-link-status-validation.test.js

@@ -1,19 +1,10 @@
-/**
- * External dependencies
- */
 import { renderHook } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import { useEnableLinkStatusValidation } from '../use-enable-link-status-validation';
-
 // Mock useSelect directly at the implementation level to avoid loading complex dependencies
 jest.mock( '@wordpress/data/src/components/use-select', () => {
 	const mock = jest.fn();
 	return mock;
 } );
-
 const { useSelect } = require( '@wordpress/data' );
 
 describe( 'useEnableLinkStatusValidation', () => {

package/src/navigation-link/shared/test/use-entity-binding.js

@@ -1,20 +1,9 @@
-/**
- * External dependencies
- */
 import { renderHook, act } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import {
 	useBlockBindingsUtils,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import {
 	useEntityBinding,
 	buildNavigationLinkEntityBinding,

package/src/navigation-link/shared/test/use-handle-link-change.test.js

@@ -1,18 +1,12 @@
-/**
- * External dependencies
- */
 import { renderHook } from '@testing-library/react';
-
 // Mock the entire @wordpress/block-editor module
 jest.mock( '@wordpress/block-editor', () => ( {
 	store: {},
 } ) );
-
 // Mock the entire @wordpress/core-data module
 jest.mock( '@wordpress/core-data', () => ( {
 	store: {},
 } ) );
-
 // Mock useDispatch specifically to avoid needing to set up full data store
 jest.mock( '@wordpress/data', () => ( {
 	useDispatch: jest.fn(),
@@ -28,15 +22,7 @@ jest.mock( '@wordpress/data', () => ( {
 	} ),
 	register: jest.fn(),
 } ) );
-
-/**
- * WordPress dependencies
- */
 import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { useHandleLinkChange } from '../use-handle-link-change';
 import { updateAttributes } from '../update-attributes';
 import { useEntityBinding } from '../use-entity-binding';

package/src/navigation-link/shared/test/use-link-preview.test.js

@@ -1,21 +1,11 @@
-/**
- * External dependencies
- */
 import { renderHook } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
-
 // Mock useRemoteUrlData from block-editor
 const mockUseRemoteUrlData = jest.fn();
-
 jest.mock( '@wordpress/block-editor', () => ( {
 	privateApis: {},
 	store: {},
 } ) );
-
 // Mock the unlock function to return useRemoteUrlData, isHashLink, and isRelativePath
 jest.mock( '../../../lock-unlock', () => ( {
 	unlock: jest.fn( () => ( {
@@ -25,10 +15,6 @@ jest.mock( '../../../lock-unlock', () => ( {
 			url?.startsWith( '/' ) && ! url?.startsWith( '//' ),
 	} ) ),
 } ) );
-
-/**
- * Internal dependencies
- */
 import {
 	computeDisplayUrl,
 	computeBadges,

package/src/navigation-link/shared/update-attributes.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { escapeHTML } from '@wordpress/escape-html';
 import { safeDecodeURI, getPath } from '@wordpress/url';
 

package/src/navigation-link/shared/use-enable-link-status-validation.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 

package/src/navigation-link/shared/use-entity-binding.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useCallback } from '@wordpress/element';
 import {
 	useBlockBindingsUtils,

package/src/navigation-link/shared/use-handle-link-change.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { escapeHTML } from '@wordpress/escape-html';
-
-/**
- * Internal dependencies
- */
 import { updateAttributes } from './update-attributes';
 import { useEntityBinding } from './use-entity-binding';
 

package/src/navigation-link/shared/use-is-dragging-within.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useState, useEffect } from '@wordpress/element';
 
 /**

package/src/navigation-link/shared/use-is-invalid-link.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useBlockEditingMode } from '@wordpress/block-editor';

package/src/navigation-link/shared/use-link-preview.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { __, sprintf } from '@wordpress/i18n';
 import { safeDecodeURI } from '@wordpress/url';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../../lock-unlock';
 
 const { useRemoteUrlData, isHashLink, isRelativePath } = unlock(

package/src/navigation-link/test/__snapshots__/hooks.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and isActive functions 1`] = `
 {

package/src/navigation-link/test/block-labelling.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { _x, sprintf } from '@wordpress/i18n';
 
 /**

package/src/navigation-link/test/hooks.js

@@ -1,11 +1,5 @@
-/**
- * Internal dependencies
- */
-import { enhanceNavigationLinkVariations } from '../hooks';
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
+import { enhanceNavigationLinkVariations } from '../hooks';
 
 describe( 'hooks', () => {
 	describe( 'enhanceNavigationLinkVariations', () => {

package/src/navigation-link/transforms.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createBlock } from '@wordpress/blocks';
 
 const transforms = {

package/src/navigation-overlay-close/edit.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	InspectorControls,
 	useBlockProps,
@@ -14,10 +11,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, close } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function NavigationOverlayCloseEdit( {

package/src/navigation-overlay-close/icon.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { SVG, Path } from '@wordpress/primitives';
 
 export default (

package/src/navigation-overlay-close/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import { isWithinNavigationOverlay } from '../utils/is-within-overlay';
 import edit from './edit';

package/src/navigation-overlay-close/style.scss

@@ -1,3 +1,17 @@
+// The button element's user agent styles set `font` and `color`, which breaks
+// inheritance, so both are explicitly inherited from the overlay. Specificity is
+// lowered so that theme.json and Global Styles block level values still win.
+:where(.wp-block-navigation-overlay-close) {
+	color: inherit;
+	font-family: inherit;
+	font-size: inherit;
+	font-style: inherit;
+	font-weight: inherit;
+	letter-spacing: inherit;
+	line-height: inherit;
+	text-transform: inherit;
+}
+
 .wp-block-navigation-overlay-close {
 	display: inline-flex;
 	align-items: center;

package/src/navigation-submenu/edit.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
@@ -27,10 +20,6 @@ import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
 import { speak } from '@wordpress/a11y';
 import { createBlock } from '@wordpress/blocks';
 import { useMergeRefs, usePrevious } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { ItemSubmenuIcon } from './icons';
 import {
 	Controls,

package/src/navigation-submenu/icons.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { Path, SVG } from '@wordpress/components';
 
 export const ItemSubmenuIcon = () => (

package/src/navigation-submenu/index.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { page, addSubmenu } from '@wordpress/icons';
 import { _x, __ } from '@wordpress/i18n';
 import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';

package/src/navigation-submenu/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/navigation-submenu/save.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { InnerBlocks } from '@wordpress/block-editor';
 
 export default function save() {

package/src/navigation-submenu/transforms.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createBlock } from '@wordpress/blocks';
 
 const transforms = {

package/src/nextpage/edit.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { useBlockProps } from '@wordpress/block-editor';
 

package/src/nextpage/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { pageBreak as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import edit from './edit';
 import metadata from './block.json';

package/src/nextpage/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/nextpage/save.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { RawHTML } from '@wordpress/element';
 
 export default function save() {

package/src/nextpage/transforms.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createBlock } from '@wordpress/blocks';
 
 const transforms = {

package/src/page-list/edit.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { createBlock } from '@wordpress/blocks';
 import {
 	InspectorControls,
@@ -24,26 +17,41 @@ 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';
-
-/**
- * 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 (
+		<ConfirmDialog
+			isOpen
+			title={ __( 'Detach Page List' ) }
+			__experimentalHideHeader={ false }
+			confirmButtonText={ __( 'Detach' ) }
+			onConfirm={ onConfirm }
+			onCancel={ onCancel }
+			isBusy={ isBusy }
+			size="medium"
+		>
+			{ __(
+				"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."
+			) }
+		</ConfirmDialog>
+	);
+}
+
 function BlockContent( {
 	blockProps,
 	innerBlocksProps,
@@ -122,9 +130,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 +306,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 +349,21 @@ export default function PageListEdit( {
 						) }
 
 						{ allowConvertToLinks && (
-							<div style={ { gridColumn: '1 / -1' } }>
-								<p>{ convertDescription }</p>
-								<Button
-									__next40pxDefaultSize
-									variant="primary"
-									accessibleWhenDisabled
-									disabled={ ! hasResolvedPages }
-									onClick={ convertToNavigationLinks }
-								>
-									{ __( 'Edit' ) }
-								</Button>
-							</div>
+							<Button
+								__next40pxDefaultSize
+								variant="secondary"
+								accessibleWhenDisabled
+								disabled={ ! hasResolvedPages }
+								onClick={ () => setIsConfirmingDetach( true ) }
+								// Not a ToolsPanelItem, so it needs to opt into
+								// spanning the panel's two-column grid.
+								style={ {
+									gridColumn: '1 / -1',
+									justifyContent: 'center',
+								} }
+							>
+								{ __( 'Detach Page List' ) }
+							</Button>
 						) }
 					</ToolsPanel>
 				</InspectorControls>
@@ -369,17 +372,23 @@ export default function PageListEdit( {
 				<>
 					<BlockControls group="other">
 						<ToolbarButton
-							title={ __( 'Edit' ) }
-							onClick={ openModal }
+							title={ __( 'Detach' ) }
+							disabled={ ! hasResolvedPages }
+							onClick={ () => setIsConfirmingDetach( true ) }
 						>
-							{ __( 'Edit' ) }
+							{ __( 'Detach' ) }
 						</ToolbarButton>
 					</BlockControls>
-					{ isOpen && (
-						<ConvertToLinksModal
-							onClick={ convertToNavigationLinks }
-							onClose={ closeModal }
-							disabled={ ! hasResolvedPages }
+					{ isConfirmingDetach && (
+						<DetachPageListDialog
+							// Converting a still-resolving list would map over
+							// an incomplete (or empty) set of pages.
+							isBusy={ ! hasResolvedPages }
+							onConfirm={ () => {
+								convertToNavigationLinks();
+								setIsConfirmingDetach( false );
+							} }
+							onCancel={ () => setIsConfirmingDetach( false ) }
 						/>
 					) }
 				</>

package/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 {