Make order visible if it has a value

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

@@ -1,27 +1,26 @@
 /**
  * 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';
 
-function PageAttributesOrder() {
-	const order = useSelect(
-		( select ) =>
-			select( editorStore ).getEditedPostAttribute( 'menu_order' ) ?? 0,
-		[]
-	);
+function PageAttributesOrder( { order = 0 } ) {
 	const { editPost } = useDispatch( editorStore );
 	const [ orderInput, setOrderInput ] = useState( null );
 
@@ -57,7 +56,6 @@ 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.
  */
@@ -68,3 +66,82 @@ 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() {
+	const order = useSelect(
+		( select ) =>
+			select( editorStore ).getEditedPostAttribute( 'menu_order' ),
+		[]
+	);
+	// 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 ]
+	);
+	if ( ! order ) {
+		return null;
+	}
+	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 order={ order } />
+					</div>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}

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

@@ -8,6 +8,7 @@ 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';
@@ -27,7 +28,12 @@ function AttributesPanel() {
 		return null;
 	}
 
-	return <ParentRow />;
+	return (
+		<>
+			<ParentRow />
+			<OrderRow />
+		</>
+	);
 }
 
 /**
@@ -41,4 +47,4 @@ export default function PageAttributesPanel() {
 			<AttributesPanel />
 		</PageAttributesCheck>
 	);
-}
+}