Update and move some Query filters

lib/edit-site-page.php

@@ -131,6 +131,7 @@ function gutenberg_edit_site_init( $hook ) {
 		'isRTL'             => is_rtl(),
 		'maxUploadFileSize' => $max_upload_size,
 		'siteUrl'           => site_url(),
+		'postsPerPage'      => get_option( 'posts_per_page' ),
 	);
 
 	$settings['styles'] = gutenberg_get_editor_styles();

packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><div class=\\"components-flex components-select-control e1cr7zh10 css-195lg3g-Flex-Root eboqfv50\\"><div class=\\"components-flex__item e1cr7zh14 css-d373l0-Item-LabelWrapper eboqfv51\\"><label for=\\"inspector-select-control-0\\" class=\\"components-input-control__label css-h505uc-Text-BaseLabel e1cr7zh13\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label></div><div class=\\"components-input-control__container css-c1s9gk-Container e1cr7zh11\\"><select class=\\"components-select-control__input css-hwcz8s-Select e12x0a390\\" id=\\"inspector-select-control-0\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select><span class=\\"components-input-control__suffix css-1lym30p-Suffix e1cr7zh17\\"><div class=\\"css-s55r1c-DownArrowWrapper e12x0a391\\"><svg viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z\\"></path></svg></div></span><div aria-hidden=\\"true\\" class=\\"components-input-control__backdrop css-2u723s-BackdropUI e1cr7zh15\\"></div></div></div></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
+exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><div class=\\"components-flex components-select-control e1cr7zh10 css-fpgvlo-Flex-Root eboqfv50\\"><div class=\\"components-flex__item e1cr7zh14 css-d373l0-Item-LabelWrapper eboqfv51\\"><label for=\\"inspector-select-control-0\\" class=\\"components-input-control__label css-5z2l8i-Text-BaseLabel e1cr7zh13\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label></div><div class=\\"components-input-control__container css-15pg4e7-Container e1cr7zh11\\"><select class=\\"components-select-control__input css-hwcz8s-Select e12x0a390\\" id=\\"inspector-select-control-0\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select><span class=\\"components-input-control__suffix css-1lym30p-Suffix e1cr7zh17\\"><div class=\\"css-s55r1c-DownArrowWrapper e12x0a391\\"><svg viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z\\"></path></svg></div></span><div aria-hidden=\\"true\\" class=\\"components-input-control__backdrop css-1b1hwt4-BackdropUI e1cr7zh15\\"></div></div></div></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;

packages/block-editor/src/components/unit-control/README.md

@@ -71,7 +71,7 @@ If this property is added, a label will be generated using label property as the
 
 #### labelPosition
 
-The position of the label (`top`, `side`, or `bottom`).
+The position of the label (`top`, `side`, `bottom`, or `edge`).
 
 -   Type: `String`
 -   Required: No

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

