@wordpress/block-library 7.13.1-next.957ca95e4c.0 → 7.14.1

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

@@ -19,8 +19,6 @@ import {
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 import { useEffect, useState, useCallback } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -30,23 +28,19 @@ import AuthorControl from './author-control';
 import ParentControl from './parent-control';
 import { TaxonomyControls, useTaxonomiesInfo } from './taxonomy-controls';
 import StickyControl from './sticky-control';
-import { usePostTypes } from '../../utils';
-
-function useIsPostTypeHierarchical( postType ) {
-	return useSelect(
-		( select ) => {
-			const type = select( coreStore ).getPostType( postType );
-			return type?.viewable && type?.hierarchical;
-		},
-		[ postType ]
-	);
-}
+import {
+	usePostTypes,
+	useIsPostTypeHierarchical,
+	useAllowedControls,
+	isControlAllowed,
+} from '../../utils';
 
 export default function QueryInspectorControls( {
-	attributes: { query, displayLayout },
+	attributes,
 	setQuery,
 	setDisplayLayout,
 } ) {
+	const { query, displayLayout } = attributes;
 	const {
 		order,
 		orderBy,
@@ -57,6 +51,7 @@ export default function QueryInspectorControls( {
 		taxQuery,
 		parents,
 	} = query;
+	const allowedControls = useAllowedControls( attributes );
 	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
 	const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
 	const taxonomiesInfo = useTaxonomiesInfo( postType );
@@ -102,70 +97,90 @@ export default function QueryInspectorControls( {
 		onChangeDebounced();
 		return onChangeDebounced.cancel;
 	}, [ querySearch, onChangeDebounced ] );
+	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
+	const showPostTypeControl =
+		! inherit && isControlAllowed( allowedControls, 'postType' );
+	const showColumnsControl = displayLayout?.type === 'flex';
+	const showOrderControl =
+		! inherit && isControlAllowed( allowedControls, 'order' );
+	const showStickyControl =
+		! inherit &&
+		showSticky &&
+		isControlAllowed( allowedControls, 'sticky' );
+	const showSettingsPanel =
+		showInheritControl ||
+		showPostTypeControl ||
+		showColumnsControl ||
+		showOrderControl ||
+		showStickyControl;
 	return (
 		<>
-			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						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.'
+			{ showSettingsPanel && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings' ) }>
+						{ showInheritControl && (
+							<ToggleControl
+								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 } )
+								}
+							/>
 						) }
-						checked={ !! inherit }
-						onChange={ ( value ) =>
-							setQuery( { inherit: !! value } )
-						}
-					/>
-					{ ! inherit && (
-						<SelectControl
-							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.'
-							) }
-						/>
-					) }
-					{ displayLayout?.type === 'flex' && (
-						<>
-							<RangeControl
-								label={ __( 'Columns' ) }
-								value={ displayLayout.columns }
+						{ showPostTypeControl && (
+							<SelectControl
+								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.'
+								) }
+							/>
+						) }
+						{ showColumnsControl && (
+							<>
+								<RangeControl
+									label={ __( 'Columns' ) }
+									value={ displayLayout.columns }
+									onChange={ ( value ) =>
+										setDisplayLayout( { columns: value } )
+									}
+									min={ 2 }
+									max={ Math.max( 6, displayLayout.columns ) }
+								/>
+								{ displayLayout.columns > 6 && (
+									<Notice
+										status="warning"
+										isDismissible={ false }
+									>
+										{ __(
+											'This column count exceeds the recommended amount and may cause visual breakage.'
+										) }
+									</Notice>
+								) }
+							</>
+						) }
+						{ showOrderControl && (
+							<OrderControl
+								{ ...{ order, orderBy } }
+								onChange={ setQuery }
+							/>
+						) }
+						{ showStickyControl && (
+							<StickyControl
+								value={ sticky }
 								onChange={ ( value ) =>
-									setDisplayLayout( { columns: value } )
+									setQuery( { sticky: value } )
 								}
-								min={ 2 }
-								max={ Math.max( 6, displayLayout.columns ) }
 							/>
-							{ displayLayout.columns > 6 && (
-								<Notice
-									status="warning"
-									isDismissible={ false }
-								>
-									{ __(
-										'This column count exceeds the recommended amount and may cause visual breakage.'
-									) }
-								</Notice>
-							) }
-						</>
-					) }
-					{ ! inherit && (
-						<OrderControl
-							{ ...{ order, orderBy } }
-							onChange={ setQuery }
-						/>
-					) }
-					{ ! inherit && showSticky && (
-						<StickyControl
-							value={ sticky }
-							onChange={ ( value ) =>
-								setQuery( { sticky: value } )
-							}
-						/>
-					) }
-				</PanelBody>
-			</InspectorControls>
+						) }
+					</PanelBody>
+				</InspectorControls>
+			) }
 			{ ! inherit && (
 				<InspectorControls>
 					<ToolsPanel
@@ -181,58 +196,69 @@ export default function QueryInspectorControls( {
 							setQuerySearch( '' );
 						} }
 					>
-						{ !! taxonomiesInfo?.length && (
+						{ !! taxonomiesInfo?.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' ) && (
 							<ToolsPanelItem
-								label={ __( 'Taxonomies' ) }
-								hasValue={ () =>
-									Object.values( taxQuery || {} ).some(
-										( terms ) => !! terms.length
-									)
-								}
-								onDeselect={ () =>
-									setQuery( { taxQuery: null } )
-								}
+								hasValue={ () => !! authorIds }
+								label={ __( 'Authors' ) }
+								onDeselect={ () => setQuery( { author: '' } ) }
 							>
-								<TaxonomyControls
+								<AuthorControl
+									value={ authorIds }
 									onChange={ setQuery }
-									query={ query }
 								/>
 							</ToolsPanelItem>
 						) }
-						<ToolsPanelItem
-							hasValue={ () => !! authorIds }
-							label={ __( 'Authors' ) }
-							onDeselect={ () => setQuery( { author: '' } ) }
-						>
-							<AuthorControl
-								value={ authorIds }
-								onChange={ setQuery }
-							/>
-						</ToolsPanelItem>
-						<ToolsPanelItem
-							hasValue={ () => !! querySearch }
-							label={ __( 'Keyword' ) }
-							onDeselect={ () => setQuerySearch( '' ) }
-						>
-							<TextControl
-								label={ __( 'Keyword' ) }
-								value={ querySearch }
-								onChange={ setQuerySearch }
-							/>
-						</ToolsPanelItem>
-						{ isPostTypeHierarchical && (
+						{ isControlAllowed( allowedControls, 'search' ) && (
 							<ToolsPanelItem
-								hasValue={ () => !! parents?.length }
-								label={ __( 'Parents' ) }
-								onDeselect={ () => setQuery( { parents: [] } ) }
+								hasValue={ () => !! querySearch }
+								label={ __( 'Keyword' ) }
+								onDeselect={ () => setQuerySearch( '' ) }
 							>
-								<ParentControl
-									parents={ parents }
-									postType={ postType }
-									onChange={ setQuery }
+								<TextControl
+									label={ __( 'Keyword' ) }
+									value={ querySearch }
+									onChange={ setQuerySearch }
 								/>
 							</ToolsPanelItem>
 						) }
+						{ isPostTypeHierarchical &&
+							! isControlAllowed(
+								allowedControls,
+								'parents'
+							) && (
+								<ToolsPanelItem
+									hasValue={ () => !! parents?.length }
+									label={ __( 'Parents' ) }
+									onDeselect={ () =>
+										setQuery( { parents: [] } )
+									}
+								>
+									<ParentControl
+										parents={ parents }
+										postType={ postType }
+										onChange={ setQuery }
+									/>
+								</ToolsPanelItem>
+							) }
 					</ToolsPanel>
 				</InspectorControls>
 			) }

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

@@ -0,0 +1,131 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
+import { useEffect } from '@wordpress/element';
+import {
+	BlockControls,
+	InspectorControls,
+	useBlockProps,
+	useSetting,
+	store as blockEditorStore,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import QueryToolbar from './query-toolbar';
+import QueryInspectorControls from './inspector-controls';
+import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
+
+const TEMPLATE = [ [ 'core/post-template' ] ];
+export default function QueryContent( {
+	attributes,
+	setAttributes,
+	openPatternSelectionModal,
+	name,
+	clientId,
+} ) {
+	const {
+		queryId,
+		query,
+		displayLayout,
+		tagName: TagName = 'div',
+		layout = {},
+	} = attributes;
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const instanceId = useInstanceId( QueryContent );
+	const { themeSupportsLayout } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return { themeSupportsLayout: getSettings()?.supportsLayout };
+	}, [] );
+	const defaultLayout = useSetting( 'layout' ) || {};
+	const usedLayout = ! layout?.type
+		? { ...defaultLayout, ...layout, type: 'default' }
+		: { ...defaultLayout, ...layout };
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		__experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
+	} );
+	const { postsPerPage } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			postsPerPage:
+				+getSettings().postsPerPage || DEFAULTS_POSTS_PER_PAGE,
+		};
+	}, [] );
+	// There are some effects running where some initialization logic is
+	// happening and setting some values to some attributes (ex. queryId).
+	// These updates can cause an `undo trap` where undoing will result in
+	// resetting again, so we need to mark these changes as not persistent
+	// with `__unstableMarkNextChangeAsNotPersistent`.
+
+	// 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 override previous wanted changes.
+	useEffect( () => {
+		const newQuery = {};
+		if ( ! query.perPage && postsPerPage ) {
+			newQuery.perPage = postsPerPage;
+		}
+		if ( !! Object.keys( newQuery ).length ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateQuery( newQuery );
+		}
+	}, [ query.perPage ] );
+	// We need this for multi-query block pagination.
+	// Query parameters for each block are scoped to their ID.
+	useEffect( () => {
+		if ( ! Number.isFinite( queryId ) ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { queryId: instanceId } );
+		}
+	}, [ queryId, instanceId ] );
+	const updateQuery = ( newQuery ) =>
+		setAttributes( { query: { ...query, ...newQuery } } );
+	const updateDisplayLayout = ( newDisplayLayout ) =>
+		setAttributes( {
+			displayLayout: { ...displayLayout, ...newDisplayLayout },
+		} );
+	return (
+		<>
+			<QueryInspectorControls
+				attributes={ attributes }
+				setQuery={ updateQuery }
+				setDisplayLayout={ updateDisplayLayout }
+			/>
+			<BlockControls>
+				<QueryToolbar
+					name={ name }
+					clientId={ clientId }
+					attributes={ attributes }
+					setQuery={ updateQuery }
+					setDisplayLayout={ updateDisplayLayout }
+					openPatternSelectionModal={ openPatternSelectionModal }
+				/>
+			</BlockControls>
+			<InspectorControls __experimentalGroup="advanced">
+				<SelectControl
+					label={ __( 'HTML element' ) }
+					options={ [
+						{ label: __( 'Default (<div>)' ), value: 'div' },
+						{ label: '<main>', value: 'main' },
+						{ label: '<section>', value: 'section' },
+						{ label: '<aside>', value: 'aside' },
+					] }
+					value={ TagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+				/>
+			</InspectorControls>
+			<TagName { ...innerBlocksProps } />
+		</>
+	);
+}

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

