@wordpress/block-library 7.19.0 → 8.1.0

package/src/query/deprecated.js

@@ -1,12 +1,18 @@
 /**
  * WordPress dependencies
  */
+import { createBlock } from '@wordpress/blocks';
 import {
 	InnerBlocks,
 	useInnerBlocksProps,
 	useBlockProps,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import cleanEmptyObject from '../utils/clean-empty-object';
+
 const migrateToTaxQuery = ( attributes ) => {
 	const { query } = attributes;
 	const { categoryIds, tagIds, ...newQuery } = query;
@@ -25,106 +31,271 @@ const migrateToTaxQuery = ( attributes ) => {
 	};
 };
 
-const deprecated = [
-	// Version with `categoryIds and tagIds`.
-	{
-		attributes: {
-			queryId: {
-				type: 'number',
-			},
-			query: {
-				type: 'object',
-				default: {
-					perPage: null,
-					pages: 0,
-					offset: 0,
-					postType: 'post',
-					categoryIds: [],
-					tagIds: [],
-					order: 'desc',
-					orderBy: 'date',
-					author: '',
-					search: '',
-					exclude: [],
-					sticky: '',
-					inherit: true,
-				},
-			},
-			tagName: {
-				type: 'string',
-				default: 'div',
+const migrateColors = ( attributes, innerBlocks ) => {
+	// Remove color style attributes from the Query block.
+	const { style, backgroundColor, gradient, textColor, ...newAttributes } =
+		attributes;
+
+	const hasColorStyles =
+		backgroundColor ||
+		gradient ||
+		textColor ||
+		style?.color ||
+		style?.elements?.link;
+
+	// If the query block doesn't currently have any color styles,
+	// nothing needs migrating.
+	if ( ! hasColorStyles ) {
+		return [ attributes, innerBlocks ];
+	}
+
+	// Clean color values from style attribute object.
+	if ( style ) {
+		newAttributes.style = cleanEmptyObject( {
+			...style,
+			color: undefined,
+			elements: {
+				...style.elements,
+				link: undefined,
 			},
-			displayLayout: {
-				type: 'object',
-				default: {
-					type: 'list',
-				},
+		} );
+	}
+
+	// If the inner blocks are already wrapped in a single group
+	// block, add the color support styles to that group block.
+	if ( hasSingleInnerGroupBlock( innerBlocks ) ) {
+		const groupBlock = innerBlocks[ 0 ];
+
+		// Create new styles for the group block.
+		const hasStyles =
+			style?.color ||
+			style?.elements?.link ||
+			groupBlock.attributes.style;
+
+		const newStyles = hasStyles
+			? cleanEmptyObject( {
+					...groupBlock.attributes.style,
+					color: style?.color,
+					elements: style?.elements?.link
+						? { link: style?.elements?.link }
+						: undefined,
+			  } )
+			: undefined;
+
+		// Create a new Group block from the original.
+		const updatedGroupBlock = createBlock(
+			'core/group',
+			{
+				...groupBlock.attributes,
+				backgroundColor,
+				gradient,
+				textColor,
+				style: newStyles,
 			},
+			groupBlock.innerBlocks
+		);
+
+		return [ newAttributes, [ updatedGroupBlock ] ];
+	}
+
+	// When we don't have a single wrapping group block for the inner
+	// blocks, wrap the current inner blocks in a group applying the
+	// color styles to that.
+	const newGroupBlock = createBlock(
+		'core/group',
+		{
+			backgroundColor,
+			gradient,
+			textColor,
+			style: cleanEmptyObject( {
+				color: style?.color,
+				elements: style?.elements?.link
+					? { link: style?.elements?.link }
+					: undefined,
+			} ),
+		},
+		innerBlocks
+	);
+
+	return [ newAttributes, [ newGroupBlock ] ];
+};
+
+const hasSingleInnerGroupBlock = ( innerBlocks = [] ) =>
+	innerBlocks.length === 1 && innerBlocks[ 0 ].name === 'core/group';
+
+// Version with NO wrapper `div` element.
+const v1 = {
+	attributes: {
+		queryId: {
+			type: 'number',
 		},
-		supports: {
-			align: [ 'wide', 'full' ],
-			html: false,
-			color: {
-				gradients: true,
-				link: true,
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				categoryIds: [],
+				tagIds: [],
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
 			},
-			__experimentalLayout: true,
 		},
-		isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
-			categoryIds || tagIds,
-		migrate: migrateToTaxQuery,
-		save( { attributes: { tagName: Tag = 'div' } } ) {
-			const blockProps = useBlockProps.save();
-			const innerBlocksProps = useInnerBlocksProps.save( blockProps );
-			return <Tag { ...innerBlocksProps } />;
+		layout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
 		},
 	},
-	// Version with NO wrapper `div` element.
-	{
-		attributes: {
-			queryId: {
-				type: 'number',
+	supports: {
+		html: false,
+	},
+	migrate( attributes ) {
+		const withTaxQuery = migrateToTaxQuery( attributes );
+		const { layout, ...restWithTaxQuery } = withTaxQuery;
+		return {
+			...restWithTaxQuery,
+			displayLayout: withTaxQuery.layout,
+		};
+	},
+	save() {
+		return <InnerBlocks.Content />;
+	},
+};
+
+// Version with `categoryIds and tagIds`.
+const v2 = {
+	attributes: {
+		queryId: {
+			type: 'number',
+		},
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				categoryIds: [],
+				tagIds: [],
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
 			},
-			query: {
-				type: 'object',
-				default: {
-					perPage: null,
-					pages: 0,
-					offset: 0,
-					postType: 'post',
-					categoryIds: [],
-					tagIds: [],
-					order: 'desc',
-					orderBy: 'date',
-					author: '',
-					search: '',
-					exclude: [],
-					sticky: '',
-					inherit: true,
-				},
+		},
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
 			},
-			layout: {
-				type: 'object',
-				default: {
-					type: 'list',
-				},
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+		},
+		__experimentalLayout: true,
+	},
+	isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
+		categoryIds || tagIds,
+	migrate( attributes, innerBlocks ) {
+		const withTaxQuery = migrateToTaxQuery( attributes );
+		return migrateColors( withTaxQuery, innerBlocks );
+	},
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+};
+
+// Version with color support prior to moving it to the PostTemplate block.
+const v3 = {
+	attributes: {
+		queryId: {
+			type: 'number',
+		},
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
+				taxQuery: null,
+				parents: [],
 			},
 		},
-		supports: {
-			html: false,
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
 		},
-		migrate( attributes ) {
-			const withTaxQuery = migrateToTaxQuery( attributes );
-			const { layout, ...restWithTaxQuery } = withTaxQuery;
-			return {
-				...restWithTaxQuery,
-				displayLayout: withTaxQuery.layout,
-			};
+		namespace: {
+			type: 'string',
 		},
-		save() {
-			return <InnerBlocks.Content />;
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
 		},
+		__experimentalLayout: true,
+	},
+	isEligible( attributes ) {
+		const { style, backgroundColor, gradient, textColor } = attributes;
+		return (
+			backgroundColor ||
+			gradient ||
+			textColor ||
+			style?.color ||
+			style?.elements?.link
+		);
 	},
-];
+	migrate: migrateColors,
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+};
+
+const deprecated = [ v3, v2, v1 ];
 
 export default deprecated;

package/src/query/edit/index.js

@@ -92,6 +92,7 @@ function PatternSelectionModal( {
 					blockName={ blockNameForPatterns }
 					clientId={ clientId }
 					onBlockPatternSelect={ onBlockPatternSelect }
+					showTitles={ true }
 				/>
 			</BlockContextProvider>
 		</Modal>

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

@@ -110,6 +110,21 @@ export default function QueryInspectorControls( {
 		showColumnsControl ||
 		showOrderControl ||
 		showStickyControl;
+	const showTaxControl =
+		!! taxonomies?.length &&
+		isControlAllowed( allowedControls, 'taxQuery' );
+	const showAuthorControl = isControlAllowed( allowedControls, 'author' );
+	const showSearchControl = isControlAllowed( allowedControls, 'search' );
+	const showParentControl =
+		isControlAllowed( allowedControls, 'parents' ) &&
+		isPostTypeHierarchical;
+
+	const showFiltersPanel =
+		showTaxControl ||
+		showAuthorControl ||
+		showSearchControl ||
+		showParentControl;
+
 	return (
 		<>
 			{ showSettingsPanel && (
@@ -141,6 +156,7 @@ export default function QueryInspectorControls( {
 						{ showColumnsControl && (
 							<>
 								<RangeControl
+									__nextHasNoMarginBottom
 									label={ __( 'Columns' ) }
 									value={ displayLayout.columns }
 									onChange={ ( value ) =>
@@ -178,7 +194,7 @@ export default function QueryInspectorControls( {
 					</PanelBody>
 				</InspectorControls>
 			) }
-			{ ! inherit && (
+			{ ! inherit && showFiltersPanel && (
 				<InspectorControls>
 					<ToolsPanel
 						className="block-library-query-toolspanel__filters"
@@ -193,26 +209,25 @@ export default function QueryInspectorControls( {
 							setQuerySearch( '' );
 						} }
 					>
-						{ !! taxonomies?.length &&
-							isControlAllowed( allowedControls, 'taxQuery' ) && (
-								<ToolsPanelItem
-									label={ __( 'Taxonomies' ) }
-									hasValue={ () =>
-										Object.values( taxQuery || {} ).some(
-											( terms ) => !! terms.length
-										)
-									}
-									onDeselect={ () =>
-										setQuery( { taxQuery: null } )
-									}
-								>
-									<TaxonomyControls
-										onChange={ setQuery }
-										query={ query }
-									/>
-								</ToolsPanelItem>
-							) }
-						{ isControlAllowed( allowedControls, 'author' ) && (
+						{ showTaxControl && (
+							<ToolsPanelItem
+								label={ __( 'Taxonomies' ) }
+								hasValue={ () =>
+									Object.values( taxQuery || {} ).some(
+										( terms ) => !! terms.length
+									)
+								}
+								onDeselect={ () =>
+									setQuery( { taxQuery: null } )
+								}
+							>
+								<TaxonomyControls
+									onChange={ setQuery }
+									query={ query }
+								/>
+							</ToolsPanelItem>
+						) }
+						{ showAuthorControl && (
 							<ToolsPanelItem
 								hasValue={ () => !! authorIds }
 								label={ __( 'Authors' ) }
@@ -224,7 +239,7 @@ export default function QueryInspectorControls( {
 								/>
 							</ToolsPanelItem>
 						) }
-						{ isControlAllowed( allowedControls, 'search' ) && (
+						{ showSearchControl && (
 							<ToolsPanelItem
 								hasValue={ () => !! querySearch }
 								label={ __( 'Keyword' ) }
@@ -237,22 +252,19 @@ export default function QueryInspectorControls( {
 								/>
 							</ToolsPanelItem>
 						) }
-						{ isPostTypeHierarchical &&
-							isControlAllowed( allowedControls, 'parents' ) && (
-								<ToolsPanelItem
-									hasValue={ () => !! parents?.length }
-									label={ __( 'Parents' ) }
-									onDeselect={ () =>
-										setQuery( { parents: [] } )
-									}
-								>
-									<ParentControl
-										parents={ parents }
-										postType={ postType }
-										onChange={ setQuery }
-									/>
-								</ToolsPanelItem>
-							) }
+						{ showParentControl && (
+							<ToolsPanelItem
+								hasValue={ () => !! parents?.length }
+								label={ __( 'Parents' ) }
+								onDeselect={ () => setQuery( { parents: [] } ) }
+							>
+								<ParentControl
+									parents={ parents }
+									postType={ postType }
+									onChange={ setQuery }
+								/>
+							</ToolsPanelItem>
+						) }
 					</ToolsPanel>
 				</InspectorControls>
 			) }

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

@@ -4,12 +4,20 @@
 import { FormTokenField } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { useState, useEffect } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { useTaxonomies } from '../../utils';
-import { MAX_FETCHED_TERMS } from '../../constants';
+
+const EMPTY_ARRAY = [];
+const BASE_QUERY = {
+	order: 'asc',
+	_fields: 'id,name',
+	context: 'view',
+};
 
 // Helper function to get the term id based on user input in terms `FormTokenField`.
 const getTermIdByTermValue = ( terms, termValue ) => {
@@ -35,20 +43,6 @@ const getTermIdByTermValue = ( terms, termValue ) => {
 	)?.id;
 };
 
-const useTaxonomyTerms = ( slug ) => {
-	return useSelect(
-		( select ) => {
-			const terms = select( coreStore ).getEntityRecords(
-				'taxonomy',
-				slug,
-				{ context: 'view', per_page: MAX_FETCHED_TERMS }
-			);
-			return { terms };
-		},
-		[ slug ]
-	);
-};
-
 export function TaxonomyControls( { onChange, query } ) {
 	const { postType, taxQuery } = query;
 
@@ -60,7 +54,7 @@ export function TaxonomyControls( { onChange, query } ) {
 	return (
 		<>
 			{ taxonomies.map( ( taxonomy ) => {
-				const value = taxQuery?.[ taxonomy.slug ] || [];
+				const termIds = taxQuery?.[ taxonomy.slug ] || [];
 				const handleChange = ( newTermIds ) =>
 					onChange( {
 						taxQuery: {
@@ -73,7 +67,7 @@ export function TaxonomyControls( { onChange, query } ) {
 					<TaxonomyItem
 						key={ taxonomy.slug }
 						taxonomy={ taxonomy }
-						value={ value }
+						termIds={ termIds }
 						onChange={ handleChange }
 					/>
 				);
@@ -81,38 +75,108 @@ export function TaxonomyControls( { onChange, query } ) {
 		</>
 	);
 }
-function TaxonomyItem( { taxonomy, value, onChange } ) {
-	const { terms } = useTaxonomyTerms( taxonomy.slug );
-	if ( ! terms?.length ) {
-		return null;
-	}
 
+/**
+ * Renders a `FormTokenField` for a given taxonomy.
+ *
+ * @param {Object}   props          The props for the component.
+ * @param {Object}   props.taxonomy The taxonomy object.
+ * @param {number[]} props.termIds  An array with the block's term ids for the given taxonomy.
+ * @param {Function} props.onChange Callback `onChange` function.
+ * @return {JSX.Element} The rendered component.
+ */
+function TaxonomyItem( { taxonomy, termIds, onChange } ) {
+	const [ search, setSearch ] = useState( '' );
+	const [ value, setValue ] = useState( EMPTY_ARRAY );
+	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
+	const debouncedSearch = useDebounce( setSearch, 250 );
+	const { searchResults, searchHasResolved } = useSelect(
+		( select ) => {
+			if ( ! search ) {
+				return { searchResults: EMPTY_ARRAY, searchHasResolved: true };
+			}
+			const { getEntityRecords, hasFinishedResolution } =
+				select( coreStore );
+			const selectorArgs = [
+				'taxonomy',
+				taxonomy.slug,
+				{
+					...BASE_QUERY,
+					search,
+					orderby: 'name',
+					exclude: termIds,
+					per_page: 20,
+				},
+			];
+			return {
+				searchResults: getEntityRecords( ...selectorArgs ),
+				searchHasResolved: hasFinishedResolution(
+					'getEntityRecords',
+					selectorArgs
+				),
+			};
+		},
+		[ search, termIds ]
+	);
+	// `existingTerms` are the ones fetched from the API and their type is `{ id: number; name: string }`.
+	// They are used to extract the terms' names to populate the `FormTokenField` properly
+	// and to sanitize the provided `termIds`, by setting only the ones that exist.
+	const existingTerms = useSelect(
+		( select ) => {
+			if ( ! termIds?.length ) return EMPTY_ARRAY;
+			const { getEntityRecords } = select( coreStore );
+			return getEntityRecords( 'taxonomy', taxonomy.slug, {
+				...BASE_QUERY,
+				include: termIds,
+				per_page: termIds.length,
+			} );
+		},
+		[ termIds ]
+	);
+	// Update the `value` state only after the selectors are resolved
+	// to avoid emptying the input when we're changing terms.
+	useEffect( () => {
+		if ( ! termIds?.length ) {
+			setValue( EMPTY_ARRAY );
+		}
+		if ( ! existingTerms?.length ) return;
+		// Returns only the existing entity ids. This prevents the component
+		// from crashing in the editor, when non existing ids are provided.
+		const sanitizedValue = termIds.reduce( ( accumulator, id ) => {
+			const entity = existingTerms.find( ( term ) => term.id === id );
+			if ( entity ) {
+				accumulator.push( {
+					id,
+					value: entity.name,
+				} );
+			}
+			return accumulator;
+		}, [] );
+		setValue( sanitizedValue );
+	}, [ termIds, existingTerms ] );
+	// Update suggestions only when the query has resolved.
+	useEffect( () => {
+		if ( ! searchHasResolved ) return;
+		setSuggestions( searchResults.map( ( result ) => result.name ) );
+	}, [ searchResults, searchHasResolved ] );
 	const onTermsChange = ( newTermValues ) => {
-		const termIds = new Set();
+		const newTermIds = new Set();
 		for ( const termValue of newTermValues ) {
-			const termId = getTermIdByTermValue( terms, termValue );
+			const termId = getTermIdByTermValue( searchResults, termValue );
 			if ( termId ) {
-				termIds.add( termId );
+				newTermIds.add( termId );
 			}
 		}
-
-		onChange( Array.from( termIds ) );
+		setSuggestions( EMPTY_ARRAY );
+		onChange( Array.from( newTermIds ) );
 	};
-
-	// Selects only the existing term ids in proper format to be
-	// used in `FormTokenField`. This prevents the component from
-	// crashing in the editor, when non existing term ids were provided.
-	const taxQueryValue = value
-		.map( ( termId ) => terms.find( ( t ) => t.id === termId ) )
-		.filter( Boolean )
-		.map( ( term ) => ( { id: term.id, value: term.name } ) );
-
 	return (
 		<div className="block-library-query-inspector__taxonomy-control">
 			<FormTokenField
 				label={ taxonomy.name }
-				value={ taxQueryValue }
-				suggestions={ terms.map( ( t ) => t.name ) }
+				value={ value }
+				onInputChange={ debouncedSearch }
+				suggestions={ suggestions }
 				onChange={ onTermsChange }
 				__experimentalShowHowTo={ false }
 			/>