Add menu_order sorting option to Query Loop block

packages/block-library/src/latest-posts/edit.js

@@ -81,6 +81,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		postsToShow,
 		order,
 		orderBy,
+		orderByOptions,
 		categories,
 		selectedAuthor,
 		displayFeaturedImage,
@@ -372,7 +373,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 			<PanelBody title={ __( 'Sorting and filtering' ) }>
 				<QueryControls
-					{ ...{ order, orderBy } }
+					{ ...{ order, orderBy, orderByOptions } }
 					numberOfItems={ postsToShow }
 					onOrderChange={ ( value ) =>
 						setAttributes( { order: value } )

packages/block-library/src/latest-posts/edit.native.js

@@ -148,6 +148,7 @@ class LatestPostsEdit extends Component {
 			addLinkToFeaturedImage,
 			order,
 			orderBy,
+			orderByOptions,
 			postsToShow,
 			categories,
 		} = attributes;
@@ -215,7 +216,7 @@ class LatestPostsEdit extends Component {
 
 				<PanelBody title={ __( 'Sorting and filtering' ) }>
 					<QueryControls
-						{ ...{ order, orderBy } }
+						{ ...{ order, orderBy, orderByOptions } }
 						numberOfItems={ postsToShow }
 						categoriesList={ categoriesList }
 						selectedCategoryId={

packages/block-library/src/query/edit/inspector-controls/index.js

@@ -35,6 +35,7 @@ import {
 	useAllowedControls,
 	isControlAllowed,
 	useTaxonomies,
+	useOrderByOptions,
 } from '../../utils';
 import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
@@ -111,6 +112,7 @@ export default function QueryInspectorControls( props ) {
 		return onChangeDebounced.cancel;
 	}, [ querySearch, onChangeDebounced ] );
 
+	const orderByOptions = useOrderByOptions( postType );
 	const showInheritControl =
 		! isSingular && isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
@@ -329,7 +331,7 @@ export default function QueryInspectorControls( props ) {
 							isShownByDefault
 						>
 							<OrderControl
-								{ ...{ order, orderBy } }
+								{ ...{ order, orderBy, orderByOptions } }
 								onChange={ setQuery }
 							/>
 						</ToolsPanelItem>

packages/block-library/src/query/edit/inspector-controls/order-control.js

@@ -4,34 +4,14 @@
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const orderOptions = [
-	{
-		label: __( 'Newest to oldest' ),
-		value: 'date/desc',
-	},
-	{
-		label: __( 'Oldest to newest' ),
-		value: 'date/asc',
-	},
-	{
-		/* translators: Label for ordering posts by title in ascending order. */
-		label: __( 'A → Z' ),
-		value: 'title/asc',
-	},
-	{
-		/* translators: Label for ordering posts by title in descending order. */
-		label: __( 'Z → A' ),
-		value: 'title/desc',
-	},
-];
-function OrderControl( { order, orderBy, onChange } ) {
+function OrderControl( { order, orderBy, orderByOptions, onChange } ) {
 	return (
 		<SelectControl
 			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
-			options={ orderOptions }
+			options={ orderByOptions }
 			onChange={ ( value ) => {
 				const [ newOrderBy, newOrder ] = value.split( '/' );
 				onChange( { order: newOrder, orderBy: newOrderBy } );

packages/block-library/src/query/utils.js

@@ -6,13 +6,15 @@ import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
 import {
 	cloneBlock,
 	getBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
+/** @typedef {import('@wordpress/components/build-types/query-controls/types').OrderByOption} OrderByOption */
 
 /**
  * @typedef IHasNameAndId
@@ -186,6 +188,60 @@ export function useIsPostTypeHierarchical( postType ) {
 	);
 }
 
+/**
+ * List of avaiable options to order by.
+ *
+ * @param {string} postType The post type to check.
+ * @return {OrderByOption[]} List of order options.
+ */
+export function useOrderByOptions( postType ) {
+	const supportsCustomOrder = useSelect(
+		( select ) => {
+			const type = select( coreStore ).getPostType( postType );
+			return !! type?.supports?.[ 'page-attributes' ];
+		},
+		[ postType ]
+	);
+
+	const orderByOptions = [
+		{
+			label: __( 'Newest to oldest' ),
+			value: 'date/desc',
+		},
+		{
+			label: __( 'Oldest to newest' ),
+			value: 'date/asc',
+		},
+		{
+			/* translators: Label for ordering posts by title in ascending order. */
+			label: __( 'A → Z' ),
+			value: 'title/asc',
+		},
+		{
+			/* translators: Label for ordering posts by title in descending order. */
+			label: __( 'Z → A' ),
+			value: 'title/desc',
+		},
+	];
+
+	if ( supportsCustomOrder ) {
+		orderByOptions.push(
+			{
+				/* translators: Label for ordering posts by ascending menu order. */
+				label: __( 'Ascending by order' ),
+				value: 'menu_order/asc',
+			},
+			{
+				/* translators: Label for ordering posts by descending menu order. */
+				label: __( 'Descending by order' ),
+				value: 'menu_order/desc',
+			}
+		);
+	}
+
+	return orderByOptions;
+}
+
 /**
  * Hook that returns the query properties' names defined by the active
  * block variation, to determine which block's filters to show.

packages/components/src/query-controls/README.md

@@ -32,19 +32,29 @@ const QUERY_DEFAULTS = {
 	numberOfItems: 10,
 	order: 'asc',
 	orderBy: 'title',
+	orderByOptions: [
+		{
+			label: 'Title Ascending',
+			value: 'title/asc',
+		},
+		{
+			label: 'Title Descending',
+			value: 'title/desc',
+		},
+	],
 };
 
 const MyQueryControls = () => {
 	const [ query, setQuery ] = useState( QUERY_DEFAULTS );
-	const { category, categories, maxItems, minItems, numberOfItems, order, orderBy  } = query;
+	const { category, categories, maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } = query;
 
 	const updateQuery = ( newQuery ) => {
 		setQuery( { ...query, ...newQuery } );
 	};
 
 	return (
 		<QueryControls
-			{ ...{ maxItems, minItems, numberOfItems, order, orderBy } }
+			{ ...{ maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } }
 			onOrderByChange={ ( newOrderBy ) => updateQuery( { orderBy: newOrderBy } ) }
 			onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) }
 			categoriesList={ categories }
@@ -108,7 +118,7 @@ const MyQueryControls = () => {
 
 	return (
 		<QueryControls
-			{ ...{ orderBy, order, numberOfItems } }
+			{ ...{ orderBy, order, orderByOptions, numberOfItems } }
 			onOrderByChange={ ( newOrderBy ) => updateQuery( { orderBy: newOrderBy } ) }
 			onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) }
 			categorySuggestions={ categories }
@@ -213,7 +223,14 @@ The order in which to retrieve posts.
 -   Required: No
 -   Platform: Web
 
-#### `orderBy`: `'date' | 'title'`
+#### `orderBy`: `'date' | 'title' | 'menu_order'`
+
+The meta key by which to order posts.
+
+-   Required: No
+-   Platform: Web
+
+#### `orderByOptions`: `OrderByOption[]`
 
 The meta key by which to order posts.
 
@@ -246,4 +263,4 @@ The selected category for the `categoriesList` prop.
 Start opting into the larger default height that will become the default size in a future version.
 
 - Required: No
-- Default: `false`
+- Default: `false`

packages/components/src/query-controls/index.native.js

@@ -14,34 +14,14 @@ import CategorySelect from './category-select';
 const DEFAULT_MIN_ITEMS = 1;
 const DEFAULT_MAX_ITEMS = 100;
 
-const options = [
-	{
-		label: __( 'Newest to oldest' ),
-		value: 'date/desc',
-	},
-	{
-		label: __( 'Oldest to newest' ),
-		value: 'date/asc',
-	},
-	{
-		/* translators: Label for ordering posts by title in ascending order. */
-		label: __( 'A → Z' ),
-		value: 'title/asc',
-	},
-	{
-		/* translators: Label for ordering posts by title in descending order. */
-		label: __( 'Z → A' ),
-		value: 'title/desc',
-	},
-];
-
 const QueryControls = memo(
 	( {
 		categoriesList,
 		selectedCategoryId,
 		numberOfItems,
 		order,
 		orderBy,
+		orderByOptions,
 		maxItems = DEFAULT_MAX_ITEMS,
 		minItems = DEFAULT_MIN_ITEMS,
 		onCategoryChange,
@@ -68,7 +48,7 @@ const QueryControls = memo(
 					<SelectControl
 						label={ __( 'Order by' ) }
 						value={ `${ orderBy }/${ order }` }
-						options={ options }
+						options={ orderByOptions }
 						onChange={ onChange }
 						hideCancelButton
 					/>

packages/components/src/query-controls/index.tsx

@@ -40,7 +40,7 @@ function isMultipleCategorySelection(
  * ```jsx
  * const MyQueryControls = () => (
  *   <QueryControls
- *     { ...{ maxItems, minItems, numberOfItems, order, orderBy } }
+ *     { ...{ maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } }
  *     onOrderByChange={ ( newOrderBy ) => {
  *       updateQuery( { orderBy: newOrderBy } )
  *     }
@@ -65,6 +65,7 @@ export function QueryControls( {
 	numberOfItems,
 	order,
 	orderBy,
+	orderByOptions,
 	maxItems = DEFAULT_MAX_ITEMS,
 	minItems = DEFAULT_MIN_ITEMS,
 	onAuthorChange,
@@ -89,26 +90,7 @@ export function QueryControls( {
 								? undefined
 								: `${ orderBy }/${ order }`
 						}
-						options={ [
-							{
-								label: __( 'Newest to oldest' ),
-								value: 'date/desc',
-							},
-							{
-								label: __( 'Oldest to newest' ),
-								value: 'date/asc',
-							},
-							{
-								/* translators: Label for ordering posts by title in ascending order. */
-								label: __( 'A → Z' ),
-								value: 'title/asc',
-							},
-							{
-								/* translators: Label for ordering posts by title in descending order. */
-								label: __( 'Z → A' ),
-								value: 'title/desc',
-							},
-						] }
+						options={ orderByOptions }
 						onChange={ ( value ) => {
 							if ( typeof value !== 'string' ) {
 								return;

packages/components/src/query-controls/types.ts

@@ -45,7 +45,17 @@ export type AuthorSelectProps = Pick<
 };
 
 type Order = 'asc' | 'desc';
-type OrderBy = 'date' | 'title';
+type OrderBy = 'date' | 'title' | 'menu_order';
+type OrderByOption = {
+	/**
+	 * The label to be shown to the user.
+	 */
+	label: string;
+	/**
+	 * Option value passed to `onChange` when the option is selected.
+	 */
+	value: `${ OrderBy }/${ Order }`;
+};
 
 type BaseQueryControlsProps = {
 	/**
@@ -99,6 +109,10 @@ type BaseQueryControlsProps = {
 	 * The meta key by which to order posts.
 	 */
 	orderBy?: OrderBy;
+	/**
+	 * List of available ordering options.
+	 */
+	orderByOptions?: OrderByOption[];
 	/**
 	 * The selected author ID.
 	 */