[Block Library - Query Loop]: Reorganise inspector controls + order…

… selection bug (#37949)

* [Block Library - Query Loop]: Reorganise inspector controls

* fix typo

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

@@ -21,7 +21,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import QueryToolbar from './query-toolbar';
-import QueryInspectorControls from './query-inspector-controls';
+import QueryInspectorControls from './inspector-controls';
 import QueryPlaceholder from './query-placeholder';
 import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
 import { getFirstQueryClientIdFromBlocks } from '../utils';
@@ -65,7 +65,7 @@ export function QueryContent( { attributes, setAttributes } ) {
 
 	// Changes in query property (which is an object) need to be in the same callback,
 	// because updates are batched after the render and changes in different query properties
-	// would cause to overide previous wanted changes.
+	// would cause to override previous wanted changes.
 	useEffect( () => {
 		const newQuery = {};
 		if ( ! query.perPage && postsPerPage ) {

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

@@ -25,8 +25,9 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { getTermsInfo, usePostTypes } from '../utils';
-import { MAX_FETCHED_TERMS } from '../constants';
+import OrderControl from './order-control';
+import { getTermsInfo, usePostTypes } from '../../utils';
+import { MAX_FETCHED_TERMS } from '../../constants';
 
 const stickyOptions = [
 	{ label: __( 'Include' ), value: '' },
@@ -217,14 +218,9 @@ export default function QueryInspectorControls( {
 					</>
 				) }
 				{ ! inherit && (
-					<QueryControls
+					<OrderControl
 						{ ...{ order, orderBy } }
-						onOrderChange={ ( value ) =>
-							setQuery( { order: value } )
-						}
-						onOrderByChange={ ( value ) =>
-							setQuery( { orderBy: value } )
-						}
+						onChange={ setQuery }
 					/>
 				) }
 				{ showSticky && (

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

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+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 } ) {
+	return (
+		<SelectControl
+			label={ __( 'Order by' ) }
+			value={ `${ orderBy }/${ order }` }
+			options={ orderOptions }
+			onChange={ ( value ) => {
+				const [ newOrderBy, newOrder ] = value.split( '/' );
+				onChange( { order: newOrder, orderBy: newOrderBy } );
+			} }
+		/>
+	);
+}
+
+export default OrderControl;