@@ -15,7 +15,11 @@ import {
  */
 import { useQueryContext } from '../query';
 
-const TEMPLATE = [ [ 'core/post-title' ], [ 'core/post-content' ] ];
+const TEMPLATE = [
+	[ 'core/post-title' ],
+	[ 'core/post-date' ],
+	[ 'core/post-excerpt' ],
+];
 export default function QueryLoopEdit( {
 	clientId,
 	context: {

packages/block-library/src/query/block.json

@@ -8,7 +8,7 @@
 		"query": {
 			"type": "object",
 			"default": {
-				"perPage": 3,
+				"perPage": null,
 				"pages": 1,
 				"offset": 0,
 				"categoryIds": [],

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

@@ -1,5 +1,7 @@
 export const MAX_FETCHED_TERMS = 100;
+export const DEFAULTS_POSTS_PER_PAGE = 3;
 
 export default {
 	MAX_FETCHED_TERMS,
+	DEFAULTS_POSTS_PER_PAGE,
 };

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

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { useEffect } from '@wordpress/element';
 import {
@@ -15,6 +16,7 @@ import {
 import QueryToolbar from './query-toolbar';
 import QueryProvider from './query-provider';
 import QueryInspectorControls from './query-inspector-controls';
+import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
 
 const TEMPLATE = [ [ 'core/query-loop' ], [ 'core/query-pagination' ] ];
 export default function QueryEdit( {
@@ -23,6 +25,18 @@ export default function QueryEdit( {
 } ) {
 	const instanceId = useInstanceId( QueryEdit );
 	const blockWrapperProps = useBlockWrapperProps();
+	const { postsPerPage } = useSelect( ( select ) => {
+		const { getSettings } = select( 'core/block-editor' );
+		return {
+			postsPerPage:
+				+getSettings().postsPerPage || DEFAULTS_POSTS_PER_PAGE,
+		};
+	}, [] );
+	useEffect( () => {
+		if ( ! query.perPage && postsPerPage ) {
+			updateQuery( { perPage: postsPerPage } );
+		}
+	}, [ query.perPage ] );
 	// We need this for multi-query block pagination.
 	// Query parameters for each block are scoped to their ID.
 	useEffect( () => {

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

@@ -1,19 +1,68 @@
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { PanelBody, QueryControls } from '@wordpress/components';
+
+import {
+	PanelBody,
+	QueryControls,
+	TextControl,
+	FormTokenField,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { useEffect, useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getTermsInfo } from '../utils';
+import { MAX_FETCHED_TERMS } from '../constants';
 
 export default function QueryInspectorControls( { query, setQuery } ) {
 	const { order, orderBy, author: selectedAuthorId } = query;
-	const { authorList } = useSelect( ( select ) => {
+	const { authorList, categories, tags } = useSelect( ( select ) => {
 		const { getEntityRecords } = select( 'core' );
+		const termsQuery = { per_page: MAX_FETCHED_TERMS };
+		const _categories = getEntityRecords(
+			'taxonomy',
+			'category',
+			termsQuery
+		);
+		const _tags = getEntityRecords( 'taxonomy', 'post_tag', termsQuery );
 		return {
+			categories: getTermsInfo( _categories ),
+			tags: getTermsInfo( _tags ),
 			authorList: getEntityRecords( 'root', 'user', { per_page: -1 } ),
 		};
 	}, [] );
+
+	// Handles categories and tags changes.
+	const onTermsChange = ( terms, queryProperty ) => ( newTermValues ) => {
+		const termIds = newTermValues.reduce( ( accumulator, termValue ) => {
+			const termId = termValue?.id || terms.mapByName[ termValue ]?.id;
+			if ( termId ) accumulator.push( termId );
+			return accumulator;
+		}, [] );
+		setQuery( { [ queryProperty ]: termIds } );
+	};
+	const onCategoriesChange = onTermsChange( categories, 'categoryIds' );
+	const onTagsChange = onTermsChange( tags, 'tagIds' );
+
+	const [ querySearch, setQuerySearch ] = useState( query.search );
+	const onChangeDebounced = useCallback(
+		debounce( () => setQuery( { search: querySearch } ), 250 ),
+		[ querySearch ]
+	);
+	useEffect( () => {
+		onChangeDebounced();
+		return onChangeDebounced.cancel;
+	}, [ querySearch, onChangeDebounced ] );
 	return (
 		<InspectorControls>
 			<PanelBody title={ __( 'Sorting and filtering' ) }>
@@ -29,6 +78,33 @@ export default function QueryInspectorControls( { query, setQuery } ) {
 						} )
 					}
 				/>
+				{ categories?.terms?.length > 0 && (
+					<FormTokenField
+						label={ __( 'Categories' ) }
+						value={ query.categoryIds.map( ( categoryId ) => ( {
+							id: categoryId,
+							value: categories.mapById[ categoryId ].name,
+						} ) ) }
+						suggestions={ categories.names }
+						onChange={ onCategoriesChange }
+					/>
+				) }
+				{ tags?.terms?.length > 0 && (
+					<FormTokenField
+						label={ __( 'Tags' ) }
+						value={ ( query.tagIds || [] ).map( ( tagId ) => ( {
+							id: tagId,
+							value: tags.mapById[ tagId ].name,
+						} ) ) }
+						suggestions={ tags.names }
+						onChange={ onTagsChange }
+					/>
+				) }
+				<TextControl
+					label={ __( 'Search' ) }
+					value={ querySearch }
+					onChange={ setQuerySearch }
+				/>
 			</PanelBody>
 		</InspectorControls>
 	);

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

@@ -1,70 +1,22 @@
-/**
- * External dependencies
- */
-import { debounce } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { useEffect, useState, useCallback } from '@wordpress/element';
 import {
-	Toolbar,
+	ToolbarGroup,
 	Dropdown,
 	ToolbarButton,
 	RangeControl,
-	TextControl,
-	FormTokenField,
+	BaseControl,
+	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { postList } from '@wordpress/icons';
 
-/**
- * Internal dependencies
- */
-import { getTermsInfo } from '../utils';
-import { MAX_FETCHED_TERMS } from '../constants';
-
 export default function QueryToolbar( { query, setQuery } ) {
-	const { categories, tags } = useSelect( ( select ) => {
-		const { getEntityRecords } = select( 'core' );
-		const termsQuery = { per_page: MAX_FETCHED_TERMS };
-		const _categories = getEntityRecords(
-			'taxonomy',
-			'category',
-			termsQuery
-		);
-		const _tags = getEntityRecords( 'taxonomy', 'post_tag', termsQuery );
-		return {
-			categories: getTermsInfo( _categories ),
-			tags: getTermsInfo( _tags ),
-		};
-	}, [] );
-	const [ querySearch, setQuerySearch ] = useState( query.search );
-	const onChangeDebounced = useCallback(
-		debounce( () => setQuery( { search: querySearch } ), 250 ),
-		[ querySearch ]
-	);
-	useEffect( () => {
-		onChangeDebounced();
-		return onChangeDebounced.cancel;
-	}, [ querySearch, onChangeDebounced ] );
-
-	// Handles categories and tags changes.
-	const onTermsChange = ( terms, queryProperty ) => ( newTermValues ) => {
-		const termIds = newTermValues.reduce( ( accumulator, termValue ) => {
-			const termId = termValue?.id || terms.mapByName[ termValue ]?.id;
-			if ( termId ) accumulator.push( termId );
-			return accumulator;
-		}, [] );
-		setQuery( { [ queryProperty ]: termIds } );
-	};
-	const onCategoriesChange = onTermsChange( categories, 'categoryIds' );
-	const onTagsChange = onTermsChange( tags, 'tagIds' );
-
 	return (
-		<Toolbar>
+		<ToolbarGroup>
 			<Dropdown
+				contentClassName="block-library-query-toolbar__popover"
 				renderToggle={ ( { onToggle } ) => (
 					<ToolbarButton
 						icon={ postList }
@@ -74,69 +26,50 @@ export default function QueryToolbar( { query, setQuery } ) {
 				) }
 				renderContent={ () => (
 					<>
-						<RangeControl
-							label={ __( 'Posts per Page' ) }
-							min={ 1 }
-							allowReset
-							value={ query.perPage }
-							onChange={ ( value ) =>
-								setQuery( { perPage: value ?? -1 } )
-							}
-						/>
-						<RangeControl
-							label={ __( 'Number of Pages' ) }
-							min={ 1 }
-							allowReset
-							value={ query.pages }
-							onChange={ ( value ) =>
-								setQuery( { pages: value ?? -1 } )
-							}
-						/>
-						<RangeControl
-							label={ __( 'Offset' ) }
-							min={ 0 }
-							allowReset
-							value={ query.offset }
-							onChange={ ( value ) =>
-								setQuery( { offset: value ?? 0 } )
-							}
-						/>
-						{ categories?.terms && (
-							<FormTokenField
-								label={ __( 'Categories' ) }
-								value={ query.categoryIds.map(
-									( categoryId ) => ( {
-										id: categoryId,
-										value:
-											categories.mapById[ categoryId ]
-												.name,
-									} )
-								) }
-								suggestions={ categories.names }
-								onChange={ onCategoriesChange }
+						<BaseControl>
+							<NumberControl
+								__unstableInputWidth="60px"
+								label={ __( 'Items per Page' ) }
+								labelPosition="edge"
+								min={ 1 }
+								max={ 100 }
+								onChange={ ( value ) =>
+									setQuery( { perPage: +value ?? -1 } )
+								}
+								step="1"
+								value={ query.perPage }
+								isDragEnabled={ false }
+							/>
+						</BaseControl>
+						<BaseControl>
+							<NumberControl
+								__unstableInputWidth="60px"
+								label={ __( 'Offset' ) }
+								labelPosition="edge"
+								min={ 0 }
+								max={ 100 }
+								onChange={ ( value ) =>
+									setQuery( { offset: +value } )
+								}
+								step="1"
+								value={ query.offset }
+								isDragEnabled={ false }
 							/>
-						) }
-						{ tags?.terms && (
-							<FormTokenField
-								label={ __( 'Tags' ) }
-								value={ ( query.tagIds || [] ).map(
-									( tagId ) => ( {
-										id: tagId,
-										value: tags.mapById[ tagId ].name,
-									} )
-								) }
-								suggestions={ tags.names }
-								onChange={ onTagsChange }
+						</BaseControl>
+						<BaseControl>
+							<RangeControl
+								label={ __( 'Number of Pages' ) }
+								min={ 1 }
+								allowReset
+								value={ query.pages }
+								onChange={ ( value ) =>
+									setQuery( { pages: value ?? -1 } )
+								}
 							/>
-						) }
-						<TextControl
-							label={ __( 'Search' ) }
-							value={ querySearch }
-							onChange={ ( value ) => setQuerySearch( value ) }
-						/>
+						</BaseControl>
 					</>
 				) }
 			/>
-		</Toolbar>
+		</ToolbarGroup>
 	);
 }

packages/components/src/input-control/README.md

@@ -54,7 +54,7 @@ If this property is added, a label will be generated using label property as the
 
 ### labelPosition
 
-The position of the label (`top`, `side`, or `bottom`).
+The position of the label (`top`, `side`, `bottom`, or `edge`).
 
 -   Type: `String`
 -   Required: No