@wordpress/block-library 9.3.0 → 9.5.0

package/src/query/edit/inspector-controls/index.js

@@ -6,7 +6,8 @@ import {
 	TextControl,
 	SelectControl,
 	RangeControl,
-	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Notice,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -26,6 +27,9 @@ import { TaxonomyControls } from './taxonomy-controls';
 import StickyControl from './sticky-control';
 import EnhancedPaginationControl from './enhanced-pagination-control';
 import CreateNewPostLink from './create-new-post-link';
+import PerPageControl from './per-page-control';
+import OffsetControl from './offset-controls';
+import PagesControl from './pages-control';
 import { unlock } from '../../../lock-unlock';
 import {
 	usePostTypes,
@@ -46,7 +50,10 @@ export default function QueryInspectorControls( props ) {
 		order,
 		orderBy,
 		author: authorIds,
+		pages,
 		postType,
+		perPage,
+		offset,
 		sticky,
 		inherit,
 		taxQuery,
@@ -101,6 +108,10 @@ export default function QueryInspectorControls( props ) {
 	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
 		! inherit && isControlAllowed( allowedControls, 'postType' );
+	const postTypeControlLabel = __( 'Post type' );
+	const postTypeControlHelp = __(
+		'Select the type of content to display: posts, pages, or custom post types.'
+	);
 	const showColumnsControl = false;
 	const showOrderControl =
 		! inherit && isControlAllowed( allowedControls, 'order' );
@@ -130,6 +141,16 @@ export default function QueryInspectorControls( props ) {
 		showParentControl;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	const showPostCountControl = isControlAllowed(
+		allowedControls,
+		'postCount'
+	);
+	const showOffSetControl = isControlAllowed( allowedControls, 'offset' );
+	const showPagesControl = isControlAllowed( allowedControls, 'pages' );
+
+	const showDisplayPanel =
+		showPostCountControl || showOffSetControl || showPagesControl;
+
 	return (
 		<>
 			{ !! postType && (
@@ -140,34 +161,71 @@ export default function QueryInspectorControls( props ) {
 			{ showSettingsPanel && (
 				<PanelBody title={ __( 'Settings' ) }>
 					{ showInheritControl && (
-						<ToggleControl
+						<ToggleGroupControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Inherit query from template' ) }
-							help={ __(
-								'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
-							) }
-							checked={ !! inherit }
-							onChange={ ( value ) =>
-								setQuery( { inherit: !! value } )
+							label={ __( 'Query type' ) }
+							isBlock
+							onChange={ ( value ) => {
+								setQuery( { inherit: !! value } );
+							} }
+							help={
+								inherit
+									? __(
+											'Display a list of posts or custom post types based on the current template.'
+									  )
+									: __(
+											'Display a list of posts or custom post types based on specific criteria.'
+									  )
 							}
-						/>
-					) }
-					{ showPostTypeControl && (
-						<SelectControl
-							__nextHasNoMarginBottom
-							options={ postTypesSelectOptions }
-							value={ postType }
-							label={ __( 'Post type' ) }
-							onChange={ onPostTypeChange }
-							help={ __(
-								'WordPress contains different types of content and they are divided into collections called “Post types”. By default there are a few different ones such as blog posts and pages, but plugins could add more.'
-							) }
-						/>
+							value={ !! inherit }
+						>
+							<ToggleGroupControlOption
+								value
+								label={ __( 'Default' ) }
+							/>
+							<ToggleGroupControlOption
+								value={ false }
+								label={ __( 'Custom' ) }
+							/>
+						</ToggleGroupControl>
 					) }
+					{ showPostTypeControl &&
+						( postTypesSelectOptions.length > 2 ? (
+							<SelectControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								options={ postTypesSelectOptions }
+								value={ postType }
+								label={ postTypeControlLabel }
+								onChange={ onPostTypeChange }
+								help={ postTypeControlHelp }
+							/>
+						) : (
+							<ToggleGroupControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								isBlock
+								value={ postType }
+								label={ postTypeControlLabel }
+								onChange={ onPostTypeChange }
+								help={ postTypeControlHelp }
+							>
+								{ postTypesSelectOptions.map( ( option ) => (
+									<ToggleGroupControlOption
+										key={ option.value }
+										value={ option.value }
+										label={ option.label }
+									/>
+								) ) }
+							</ToggleGroupControl>
+						) ) }
+
 					{ showColumnsControl && (
 						<>
 							<RangeControl
 								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								label={ __( 'Columns' ) }
 								value={ displayLayout.columns }
 								onChange={ ( value ) =>
@@ -211,9 +269,50 @@ export default function QueryInspectorControls( props ) {
 					/>
 				</PanelBody>
 			) }
+			{ ! inherit && showDisplayPanel && (
+				<ToolsPanel
+					className="block-library-query-toolspanel__display"
+					label={ __( 'Display' ) }
+					resetAll={ () => {
+						setQuery( {
+							offset: 0,
+							pages: 0,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						label={ __( 'Items' ) }
+						hasValue={ () => perPage > 0 }
+					>
+						<PerPageControl
+							perPage={ perPage }
+							offset={ offset }
+							onChange={ setQuery }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Offset' ) }
+						hasValue={ () => offset > 0 }
+						onDeselect={ () => setQuery( { offset: 0 } ) }
+					>
+						<OffsetControl
+							offset={ offset }
+							onChange={ setQuery }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Max Pages to Show' ) }
+						hasValue={ () => pages > 0 }
+						onDeselect={ () => setQuery( { pages: 0 } ) }
+					>
+						<PagesControl pages={ pages } onChange={ setQuery } />
+					</ToolsPanelItem>
+				</ToolsPanel>
+			) }
 			{ ! inherit && showFiltersPanel && (
 				<ToolsPanel
-					className="block-library-query-toolspanel__filters"
+					className="block-library-query-toolspanel__filters" // unused but kept for backward compatibility
 					label={ __( 'Filters' ) }
 					resetAll={ () => {
 						setQuery( {
@@ -262,6 +361,7 @@ export default function QueryInspectorControls( props ) {
 						>
 							<TextControl
 								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								label={ __( 'Keyword' ) }
 								value={ querySearch }
 								onChange={ setQuerySearch }

package/src/query/edit/inspector-controls/offset-controls.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const MIN_OFFSET = 0;
+const MAX_OFFSET = 100;
+
+export const OffsetControl = ( { offset = 0, onChange } ) => {
+	return (
+		<NumberControl
+			__next40pxDefaultSize
+			label={ __( 'Offset' ) }
+			value={ offset }
+			min={ MIN_OFFSET }
+			onChange={ ( newOffset ) => {
+				if (
+					isNaN( newOffset ) ||
+					newOffset < MIN_OFFSET ||
+					newOffset > MAX_OFFSET
+				) {
+					return;
+				}
+				onChange( { offset: newOffset } );
+			} }
+		/>
+	);
+};
+
+export default OffsetControl;

package/src/query/edit/inspector-controls/order-control.js

@@ -28,6 +28,7 @@ function OrderControl( { order, orderBy, onChange } ) {
 	return (
 		<SelectControl
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
 			options={ orderOptions }

package/src/query/edit/inspector-controls/pages-control.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export const PagesControl = ( { pages, onChange } ) => {
+	return (
+		<NumberControl
+			__next40pxDefaultSize
+			label={ __( 'Max pages' ) }
+			value={ pages }
+			min={ 0 }
+			onChange={ ( newPages ) => {
+				if ( isNaN( newPages ) || newPages < 0 ) {
+					return;
+				}
+				onChange( { pages: newPages } );
+			} }
+			help={ __(
+				'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
+			) }
+		/>
+	);
+};
+
+export default PagesControl;

package/src/query/edit/inspector-controls/parent-control.js

@@ -138,6 +138,7 @@ function ParentControl( { parents, postType, onChange } ) {
 			suggestions={ suggestions }
 			onChange={ onParentChange }
 			__experimentalShowHowTo={ false }
+			__nextHasNoMarginBottom
 		/>
 	);
 }

package/src/query/edit/inspector-controls/per-page-control.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const MIN_POSTS_PER_PAGE = 1;
+const MAX_POSTS_PER_PAGE = 100;
+
+const PerPageControl = ( { perPage, offset = 0, onChange } ) => {
+	return (
+		<RangeControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			label={ __( 'Posts per page' ) }
+			min={ MIN_POSTS_PER_PAGE }
+			max={ MAX_POSTS_PER_PAGE }
+			onChange={ ( newPerPage ) => {
+				if (
+					isNaN( newPerPage ) ||
+					newPerPage < MIN_POSTS_PER_PAGE ||
+					newPerPage > MAX_POSTS_PER_PAGE
+				) {
+					return;
+				}
+				onChange( { perPage: newPerPage, offset } );
+			} }
+			value={ parseInt( perPage, 10 ) }
+		/>
+	);
+};
+
+export default PerPageControl;

package/src/query/edit/inspector-controls/sticky-control.js

@@ -14,12 +14,13 @@ export default function StickyControl( { value, onChange } ) {
 	return (
 		<SelectControl
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Sticky posts' ) }
 			options={ stickyOptions }
 			value={ value }
 			onChange={ onChange }
 			help={ __(
-				'Blog posts can be “stickied”, a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published.'
+				'Sticky posts always appear first, regardless of their publish date.'
 			) }
 		/>
 	);

package/src/query/edit/inspector-controls/taxonomy-controls.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { FormTokenField } from '@wordpress/components';
+import {
+	FormTokenField,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useState, useEffect } from '@wordpress/element';
@@ -53,7 +56,7 @@ export function TaxonomyControls( { onChange, query } ) {
 	}
 
 	return (
-		<>
+		<VStack spacing={ 4 }>
 			{ taxonomies.map( ( taxonomy ) => {
 				const termIds = taxQuery?.[ taxonomy.slug ] || [];
 				const handleChange = ( newTermIds ) =>
@@ -73,7 +76,7 @@ export function TaxonomyControls( { onChange, query } ) {
 					/>
 				);
 			} ) }
-		</>
+		</VStack>
 	);
 }
 
@@ -187,6 +190,8 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 				displayTransform={ decodeEntities }
 				onChange={ onTermsChange }
 				__experimentalShowHowTo={ false }
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 			/>
 		</div>
 	);

package/src/query/edit/query-content.js

@@ -48,12 +48,26 @@ export default function QueryContent( {
 	} );
 	const { postsPerPage } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
-		const { getEntityRecord, canUser } = select( coreStore );
-		const settingPerPage = canUser( 'read', 'settings' )
+		const { getEntityRecord, getEntityRecordEdits, canUser } =
+			select( coreStore );
+		const settingPerPage = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
 			? +getEntityRecord( 'root', 'site' )?.posts_per_page
 			: +getSettings().postsPerPage;
+
+		// Gets changes made via the template area posts per page setting. These won't be saved
+		// until the page is saved, but we should reflect this setting within the query loops
+		// that inherit it.
+		const editedSettingPerPage = +getEntityRecordEdits( 'root', 'site' )
+			?.posts_per_page;
+
 		return {
-			postsPerPage: settingPerPage || DEFAULTS_POSTS_PER_PAGE,
+			postsPerPage:
+				editedSettingPerPage ||
+				settingPerPage ||
+				DEFAULTS_POSTS_PER_PAGE,
 		};
 	}, [] );
 	// There are some effects running where some initialization logic is

package/src/query/edit/query-placeholder.js

@@ -25,7 +25,6 @@ export default function QueryPlaceholder( {
 	clientId,
 	name,
 	openPatternSelectionModal,
-	setAttributes,
 } ) {
 	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
 	const blockProps = useBlockProps();
@@ -64,7 +63,6 @@ export default function QueryPlaceholder( {
 			<QueryVariationPicker
 				clientId={ clientId }
 				attributes={ attributes }
-				setAttributes={ setAttributes }
 				icon={ icon }
 				label={ label }
 			/>
@@ -101,13 +99,7 @@ export default function QueryPlaceholder( {
 	);
 }
 
-function QueryVariationPicker( {
-	clientId,
-	attributes,
-	setAttributes,
-	icon,
-	label,
-} ) {
+function QueryVariationPicker( { clientId, attributes, icon, label } ) {
 	const scopeVariations = useScopedBlockVariations( attributes );
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const blockProps = useBlockProps();
@@ -118,18 +110,6 @@ function QueryVariationPicker( {
 				label={ label }
 				variations={ scopeVariations }
 				onSelect={ ( variation ) => {
-					if ( variation.attributes ) {
-						setAttributes( {
-							...variation.attributes,
-							query: {
-								...variation.attributes.query,
-								postType:
-									attributes.query.postType ||
-									variation.attributes.query.postType,
-							},
-							namespace: attributes.namespace,
-						} );
-					}
 					if ( variation.innerBlocks ) {
 						replaceInnerBlocks(
 							clientId,

package/src/query/edit/query-toolbar.js

@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	ToolbarGroup,
-	Dropdown,
-	ToolbarButton,
-	__experimentalNumberControl as NumberControl,
-} from '@wordpress/components';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { settings } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,8 +10,6 @@ import { settings } from '@wordpress/icons';
 import { usePatterns } from '../utils';
 
 export default function QueryToolbar( {
-	attributes: { query },
-	setQuery,
 	openPatternSelectionModal,
 	name,
 	clientId,
@@ -26,87 +18,6 @@ export default function QueryToolbar( {
 
 	return (
 		<>
-			{ ! query.inherit && (
-				<ToolbarGroup>
-					<Dropdown
-						contentClassName="block-library-query-toolbar__popover"
-						renderToggle={ ( { onToggle } ) => (
-							<ToolbarButton
-								icon={ settings }
-								label={ __( 'Display settings' ) }
-								onClick={ onToggle }
-							/>
-						) }
-						renderContent={ () => (
-							<>
-								<NumberControl
-									__unstableInputWidth="60px"
-									className="block-library-query-toolbar__popover-number-control"
-									label={ __( 'Items per Page' ) }
-									labelPosition="edge"
-									min={ 1 }
-									max={ 100 }
-									onChange={ ( value ) => {
-										if (
-											isNaN( value ) ||
-											value < 1 ||
-											value > 100
-										) {
-											return;
-										}
-										setQuery( {
-											perPage: value,
-										} );
-									} }
-									step="1"
-									value={ query.perPage }
-									isDragEnabled={ false }
-								/>
-								<NumberControl
-									__unstableInputWidth="60px"
-									className="block-library-query-toolbar__popover-number-control"
-									label={ __( 'Offset' ) }
-									labelPosition="edge"
-									min={ 0 }
-									max={ 100 }
-									onChange={ ( value ) => {
-										if (
-											isNaN( value ) ||
-											value < 0 ||
-											value > 100
-										) {
-											return;
-										}
-										setQuery( { offset: value } );
-									} }
-									step="1"
-									value={ query.offset }
-									isDragEnabled={ false }
-								/>
-								<NumberControl
-									__unstableInputWidth="60px"
-									className="block-library-query-toolbar__popover-number-control"
-									label={ __( 'Max pages to show' ) }
-									labelPosition="edge"
-									min={ 0 }
-									onChange={ ( value ) => {
-										if ( isNaN( value ) || value < 0 ) {
-											return;
-										}
-										setQuery( { pages: value } );
-									} }
-									step="1"
-									value={ query.pages }
-									isDragEnabled={ false }
-									help={ __(
-										'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
-									) }
-								/>
-							</>
-						) }
-					/>
-				</ToolbarGroup>
-			) }
 			{ hasPatterns && (
 				<ToolbarGroup className="wp-block-template-part__block-control-group">
 					<ToolbarButton onClick={ openPatternSelectionModal }>

package/src/query/editor.scss

@@ -49,15 +49,6 @@
 	}
 }
 
-.block-library-query-toolspanel__filters {
-	.components-form-token-field__help {
-		margin-bottom: 0;
-	}
-	.block-library-query-inspector__taxonomy-control:not(:last-child) {
-		margin-bottom: $grid-unit-30;
-	}
-}
-
 .wp-block-query__enhanced-pagination-modal {
 	@include break-small() {
 		max-width: $break-mobile;

package/src/query/utils.js

@@ -136,11 +136,15 @@ export const usePostTypes = () => {
 export const useTaxonomies = ( postType ) => {
 	const taxonomies = useSelect(
 		( select ) => {
-			const { getTaxonomies } = select( coreStore );
-			return getTaxonomies( {
-				type: postType,
-				per_page: -1,
-			} );
+			const { getTaxonomies, getPostType } = select( coreStore );
+			// Does the post type have taxonomies?
+			if ( getPostType( postType )?.taxonomies?.length > 0 ) {
+				return getTaxonomies( {
+					type: postType,
+					per_page: -1,
+				} );
+			}
+			return [];
 		},
 		[ postType ]
 	);
@@ -213,6 +217,7 @@ export const getTransformedBlocksFromPattern = (
 ) => {
 	const {
 		query: { postType, inherit },
+		namespace,
 	} = queryBlockAttributes;
 	const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
 	const queryClientIds = [];
@@ -225,6 +230,9 @@ export const getTransformedBlocksFromPattern = (
 				postType,
 				inherit,
 			};
+			if ( namespace ) {
+				block.attributes.namespace = namespace;
+			}
 			queryClientIds.push( block.clientId );
 		}
 		block.innerBlocks?.forEach( ( innerBlock ) => {