@@ -2,17 +2,98 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	useBlockProps,
-	__experimentalBlockVariationPicker,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
 import {
 	createBlocksFromInnerBlocksTemplate,
 	store as blocksStore,
 } from '@wordpress/blocks';
+import { useState } from '@wordpress/element';
+import {
+	useBlockProps,
+	store as blockEditorStore,
+	__experimentalBlockVariationPicker,
+	__experimentalGetMatchingVariation as getMatchingVariation,
+} from '@wordpress/block-editor';
+import { Button, Placeholder } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
-function QueryPlaceholder( {
+export default function QueryPlaceholder( {
+	attributes,
+	clientId,
+	name,
+	openPatternSelectionModal,
+	setAttributes,
+} ) {
+	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
+	const blockProps = useBlockProps();
+
+	const { blockType, allVariations, hasPatterns } = useSelect(
+		( select ) => {
+			const { getBlockVariations, getBlockType } = select( blocksStore );
+			const {
+				getBlockRootClientId,
+				__experimentalGetPatternsByBlockTypes,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+
+			return {
+				blockType: getBlockType( name ),
+				allVariations: getBlockVariations( name ),
+				hasPatterns: !! __experimentalGetPatternsByBlockTypes(
+					name,
+					rootClientId
+				).length,
+			};
+		},
+		[ name, clientId ]
+	);
+
+	const matchingVariation = getMatchingVariation( attributes, allVariations );
+	const icon = matchingVariation?.icon || blockType?.icon?.src;
+	const label = matchingVariation?.title || blockType?.title;
+	if ( isStartingBlank ) {
+		return (
+			<QueryVariationPicker
+				clientId={ clientId }
+				name={ name }
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				icon={ icon }
+				label={ label }
+			/>
+		);
+	}
+	return (
+		<div { ...blockProps }>
+			<Placeholder
+				icon={ icon }
+				label={ label }
+				instructions={ __(
+					'Choose a pattern for the query loop or start blank.'
+				) }
+			>
+				{ !! hasPatterns && (
+					<Button
+						variant="primary"
+						onClick={ openPatternSelectionModal }
+					>
+						{ __( 'Choose' ) }
+					</Button>
+				) }
+
+				<Button
+					variant="secondary"
+					onClick={ () => {
+						setIsStartingBlank( true );
+					} }
+				>
+					{ __( 'Start blank' ) }
+				</Button>
+			</Placeholder>
+		</div>
+	);
+}
+
+function QueryVariationPicker( {
 	clientId,
 	name,
 	attributes,
@@ -70,5 +151,3 @@ function QueryPlaceholder( {
 		</div>
 	);
 }
-
-export default QueryPlaceholder;

package/src/query/index.js

@@ -7,6 +7,7 @@ import { addFilter } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
@@ -25,6 +26,8 @@ export const settings = {
 	deprecated,
 };
 
-// Importing this file includes side effects and is added
-// in block-library/package.json under `sideEffects`.
-addFilter( 'editor.BlockEdit', 'core/query', queryInspectorControls );
+export const init = () => {
+	addFilter( 'editor.BlockEdit', 'core/query', queryInspectorControls );
+
+	return initBlock( { name, metadata, settings } );
+};

package/src/query/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/query/utils.js

@@ -9,8 +9,14 @@ import { get } from 'lodash';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { cloneBlock } from '@wordpress/blocks';
+import { cloneBlock, store as blocksStore } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { name as queryLoopName } from './block.json';
 
 /**
  * @typedef IHasNameAndId
@@ -127,6 +133,48 @@ export const useTaxonomies = ( postType ) => {
 	return taxonomies;
 };
 
+/**
+ * Hook that returns whether a specific post type is hierarchical.
+ *
+ * @param {string} postType The post type to check.
+ * @return {boolean} Whether a specific post type is hierarchical.
+ */
+export function useIsPostTypeHierarchical( postType ) {
+	return useSelect(
+		( select ) => {
+			const type = select( coreStore ).getPostType( postType );
+			return type?.viewable && type?.hierarchical;
+		},
+		[ postType ]
+	);
+}
+
+/**
+ * Hook that returns the query properties' names defined by the active
+ * block variation, to determine which block's filters to show.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {string[]} An array of the query attributes.
+ */
+export function useAllowedControls( attributes ) {
+	return useSelect(
+		( select ) =>
+			select( blocksStore ).getActiveBlockVariation(
+				queryLoopName,
+				attributes
+			)?.allowControls,
+
+		[ attributes ]
+	);
+}
+export function isControlAllowed( allowedControls, key ) {
+	// Every controls is allowed if the list is not defined.
+	if ( ! allowedControls ) {
+		return true;
+	}
+	return allowedControls.includes( key );
+}
+
 /**
  * Clones a pattern's blocks and then recurses over that list of blocks,
  * transforming them to retain some `query` attribute properties.
@@ -167,3 +215,48 @@ export const getTransformedBlocksFromPattern = (
 	}
 	return { newBlocks: clonedBlocks, queryClientIds };
 };
+
+/**
+ * Helper hook that determines if there is an active variation of the block
+ * and if there are available specific patterns for this variation.
+ * If there are, these patterns are going to be the only ones suggested to
+ * the user in setup and replace flow, without including the default ones
+ * for Query Loop.
+ *
+ * If there are no such patterns, the default ones for Query Loop are going
+ * to be suggested.
+ *
+ * @param {string} clientId   The block's client ID.
+ * @param {Object} attributes The block's attributes.
+ * @return {string} The block name to be used in the patterns suggestions.
+ */
+export function useBlockNameForPatterns( clientId, attributes ) {
+	const activeVariationName = useSelect(
+		( select ) =>
+			select( blocksStore ).getActiveBlockVariation(
+				queryLoopName,
+				attributes
+			)?.name,
+
+		[ attributes ]
+	);
+	const blockName = `${ queryLoopName }/${ activeVariationName }`;
+	const activeVariationPatterns = useSelect(
+		( select ) => {
+			if ( ! activeVariationName ) {
+				return;
+			}
+			const {
+				getBlockRootClientId,
+				__experimentalGetPatternsByBlockTypes,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+			return __experimentalGetPatternsByBlockTypes(
+				blockName,
+				rootClientId
+			);
+		},
+		[ clientId, activeVariationName ]
+	);
+	return activeVariationPatterns?.length ? blockName : queryLoopName;
+}