@wordpress/block-library 7.14.0 → 7.14.1

package/src/query/edit/index.js

@@ -2,231 +2,62 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
-import { useInstanceId } from '@wordpress/compose';
-import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import {
-	BlockControls,
 	BlockContextProvider,
-	InspectorControls,
-	useBlockProps,
-	useSetting,
 	store as blockEditorStore,
-	useInnerBlocksProps,
-	__experimentalGetMatchingVariation as getMatchingVariation,
 	__experimentalBlockPatternSetup as BlockPatternSetup,
 } from '@wordpress/block-editor';
-import {
-	Button,
-	SelectControl,
-	Placeholder,
-	Modal,
-} from '@wordpress/components';
+import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import QueryToolbar from './query-toolbar';
-import QueryInspectorControls from './inspector-controls';
+import QueryContent from './query-content';
 import QueryPlaceholder from './query-placeholder';
-import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
-import { getTransformedBlocksFromPattern } from '../utils';
-
-const TEMPLATE = [ [ 'core/post-template' ] ];
-export 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 && layout.inherit ? 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`.
+import {
+	useBlockNameForPatterns,
+	getTransformedBlocksFromPattern,
+} from '../utils';
 
-	// 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 },
-		} );
+const QueryEdit = ( props ) => {
+	const { clientId, attributes } = props;
+	const [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen ] =
+		useState( false );
+	const hasInnerBlocks = useSelect(
+		( select ) =>
+			!! select( blockEditorStore ).getBlocks( clientId ).length,
+		[ clientId ]
+	);
+	const Component = hasInnerBlocks ? QueryContent : QueryPlaceholder;
 	return (
 		<>
-			<QueryInspectorControls
-				attributes={ attributes }
-				setQuery={ updateQuery }
-				setDisplayLayout={ updateDisplayLayout }
+			<Component
+				{ ...props }
+				openPatternSelectionModal={ () =>
+					setIsPatternSelectionModalOpen( true )
+				}
 			/>
-			<BlockControls>
-				<QueryToolbar
-					name={ name }
+			{ isPatternSelectionModalOpen && (
+				<PatternSelectionModal
 					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 } )
+					setIsPatternSelectionModalOpen={
+						setIsPatternSelectionModalOpen
 					}
 				/>
-			</InspectorControls>
-			<TagName { ...innerBlocksProps } />
+			) }
 		</>
 	);
-}
+};
 
-function QueryPatternSetup( {
-	attributes,
+function PatternSelectionModal( {
 	clientId,
-	name,
-	openPatternSelectionModal,
-	setAttributes,
+	attributes,
+	setIsPatternSelectionModalOpen,
 } ) {
-	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 (
-			<QueryPlaceholder
-				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>
-	);
-}
-
-const QueryEdit = ( props ) => {
-	const { clientId, name, attributes } = props;
-	const [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen ] =
-		useState( false );
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
-	const hasInnerBlocks = useSelect(
-		( select ) =>
-			!! select( blockEditorStore ).getBlocks( clientId ).length,
-		[ clientId ]
-	);
-	const Component = hasInnerBlocks ? QueryContent : QueryPatternSetup;
 	const onBlockPatternSelect = ( blocks ) => {
 		const { newBlocks, queryClientIds } = getTransformedBlocksFromPattern(
 			blocks,
@@ -245,34 +76,26 @@ const QueryEdit = ( props ) => {
 		} ),
 		[ attributes.query.postType ]
 	);
+	const blockNameForPatterns = useBlockNameForPatterns(
+		clientId,
+		attributes
+	);
 	return (
-		<>
-			<Component
-				{ ...props }
-				openPatternSelectionModal={ () =>
-					setIsPatternSelectionModalOpen( true )
-				}
-			/>
-			{ isPatternSelectionModalOpen && (
-				<Modal
-					className="block-editor-query-pattern__selection-modal"
-					title={ __( 'Choose a pattern' ) }
-					closeLabel={ __( 'Cancel' ) }
-					onRequestClose={ () =>
-						setIsPatternSelectionModalOpen( false )
-					}
-				>
-					<BlockContextProvider value={ blockPreviewContext }>
-						<BlockPatternSetup
-							blockName={ name }
-							clientId={ clientId }
-							onBlockPatternSelect={ onBlockPatternSelect }
-						/>
-					</BlockContextProvider>
-				</Modal>
-			) }
-		</>
+		<Modal
+			className="block-editor-query-pattern__selection-modal"
+			title={ __( 'Choose a pattern' ) }
+			closeLabel={ __( 'Cancel' ) }
+			onRequestClose={ () => setIsPatternSelectionModalOpen( false ) }
+		>
+			<BlockContextProvider value={ blockPreviewContext }>
+				<BlockPatternSetup
+					blockName={ blockNameForPatterns }
+					clientId={ clientId }
+					onBlockPatternSelect={ onBlockPatternSelect }
+				/>
+			</BlockContextProvider>
+		</Modal>
 	);
-};
+}
 
 export default QueryEdit;

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/utils.js

@@ -9,6 +9,7 @@ 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, store as blocksStore } from '@wordpress/blocks';
 
@@ -214,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;
+}

package/src/search/index.php

@@ -121,7 +121,7 @@ function render_block_core_search( $attributes ) {
 		}
 
 		// Include the button element class.
-		$button_classes[] = wp_theme_element_class_name( 'button' );
+		$button_classes[] = wp_theme_get_element_class_name( 'button' );
 		$button_markup    = sprintf(
 			'<button type="submit" class="%s" %s %s>%s</button>',
 			esc_attr( implode( ' ', $button_classes ) ),

package/src/social-link/edit.js

@@ -12,7 +12,7 @@ import {
 	URLInput,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { Fragment, useState, useRef } from '@wordpress/element';
+import { Fragment, useState } from '@wordpress/element';
 import {
 	Button,
 	PanelBody,
@@ -31,12 +31,9 @@ const SocialLinkURLPopover = ( {
 	url,
 	setAttributes,
 	setPopover,
-	anchorRef,
+	popoverAnchor,
 } ) => (
-	<URLPopover
-		anchorRef={ anchorRef?.current }
-		onClose={ () => setPopover( false ) }
-	>
+	<URLPopover anchor={ popoverAnchor } onClose={ () => setPopover( false ) }>
 		<form
 			className="block-editor-url-popover__link-editor"
 			onSubmit={ ( event ) => {
@@ -76,7 +73,10 @@ const SocialLinkEdit = ( {
 		'wp-social-link__is-incomplete': ! url,
 	} );
 
-	const ref = useRef();
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+
 	const IconComponent = getIconBySite( service );
 	const socialLinkName = getNameBySite( service );
 	const socialLinkLabel = label ?? socialLinkName;
@@ -116,7 +116,7 @@ const SocialLinkEdit = ( {
 			<li { ...blockProps }>
 				<Button
 					className="wp-block-social-link-anchor"
-					ref={ ref }
+					ref={ setPopoverAnchor }
 					onClick={ () => setPopover( true ) }
 				>
 					<IconComponent />
@@ -132,7 +132,7 @@ const SocialLinkEdit = ( {
 							url={ url }
 							setAttributes={ setAttributes }
 							setPopover={ setPopover }
-							anchorRef={ ref }
+							popoverAnchor={ popoverAnchor }
 						/>
 					) }
 				</Button>