diff --git a/packages/editor/README.md b/packages/editor/README.md index a019411ef53ed1..89ea15ef378495 100644 --- a/packages/editor/README.md +++ b/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_ diff --git a/packages/editor/src/components/page-attributes/order.js b/packages/editor/src/components/page-attributes/order.js index 17746ca8237d6f..c5f02c71b613d4 100644 --- a/packages/editor/src/components/page-attributes/order.js +++ b/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() { ); } - -function PostOrderToggle( { isOpen, onClick } ) { - const order = useSelect( - ( select ) => - select( editorStore ).getEditedPostAttribute( 'menu_order' ) ?? 0, - [] - ); - return ( - - ); -} - -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 ( - - ( - - ) } - renderContent={ ( { onClose } ) => ( -
- -
- { __( - 'This attribute determines the order of pages in the Pages List block.' - ) } -

- { __( - 'Pages with the same order value will sorted alphabetically. Negative order values are also supported.' - ) } -

-
- -
- ) } - /> -
- ); -} diff --git a/packages/editor/src/components/page-attributes/panel.js b/packages/editor/src/components/page-attributes/panel.js index 69bbf96206547c..7fcaf4b90d9ffe 100644 --- a/packages/editor/src/components/page-attributes/panel.js +++ b/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 ( - <> - - - - ); + return ; } /** diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js index e8e33b9d61e694..eead36ff5e88d5 100644 --- a/packages/editor/src/components/post-actions/actions.js +++ b/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 ( +
+ +
+ { __( + 'Determines the order of pages. Pages with the same order value are sorted alphabetically. Negative order values are supported.' + ) } +
+ + + + + +
+
+ ); +} + +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,