@wordpress/editor 13.34.0 → 14.0.0

package/src/components/inserter-sidebar/index.js

@@ -2,16 +2,18 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { __experimentalLibrary as Library } from '@wordpress/block-editor';
-import { close } from '@wordpress/icons';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { ESCAPE } from '@wordpress/keycodes';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -19,58 +21,112 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
-export default function InserterSidebar( {
-	closeGeneralSidebar,
-	isRightSidebarOpen,
-} ) {
-	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
-		const { getInsertionPoint } = unlock( select( editorStore ) );
+const { PrivateInserterLibrary } = unlock( blockEditorPrivateApis );
+
+export default function InserterSidebar() {
+	const {
+		blockSectionRootClientId,
+		inserterSidebarToggleRef,
+		insertionPoint,
+		showMostUsedBlocks,
+		sidebarIsOpened,
+	} = useSelect( ( select ) => {
+		const {
+			getInserterSidebarToggleRef,
+			getInsertionPoint,
+			isPublishSidebarOpened,
+		} = unlock( select( editorStore ) );
+		const { getBlockRootClientId, __unstableGetEditorMode, getSettings } =
+			select( blockEditorStore );
 		const { get } = select( preferencesStore );
+		const { getActiveComplementaryArea } = select( interfaceStore );
+		const getBlockSectionRootClientId = () => {
+			if ( __unstableGetEditorMode() === 'zoom-out' ) {
+				const { sectionRootClientId } = unlock( getSettings() );
+				if ( sectionRootClientId ) {
+					return sectionRootClientId;
+				}
+			}
+			return getBlockRootClientId();
+		};
 		return {
+			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
 			insertionPoint: getInsertionPoint(),
 			showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
+			blockSectionRootClientId: getBlockSectionRootClientId(),
+			sidebarIsOpened: !! (
+				getActiveComplementaryArea( 'core' ) || isPublishSidebarOpened()
+			),
 		};
 	}, [] );
 	const { setIsInserterOpened } = useDispatch( editorStore );
+	const { disableComplementaryArea } = useDispatch( interfaceStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
 		focusOnMount: true,
 	} );
-
 	const libraryRef = useRef();
 
+	// When closing the inserter, focus should return to the toggle button.
+	const closeInserterSidebar = useCallback( () => {
+		setIsInserterOpened( false );
+		inserterSidebarToggleRef.current?.focus();
+	}, [ inserterSidebarToggleRef, setIsInserterOpened ] );
+
+	const closeOnEscape = useCallback(
+		( event ) => {
+			if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+				event.preventDefault();
+				closeInserterSidebar();
+			}
+		},
+		[ closeInserterSidebar ]
+	);
+
+	const inserterContents = (
+		<div className="editor-inserter-sidebar__content">
+			<PrivateInserterLibrary
+				showMostUsedBlocks={ showMostUsedBlocks }
+				showInserterHelpPanel
+				shouldFocusBlock={ isMobileViewport }
+				rootClientId={
+					blockSectionRootClientId ?? insertionPoint.rootClientId
+				}
+				__experimentalInsertionIndex={ insertionPoint.insertionIndex }
+				__experimentalInitialTab={ insertionPoint.tab }
+				__experimentalInitialCategory={ insertionPoint.category }
+				__experimentalFilterValue={ insertionPoint.filterValue }
+				onPatternCategorySelection={
+					sidebarIsOpened
+						? () => disableComplementaryArea( 'core' )
+						: undefined
+				}
+				ref={ libraryRef }
+				onClose={ closeInserterSidebar }
+			/>
+		</div>
+	);
+
+	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
+		return (
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<div
+				onKeyDown={ closeOnEscape }
+				className="editor-inserter-sidebar"
+			>
+				{ inserterContents }
+			</div>
+		);
+	}
 	return (
 		<div
 			ref={ inserterDialogRef }
 			{ ...inserterDialogProps }
 			className="editor-inserter-sidebar"
 		>
-			<TagName className="editor-inserter-sidebar__header">
-				<Button
-					icon={ close }
-					label={ __( 'Close block inserter' ) }
-					onClick={ () => setIsInserterOpened( false ) }
-				/>
-			</TagName>
-			<div className="editor-inserter-sidebar__content">
-				<Library
-					showMostUsedBlocks={ showMostUsedBlocks }
-					showInserterHelpPanel
-					shouldFocusBlock={ isMobileViewport }
-					rootClientId={ insertionPoint.rootClientId }
-					__experimentalInsertionIndex={
-						insertionPoint.insertionIndex
-					}
-					__experimentalFilterValue={ insertionPoint.filterValue }
-					__experimentalOnPatternCategorySelection={
-						isRightSidebarOpen ? closeGeneralSidebar : undefined
-					}
-					ref={ libraryRef }
-				/>
-			</div>
+			{ inserterContents }
 		</div>
 	);
 }

