Update: Make changing order an action on the ellipsis menu. (WordPres…

…s#62189)

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>

packages/editor/README.md

@@ -532,7 +532,7 @@ _Returns_
 
 ### PageAttributesOrder
 
-Renders the Page Attributes Order component. A number input in an editor interface for setting the order of a given page.
+Renders the Page Attributes Order component. A number input in an editor interface for setting the order of a given page. The component is now not used in core but was kept for backward compatibility.
 
 _Returns_
 

packages/editor/src/components/page-attributes/order.js

@@ -1,22 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
-	Button,
-	Dropdown,
 	Flex,
 	FlexBlock,
 	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useMemo } from '@wordpress/element';
-import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import PostPanelRow from '../post-panel-row';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
@@ -61,6 +57,7 @@ function PageAttributesOrder() {
 /**
  * Renders the Page Attributes Order component. A number input in an editor interface
  * for setting the order of a given page.
+ * The component is now not used in core but was kept for backward compatibility.
  *
  * @return {Component} The component to be rendered.
  */
@@ -71,74 +68,3 @@ 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>
-	);
-}

packages/editor/src/components/page-attributes/panel.js

@@ -8,7 +8,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 import PageAttributesCheck from './check';
-import { OrderRow } from './order';
 import { ParentRow } from './parent';
 
 const PANEL_NAME = 'page-attributes';
@@ -28,12 +27,7 @@ function AttributesPanel() {
 		return null;
 	}
 
-	return (
-		<>
-			<ParentRow />
-			<OrderRow />
-		</>
-	);
+	return <ParentRow />;
 }
 
 /**

packages/editor/src/components/post-actions/actions.js

@@ -18,6 +18,7 @@ import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
 
 /**
@@ -633,6 +634,114 @@ function useRenamePostAction( postType ) {
 	);
 }
 
+function ReorderModal( { items, closeModal, onActionPerformed } ) {
+	const [ item ] = items;
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const [ orderInput, setOrderInput ] = useState( item.menu_order );
+
+	async function onOrder( event ) {
+		event.preventDefault();
+		if (
+			! Number.isInteger( Number( orderInput ) ) ||
+			orderInput?.trim?.() === ''
+		) {
+			return;
+		}
+		try {
+			await editEntityRecord( 'postType', item.type, item.id, {
+				menu_order: orderInput,
+			} );
+			closeModal();
+			// Persist edited entity.
+			await saveEditedEntityRecord( 'postType', item.type, item.id, {
+				throwOnError: true,
+			} );
+			createSuccessNotice( __( 'Order updated' ), {
+				type: 'snackbar',
+			} );
+			onActionPerformed?.( items );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the order' );
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	}
+	const saveIsDisabled =
+		! Number.isInteger( Number( orderInput ) ) ||
+		orderInput?.trim?.() === '';
+	return (
+		<form onSubmit={ onOrder }>
+			<VStack spacing="5">
+				<div>
+					{ __(
+						'Determines the order of pages. Pages with the same order value are sorted alphabetically. Negative order values are supported.'
+					) }
+				</div>
+				<NumberControl
+					__next40pxDefaultSize
+					label={ __( 'Order' ) }
+					help={ __( 'Set the page order.' ) }
+					value={ orderInput }
+					onChange={ setOrderInput }
+				/>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							closeModal();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						accessibleWhenDisabled
+						disabled={ saveIsDisabled }
+						__experimentalIsFocusable
+					>
+						{ __( 'Save' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+function useReorderPagesAction( postType ) {
+	const supportsPageAttributes = useSelect(
+		( select ) => {
+			const { getPostType } = select( coreStore );
+			const postTypeObject = getPostType( postType );
+
+			return !! postTypeObject?.supports?.[ 'page-attributes' ];
+		},
+		[ postType ]
+	);
+
+	return useMemo(
+		() =>
+			supportsPageAttributes && {
+				id: 'order-pages',
+				label: __( 'Order' ),
+				isEligible( { status } ) {
+					return status !== 'trash';
+				},
+				RenderModal: ReorderModal,
+			},
+		[ supportsPageAttributes ]
+	);
+}
+
 const useDuplicatePostAction = ( postType ) => {
 	const userCanCreatePost = useSelect(
 		( select ) => {
@@ -890,6 +999,7 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		usePermanentlyDeletePostAction( postType );
 	const renamePostActionForPostType = useRenamePostAction( postType );
 	const restorePostActionForPostType = useRestorePostAction( postType );
+	const reorderPagesAction = useReorderPagesAction( postType );
 	const isTemplateOrTemplatePart = [
 		TEMPLATE_POST_TYPE,
 		TEMPLATE_PART_POST_TYPE,
@@ -916,6 +1026,7 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 				duplicateTemplatePartAction,
 			isPattern && userCanCreatePostType && duplicatePatternAction,
 			supportsTitle && renamePostActionForPostType,
+			reorderPagesAction,
 			! isTemplateOrTemplatePart && restorePostActionForPostType,
 			! isTemplateOrTemplatePart &&
 				! isPattern &&
@@ -995,6 +1106,7 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		isPattern,
 		postTypeObject?.viewable,
 		duplicatePostAction,
+		reorderPagesAction,
 		trashPostActionForPostType,
 		restorePostActionForPostType,
 		renamePostActionForPostType,