Add order/order by support in Query block (#24691)

* add basic order support in Query block * move sort to block inspector * add orderby param in php * add orderBy in query loop * lint php
WordPress · Sep 1, 2020 · 18e102c · 18e102c
1 parent 33c83fa
commit 18e102c
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 27 deletions.
diff --git a/packages/block-library/src/query-loop/edit.js b/packages/block-library/src/query-loop/edit.js
@@ -18,7 +18,10 @@ import { useQueryContext } from '../query';
 const TEMPLATE = [ [ 'core/post-title' ], [ 'core/post-content' ] ];
 export default function QueryLoopEdit( {
 	clientId,
-	context: { query: { perPage, offset, categoryIds } = {}, queryContext },
+	context: {
+		query: { perPage, offset, categoryIds, order, orderBy } = {},
+		queryContext,
+	},
 } ) {
 	const [ { page } ] = useQueryContext() || queryContext || [ {} ];
 	const [ activeBlockContext, setActiveBlockContext ] = useState();
@@ -28,6 +31,8 @@ export default function QueryLoopEdit( {
 			const query = {
 				offset: perPage ? perPage * ( page - 1 ) + offset : 0,
 				categories: categoryIds,
+				order,
+				orderby: orderBy,
 			};
 			if ( perPage ) {
 				query.per_page = perPage;
@@ -41,7 +46,7 @@ export default function QueryLoopEdit( {
 				blocks: select( 'core/block-editor' ).getBlocks( clientId ),
 			};
 		},
-		[ perPage, page, offset, categoryIds, clientId ]
+		[ perPage, page, offset, categoryIds, order, orderBy, clientId ]
 	);
 
 	const blockContexts = useMemo(

diff --git a/packages/block-library/src/query-loop/index.php b/packages/block-library/src/query-loop/index.php
@@ -19,10 +19,14 @@ function render_block_core_query_loop( $attributes, $content, $block ) {
 	$page     = empty( $_GET[ $page_key ] ) ? 1 : filter_var( $_GET[ $page_key ], FILTER_VALIDATE_INT );
 
 	$query = array(
-		'post_type'    => 'post',
-		'offset'       => isset( $block->context['query']['perPage'] ) ? ( $block->context['query']['perPage'] * ( $page - 1 ) + $block->context['query']['offset'] ) : 0,
-		'category__in' => $block->context['query']['categoryIds'],
+		'post_type' => 'post',
+		'offset'    => isset( $block->context['query']['perPage'] ) ? ( $block->context['query']['perPage'] * ( $page - 1 ) + $block->context['query']['offset'] ) : 0,
+		'order'     => isset( $block->context['query']['order'] ) ? strtoupper( $block->context['query']['order'] ) : 'DESC',
+		'orderby'   => isset( $block->context['query']['orderBy'] ) ? $block->context['query']['orderBy'] : 'date',
 	);
+	if ( isset( $block->context['query']['categoryIds'] ) ) {
+		$query['category__in'] = $block->context['query']['categoryIds'];
+	}
 	if ( isset( $block->context['query']['perPage'] ) ) {
 		$query['posts_per_page'] = $block->context['query']['perPage'];
 	}

diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json
@@ -11,7 +11,9 @@
 				"perPage": 3,
 				"pages": 1,
 				"offset": 0,
-				"categoryIds": []
+				"categoryIds": [],
+				"order": "desc",
+				"orderBy": "date"
 			}
 		}
 	},

diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js
@@ -14,6 +14,7 @@ import {
  */
 import QueryToolbar from './query-toolbar';
 import QueryProvider from './query-provider';
+import QueryInspectorControls from './query-inspector-controls';
 
 const TEMPLATE = [ [ 'core/query-loop' ], [ 'core/query-pagination' ] ];
 export default function QueryEdit( {
@@ -28,15 +29,13 @@ export default function QueryEdit( {
 			setAttributes( { queryId: instanceId } );
 		}
 	}, [ queryId, instanceId ] );
+	const updateQuery = ( newQuery ) =>
+		setAttributes( { query: { ...query, ...newQuery } } );
 	return (
 		<>
+			<QueryInspectorControls query={ query } setQuery={ updateQuery } />
 			<BlockControls>
-				<QueryToolbar
-					query={ query }
-					setQuery={ ( newQuery ) =>
-						setAttributes( { query: { ...query, ...newQuery } } )
-					}
-				/>
+				<QueryToolbar query={ query } setQuery={ updateQuery } />
 			</BlockControls>
 			<Block.div>
 				<QueryProvider>

diff --git a/packages/block-library/src/query/edit/query-inspector-controls.js b/packages/block-library/src/query/edit/query-inspector-controls.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody, QueryControls } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/block-editor';
+
+export default function QueryInspectorControls( { query, setQuery } ) {
+	const { order, orderBy } = query;
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Sorting' ) }>
+				<QueryControls
+					{ ...{ order, orderBy } }
+					onOrderChange={ ( value ) => setQuery( { order: value } ) }
+					onOrderByChange={ ( value ) =>
+						setQuery( { orderBy: value } )
+					}
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+}
diff --git a/packages/e2e-tests/fixtures/blocks/core__query.json b/packages/e2e-tests/fixtures/blocks/core__query.json
@@ -1,17 +1,19 @@
 [
-    {
-        "clientId": "_clientId_0",
-        "name": "core/query",
-        "isValid": true,
-        "attributes": {
-            "query": {
-                "perPage": 3,
-                "pages": 1,
-                "offset": 0,
-                "categoryIds": []
-            }
-        },
-        "innerBlocks": [],
-        "originalContent": ""
-    }
+	{
+		"clientId": "_clientId_0",
+		"name": "core/query",
+		"isValid": true,
+		"attributes": {
+			"query": {
+				"perPage": 3,
+				"pages": 1,
+				"offset": 0,
+				"categoryIds": [],
+				"order": "desc",
+				"orderBy": "date"
+			}
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
 ]