package/src/components/inserter-sidebar/style.scss

@@ -6,16 +6,10 @@
 	flex-direction: column;
 }
 
-.editor-inserter-sidebar__header {
-	padding-top: $grid-unit-10;
-	padding-right: $grid-unit-10;
-	display: flex;
-	justify-content: flex-end;
-}
-
 .editor-inserter-sidebar__content {
 	// Leave space for the close button
 	height: calc(100% - #{$button-size} - #{$grid-unit-10});
+
 	@include break-medium() {
 		height: 100%;
 	}

package/src/components/keyboard-shortcut-help-modal/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -52,7 +52,7 @@ const ShortcutList = ( { shortcuts } ) => (
 
 const ShortcutSection = ( { title, shortcuts, className } ) => (
 	<section
-		className={ classnames(
+		className={ clsx(
 			'editor-keyboard-shortcut-help-modal__section',
 			className
 		) }

package/src/components/list-view-sidebar/style.scss

@@ -14,6 +14,7 @@
 	}
 	.editor-list-view-sidebar__close-button {
 		background: $white;
+		/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
 		order: 1;
 		align-self: center;
 		margin-right: $grid-unit-15;

package/src/components/local-autosave-monitor/index.js

@@ -192,4 +192,16 @@ function LocalAutosaveMonitor() {
 	);
 }
 
+/**
+ * Monitors local autosaves of a post in the editor.
+ * It uses several hooks and functions to manage autosave behavior:
+ * - `useAutosaveNotice` hook: Manages the creation of a notice prompting the user to restore a local autosave, if one exists.
+ * - `useAutosavePurge` hook: Ejects a local autosave after a successful save occurs.
+ * - `hasSessionStorageSupport` function: Checks if the current environment supports browser sessionStorage.
+ * - `LocalAutosaveMonitor` component: Uses the `AutosaveMonitor` component to perform autosaves at a specified interval.
+ *
+ * The module also checks for sessionStorage support and conditionally exports the `LocalAutosaveMonitor` component based on that.
+ *
+ * @module LocalAutosaveMonitor
+ */
 export default ifCondition( hasSessionStorageSupport )( LocalAutosaveMonitor );

package/src/components/page-attributes/order.js

@@ -1,18 +1,22 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
+	Button,
+	Dropdown,
 	Flex,
 	FlexBlock,
 	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import PostPanelRow from '../post-panel-row';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
@@ -41,9 +45,10 @@ function PageAttributesOrder() {
 				<NumberControl
 					__next40pxDefaultSize
 					label={ __( 'Order' ) }
+					help={ __( 'Set the page order.' ) }
 					value={ value }
 					onChange={ setUpdatedOrder }
-					labelPosition="side"
+					hideLabelFromVision
 					onBlur={ () => {
 						setOrderInput( null );
 					} }
@@ -66,3 +71,74 @@ export default function PageAttributesOrderWithChecks() {
 		</PostTypeSupportCheck>
 	);
 }
+
+function PostOrderToggle( { isOpen, onClick } ) {
+	const order = useSelect(
+		( select ) =>
+			select( editorStore ).getEditedPostAttribute( 'menu_order' ) ?? 0,
+		[]
+	);
+	return (
+		<Button
+			size="compact"
+			className="editor-post-order__panel-toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post parent.
+			aria-label={ sprintf( __( 'Change order: %s' ), order ) }
+			onClick={ onClick }
+		>
+			{ order }
+		</Button>
+	);
+}
+
+export function OrderRow() {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+	return (
+		<PostPanelRow label={ __( 'Order' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				className="editor-post-order__panel-dropdown"
+				contentClassName="editor-post-order__panel-dialog"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<PostOrderToggle isOpen={ isOpen } onClick={ onToggle } />
+				) }
+				renderContent={ ( { onClose } ) => (
+					<div className="editor-post-order">
+						<InspectorPopoverHeader
+							title={ __( 'Order' ) }
+							onClose={ onClose }
+						/>
+						<div>
+							{ __(
+								'This attribute determines the order of pages in the Pages List block.'
+							) }
+							<p>
+								{ __(
+									'Pages with the same order value will sorted alphabetically. Negative order values are also supported.'
+								) }
+							</p>
+						</div>
+						<PageAttributesOrder />
+					</div>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}

package/src/components/page-attributes/panel.js

@@ -1,54 +1,38 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { PanelBody, PanelRow } from '@wordpress/components';
-
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 import PageAttributesCheck from './check';
-import PageAttributesOrder from './order';
-import PageAttributesParent from './parent';
+import { OrderRow } from './order';
+import { ParentRow } from './parent';
 
 const PANEL_NAME = 'page-attributes';
 
 function AttributesPanel() {
-	const { isEnabled, isOpened, postType } = useSelect( ( select ) => {
-		const {
-			getEditedPostAttribute,
-			isEditorPanelEnabled,
-			isEditorPanelOpened,
-		} = select( editorStore );
+	const { isEnabled, postType } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, isEditorPanelEnabled } =
+			select( editorStore );
 		const { getPostType } = select( coreStore );
 		return {
 			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
 			postType: getPostType( getEditedPostAttribute( 'type' ) ),
 		};
 	}, [] );
 
-	const { toggleEditorPanelOpened } = useDispatch( editorStore );
-
 	if ( ! isEnabled || ! postType ) {
 		return null;
 	}
 
 	return (
-		<PanelBody
-			title={ postType?.labels?.attributes ?? __( 'Page attributes' ) }
-			opened={ isOpened }
-			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
-		>
-			<PageAttributesParent />
-			<PanelRow>
-				<PageAttributesOrder />
-			</PanelRow>
-		</PanelBody>
+		<>
+			<ParentRow />
+			<OrderRow />
+		</>
 	);
 }
 

package/src/components/page-attributes/parent.js

@@ -6,17 +6,24 @@ import removeAccents from 'remove-accents';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { ComboboxControl } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	Button,
+	Dropdown,
+	ComboboxControl,
+	ExternalLink,
+} from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { useState, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import PostPanelRow from '../post-panel-row';
 import { buildTermsTree } from '../../utils/terms';
 import { store as editorStore } from '../../store';
 
@@ -169,12 +176,101 @@ export function PageAttributesParent() {
 			__next40pxDefaultSize
 			className="editor-page-attributes__parent"
 			label={ __( 'Parent' ) }
+			help={ __( 'Choose a parent page.' ) }
 			value={ parentPostId }
 			options={ parentOptions }
 			onFilterValueChange={ debounce( handleKeydown, 300 ) }
 			onChange={ handleChange }
+			hideLabelFromVision
 		/>
 	);
 }
 
+function PostParentToggle( { isOpen, onClick } ) {
+	const parentPost = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const parentPostId = getEditedPostAttribute( 'parent' );
+		if ( ! parentPostId ) {
+			return null;
+		}
+		const { getEntityRecord } = select( coreStore );
+		const postTypeSlug = getEditedPostAttribute( 'type' );
+		return getEntityRecord( 'postType', postTypeSlug, parentPostId );
+	}, [] );
+	const parentTitle = useMemo(
+		() => ( ! parentPost ? __( 'None' ) : getTitle( parentPost ) ),
+		[ parentPost ]
+	);
+	return (
+		<Button
+			size="compact"
+			className="editor-post-parent__panel-toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post parent.
+			aria-label={ sprintf( __( 'Change parent: %s' ), parentTitle ) }
+			onClick={ onClick }
+		>
+			{ parentTitle }
+		</Button>
+	);
+}
+
+export function ParentRow() {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+	return (
+		<PostPanelRow label={ __( 'Parent' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				className="editor-post-parent__panel-dropdown"
+				contentClassName="editor-post-parent__panel-dialog"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<PostParentToggle isOpen={ isOpen } onClick={ onToggle } />
+				) }
+				renderContent={ ( { onClose } ) => (
+					<div className="editor-post-parent">
+						<InspectorPopoverHeader
+							title={ __( 'Parent' ) }
+							onClose={ onClose }
+						/>
+						<div>
+							{ __(
+								"Child pages inherit characteristics from their parent, such as URL structure. For instance, if 'Web Design' is a child of 'Services,' its URL would be mysite.com/services/web-design."
+							) }
+							<p>
+								{ __(
+									'They also show up as sub-items in the default navigation menu. '
+								) }
+								<ExternalLink
+									href={ __(
+										'https://wordpress.org/documentation/article/page-post-settings-sidebar/#page-attributes'
+									) }
+								>
+									{ __( 'Learn more' ) }
+								</ExternalLink>
+							</p>
+						</div>
+						<PageAttributesParent />
+					</div>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}
+
 export default PageAttributesParent;

package/src/components/page-attributes/style.scss

@@ -0,0 +1,19 @@
+.editor-post-parent__panel,
+.editor-post-order__panel {
+	padding-top: $grid-unit-10;
+	.editor-post-panel__row-control > div {
+		width: 100%;
+	}
+}
+
+.editor-post-parent__panel-dialog,
+.editor-post-order__panel-dialog {
+	.editor-post-parent,
+	.editor-post-order {
+		margin: $grid-unit-10;
+	}
+
+	.components-popover__content {
+		min-width: 320px;
+	}
+}

package/src/components/page-attributes/test/order.js

@@ -22,7 +22,11 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
 function setupDataMock( order = 0 ) {
 	useSelect.mockImplementation( ( mapSelect ) =>
 		mapSelect( () => ( {
-			getPostType: () => null,
+			getPostType: () => ( {
+				supports: {
+					'page-attributes': true,
+				},
+			} ),
 			getEditedPostAttribute: ( attr ) => {
 				switch ( attr ) {
 					case 'menu_order':

package/src/components/pattern-duplicate-modal/index.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+
+const { DuplicatePatternModal } = unlock( patternsPrivateApis );
+export const modalName = 'editor/pattern-duplicate';
+
+export default function PatternDuplicateModal() {
+	const { record, postType } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _postType = getCurrentPostType();
+		return {
+			record: getEditedEntityRecord(
+				'postType',
+				_postType,
+				getCurrentPostId()
+			),
+			postType: _postType,
+		};
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( modalName )
+	);
+
+	if ( ! isActive || postType !== PATTERN_POST_TYPE ) {
+		return null;
+	}
+
+	return (
+		<DuplicatePatternModal
+			onClose={ closeModal }
+			onSuccess={ () => closeModal() }
+			pattern={ record }
+		/>
+	);
+}

package/src/components/pattern-rename-modal/index.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+
+const { RenamePatternModal } = unlock( patternsPrivateApis );
+export const modalName = 'editor/pattern-rename';
+
+export default function PatternRenameModal() {
+	const { record, postType } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _postType = getCurrentPostType();
+		return {
+			record: getEditedEntityRecord(
+				'postType',
+				_postType,
+				getCurrentPostId()
+			),
+			postType: _postType,
+		};
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( modalName )
+	);
+
+	if ( ! isActive || postType !== PATTERN_POST_TYPE ) {
+		return null;
+	}
+
+	return <RenamePatternModal onClose={ closeModal } pattern={ record } />;
+}