@wordpress/block-library 8.26.0 → 8.27.1

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

@@ -12,10 +12,7 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import {
-	InspectorControls,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { debounce } from '@wordpress/compose';
 import { useEffect, useState, useCallback } from '@wordpress/element';
 
@@ -138,156 +135,150 @@ export default function QueryInspectorControls( props ) {
 				<CreateNewPostLink { ...props } />
 			</BlockInfo>
 			{ showSettingsPanel && (
-				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
-						{ showInheritControl && (
-							<ToggleControl
-								__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 } )
-								}
-							/>
-						) }
-						{ showPostTypeControl && (
-							<SelectControl
+				<PanelBody title={ __( 'Settings' ) }>
+					{ showInheritControl && (
+						<ToggleControl
+							__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 } )
+							}
+						/>
+					) }
+					{ 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.'
+							) }
+						/>
+					) }
+					{ showColumnsControl && (
+						<>
+							<RangeControl
 								__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.'
-								) }
-							/>
-						) }
-						{ showColumnsControl && (
-							<>
-								<RangeControl
-									__nextHasNoMarginBottom
-									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 }
+								label={ __( 'Columns' ) }
+								value={ displayLayout.columns }
 								onChange={ ( value ) =>
-									setQuery( { sticky: value } )
+									setDisplayLayout( {
+										columns: value,
+									} )
 								}
+								min={ 2 }
+								max={ Math.max( 6, displayLayout.columns ) }
 							/>
-						) }
-						<EnhancedPaginationControl
-							enhancedPagination={ enhancedPagination }
-							setAttributes={ setAttributes }
-							clientId={ clientId }
+							{ 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 ) =>
+								setQuery( { sticky: value } )
+							}
 						/>
-					</PanelBody>
-				</InspectorControls>
+					) }
+					<EnhancedPaginationControl
+						enhancedPagination={ enhancedPagination }
+						setAttributes={ setAttributes }
+						clientId={ clientId }
+					/>
+				</PanelBody>
 			) }
 			{ ! inherit && showFiltersPanel && (
-				<InspectorControls>
-					<ToolsPanel
-						className="block-library-query-toolspanel__filters"
-						label={ __( 'Filters' ) }
-						resetAll={ () => {
-							setQuery( {
-								author: '',
-								parents: [],
-								search: '',
-								taxQuery: null,
-							} );
-							setQuerySearch( '' );
-						} }
-						dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
-					>
-						{ 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' ) }
-								onDeselect={ () => setQuery( { author: '' } ) }
-							>
-								<AuthorControl
-									value={ authorIds }
-									onChange={ setQuery }
-								/>
-							</ToolsPanelItem>
-						) }
-						{ showSearchControl && (
-							<ToolsPanelItem
-								hasValue={ () => !! querySearch }
+				<ToolsPanel
+					className="block-library-query-toolspanel__filters"
+					label={ __( 'Filters' ) }
+					resetAll={ () => {
+						setQuery( {
+							author: '',
+							parents: [],
+							search: '',
+							taxQuery: null,
+						} );
+						setQuerySearch( '' );
+					} }
+					dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+				>
+					{ 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' ) }
+							onDeselect={ () => setQuery( { author: '' } ) }
+						>
+							<AuthorControl
+								value={ authorIds }
+								onChange={ setQuery }
+							/>
+						</ToolsPanelItem>
+					) }
+					{ showSearchControl && (
+						<ToolsPanelItem
+							hasValue={ () => !! querySearch }
+							label={ __( 'Keyword' ) }
+							onDeselect={ () => setQuerySearch( '' ) }
+						>
+							<TextControl
+								__nextHasNoMarginBottom
 								label={ __( 'Keyword' ) }
-								onDeselect={ () => setQuerySearch( '' ) }
-							>
-								<TextControl
-									__nextHasNoMarginBottom
-									label={ __( 'Keyword' ) }
-									value={ querySearch }
-									onChange={ setQuerySearch }
-								/>
-							</ToolsPanelItem>
-						) }
-						{ showParentControl && (
-							<ToolsPanelItem
-								hasValue={ () => !! parents?.length }
-								label={ __( 'Parents' ) }
-								onDeselect={ () => setQuery( { parents: [] } ) }
-							>
-								<ParentControl
-									parents={ parents }
-									postType={ postType }
-									onChange={ setQuery }
-								/>
-							</ToolsPanelItem>
-						) }
-					</ToolsPanel>
-				</InspectorControls>
+								value={ querySearch }
+								onChange={ setQuerySearch }
+							/>
+						</ToolsPanelItem>
+					) }
+					{ showParentControl && (
+						<ToolsPanelItem
+							hasValue={ () => !! parents?.length }
+							label={ __( 'Parents' ) }
+							onDeselect={ () => setQuery( { parents: [] } ) }
+						>
+							<ParentControl
+								parents={ parents }
+								postType={ postType }
+								onChange={ setQuery }
+							/>
+						</ToolsPanelItem>
+					) }
+				</ToolsPanel>
 			) }
 		</>
 	);

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

@@ -112,13 +112,15 @@ export default function QueryContent( {
 				setAttributes={ setAttributes }
 				clientId={ clientId }
 			/>
-			<QueryInspectorControls
-				attributes={ attributes }
-				setQuery={ updateQuery }
-				setDisplayLayout={ updateDisplayLayout }
-				setAttributes={ setAttributes }
-				clientId={ clientId }
-			/>
+			<InspectorControls>
+				<QueryInspectorControls
+					attributes={ attributes }
+					setQuery={ updateQuery }
+					setDisplayLayout={ updateDisplayLayout }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
+			</InspectorControls>
 			<BlockControls>
 				<QueryToolbar
 					name={ name }

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

@@ -11,7 +11,6 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalBlockVariationPicker,
-	__experimentalGetMatchingVariation as getMatchingVariation,
 } from '@wordpress/block-editor';
 import { Button, Placeholder } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -34,31 +33,32 @@ export default function QueryPlaceholder( {
 		clientId,
 		attributes
 	);
-
-	const { blockType, allVariations, hasPatterns } = useSelect(
+	const { blockType, activeBlockVariation, hasPatterns } = useSelect(
 		( select ) => {
-			const { getBlockVariations, getBlockType } = select( blocksStore );
+			const { getActiveBlockVariation, getBlockType } =
+				select( blocksStore );
 			const { getBlockRootClientId, getPatternsByBlockTypes } =
 				select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
 			return {
 				blockType: getBlockType( name ),
-				allVariations: getBlockVariations( name ),
+				activeBlockVariation: getActiveBlockVariation(
+					name,
+					attributes
+				),
 				hasPatterns: !! getPatternsByBlockTypes(
 					blockNameForPatterns,
 					rootClientId
 				).length,
 			};
 		},
-		[ name, blockNameForPatterns, clientId ]
+		[ name, blockNameForPatterns, clientId, attributes ]
 	);
-
-	const matchingVariation = getMatchingVariation( attributes, allVariations );
 	const icon =
-		matchingVariation?.icon?.src ||
-		matchingVariation?.icon ||
+		activeBlockVariation?.icon?.src ||
+		activeBlockVariation?.icon ||
 		blockType?.icon?.src;
-	const label = matchingVariation?.title || blockType?.title;
+	const label = activeBlockVariation?.title || blockType?.title;
 	if ( isStartingBlank ) {
 		return (
 			<QueryVariationPicker

package/src/query/index.php

@@ -17,12 +17,19 @@
  * @return string Returns the modified output of the query block.
  */
 function render_block_core_query( $attributes, $content, $block ) {
-	if ( $attributes['enhancedPagination'] && isset( $attributes['queryId'] ) ) {
+	$is_interactive = isset( $attributes['enhancedPagination'] ) && true === $attributes['enhancedPagination'] && isset( $attributes['queryId'] );
+
+	// Enqueue the script module and add the necessary directives if the block is
+	// interactive.
+	if ( $is_interactive ) {
+		wp_enqueue_script_module( '@wordpress/block-library/query' );
+
 		$p = new WP_HTML_Tag_Processor( $content );
 		if ( $p->next_tag() ) {
 			// Add the necessary directives.
 			$p->set_attribute( 'data-wp-interactive', '{"namespace":"core/query"}' );
-			$p->set_attribute( 'data-wp-navigation-id', 'query-' . $attributes['queryId'] );
+			$p->set_attribute( 'data-wp-router-region', 'query-' . $attributes['queryId'] );
+			$p->set_attribute( 'data-wp-init', 'callbacks.setQueryRef' );
 			// Use context to send translated strings.
 			$p->set_attribute(
 				'data-wp-context',
@@ -63,43 +70,17 @@ function render_block_core_query( $attributes, $content, $block ) {
 		}
 	}
 
-	$is_gutenberg_plugin     = defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN;
-	$should_load_view_script = $attributes['enhancedPagination'] && isset( $attributes['queryId'] );
-	$view_asset              = 'wp-block-query-view';
-	$script_handles          = $block->block_type->view_script_handles;
-
-	if ( $is_gutenberg_plugin ) {
-		if ( $should_load_view_script ) {
-			gutenberg_enqueue_module( '@wordpress/block-library/query' );
-		}
-		// Remove the view script because we are using the module.
-		$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_asset ) );
-	} else {
-		if ( ! wp_script_is( $view_asset ) ) {
-			// If the script is not needed, and it is still in the `view_script_handles`, remove it.
-			if ( ! $should_load_view_script && in_array( $view_asset, $script_handles, true )
-			) {
-				$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_asset ) );
-			}
-			// If the script is needed, but it was previously removed, add it again.
-			if ( $should_load_view_script && ! in_array( $view_asset, $script_handles, true ) ) {
-				$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_asset ) );
-			}
-		}
-	}
-
+	// Add the styles to the block type if the block is interactive and remove
+	// them if it's not.
 	$style_asset = 'wp-block-query';
 	if ( ! wp_style_is( $style_asset ) ) {
 		$style_handles = $block->block_type->style_handles;
 		// If the styles are not needed, and they are still in the `style_handles`, remove them.
-		if (
-			( ! $attributes['enhancedPagination'] || ! isset( $attributes['queryId'] ) )
-			&& in_array( $style_asset, $style_handles, true )
-		) {
+		if ( ! $is_interactive && in_array( $style_asset, $style_handles, true ) ) {
 			$block->block_type->style_handles = array_diff( $style_handles, array( $style_asset ) );
 		}
 		// If the styles are needed, but they were previously removed, add them again.
-		if ( $attributes['enhancedPagination'] && isset( $attributes['queryId'] ) && ! in_array( $style_asset, $style_handles, true ) ) {
+		if ( $is_interactive && ! in_array( $style_asset, $style_handles, true ) ) {
 			$block->block_type->style_handles = array_merge( $style_handles, array( $style_asset ) );
 		}
 	}
@@ -107,25 +88,6 @@ function render_block_core_query( $attributes, $content, $block ) {
 	return $content;
 }
 
-/**
- * Ensure that the view script has the `wp-interactivity` dependency.
- *
- * @since 6.4.0
- *
- * @global WP_Scripts $wp_scripts
- */
-function block_core_query_ensure_interactivity_dependency() {
-	global $wp_scripts;
-	if (
-		isset( $wp_scripts->registered['wp-block-query-view'] ) &&
-		! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-query-view']->deps, true )
-	) {
-		$wp_scripts->registered['wp-block-query-view']->deps[] = 'wp-interactivity';
-	}
-}
-
-add_action( 'wp_print_scripts', 'block_core_query_ensure_interactivity_dependency' );
-
 /**
  * Registers the `core/query` block on the server.
  */
@@ -137,14 +99,21 @@ function register_block_core_query() {
 		)
 	);
 
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-		gutenberg_register_module(
-			'@wordpress/block-library/query',
-			'/wp-content/plugins/gutenberg/build/interactivity/query.min.js',
-			array( '@wordpress/interactivity' ),
-			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-		);
-	}
+	wp_register_script_module(
+		'@wordpress/block-library/query',
+		defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ? gutenberg_url( '/build/interactivity/query.min.js' ) : includes_url( 'blocks/query/view.min.js' ),
+		array(
+			array(
+				'id'     => '@wordpress/interactivity',
+				'import' => 'static',
+			),
+			array(
+				'id'     => '@wordpress/interactivity-router',
+				'import' => 'dynamic',
+			),
+		),
+		defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+	);
 }
 add_action( 'init', 'register_block_core_query' );
 
@@ -164,14 +133,10 @@ function block_core_query_disable_enhanced_pagination( $parsed_block ) {
 	static $dirty_enhanced_queries = array();
 	static $render_query_callback  = null;
 
-	$block_name = $parsed_block['blockName'];
+	$is_interactive = isset( $parsed_block['attrs']['enhancedPagination'] ) && true === $parsed_block['attrs']['enhancedPagination'] && isset( $parsed_block['attrs']['queryId'] );
+	$block_name     = $parsed_block['blockName'];
 
-	if (
-		'core/query' === $block_name &&
-		isset( $parsed_block['attrs']['enhancedPagination'] ) &&
-		true === $parsed_block['attrs']['enhancedPagination'] &&
-		isset( $parsed_block['attrs']['queryId'] )
-	) {
+	if ( 'core/query' === $block_name && $is_interactive ) {
 		$enhanced_query_stack[] = $parsed_block['attrs']['queryId'];
 
 		if ( ! isset( $render_query_callback ) ) {
@@ -186,12 +151,9 @@ function block_core_query_disable_enhanced_pagination( $parsed_block ) {
 			 * @return string Returns the modified output of the query block.
 			 */
 			$render_query_callback = static function ( $content, $block ) use ( &$enhanced_query_stack, &$dirty_enhanced_queries, &$render_query_callback ) {
-				$has_enhanced_pagination =
-					isset( $block['attrs']['enhancedPagination'] ) &&
-					true === $block['attrs']['enhancedPagination'] &&
-					isset( $block['attrs']['queryId'] );
+				$is_interactive = isset( $block['attrs']['enhancedPagination'] ) && true === $block['attrs']['enhancedPagination'] && isset( $block['attrs']['queryId'] );
 
-				if ( ! $has_enhanced_pagination ) {
+				if ( ! $is_interactive ) {
 					return $content;
 				}
 

package/src/query/variations.js

@@ -39,6 +39,7 @@ const variations = [
 		),
 		icon: postList,
 		attributes: {
+			namespace: 'core/posts-list',
 			query: {
 				perPage: 4,
 				pages: 1,
@@ -53,6 +54,9 @@ const variations = [
 			},
 		},
 		scope: [ 'inserter' ],
+		isActive: ( { namespace, query } ) => {
+			return namespace === 'core/posts-list' && query.postType === 'post';
+		},
 	},
 	{
 		name: 'title-date',

package/src/query/view.js

@@ -1,13 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	store,
-	getContext,
-	getElement,
-	navigate,
-	prefetch,
-} from '@wordpress/interactivity';
+import { store, getContext, getElement } from '@wordpress/interactivity';
 
 const isValidLink = ( ref ) =>
 	ref &&
@@ -37,22 +31,22 @@ store( 'core/query', {
 		*navigate( event ) {
 			const ctx = getContext();
 			const { ref } = getElement();
-			const isDisabled = ref.closest( '[data-wp-navigation-id]' )?.dataset
-				.wpNavigationDisabled;
+			const { queryRef } = ctx;
+			const isDisabled = queryRef?.dataset.wpNavigationDisabled;
 
 			if ( isValidLink( ref ) && isValidEvent( event ) && ! isDisabled ) {
 				event.preventDefault();
 
-				const id = ref.closest( '[data-wp-navigation-id]' ).dataset
-					.wpNavigationId;
-
 				// Don't announce the navigation immediately, wait 400 ms.
 				const timeout = setTimeout( () => {
 					ctx.message = ctx.loadingText;
 					ctx.animation = 'start';
 				}, 400 );
 
-				yield navigate( ref.href );
+				const { actions } = yield import(
+					'@wordpress/interactivity-router'
+				);
+				yield actions.navigate( ref.href );
 
 				// Dismiss loading message if it hasn't been added yet.
 				clearTimeout( timeout );
@@ -68,16 +62,19 @@ store( 'core/query', {
 				ctx.url = ref.href;
 
 				// Focus the first anchor of the Query block.
-				const firstAnchor = `[data-wp-navigation-id=${ id }] .wp-block-post-template a[href]`;
-				document.querySelector( firstAnchor )?.focus();
+				const firstAnchor = `.wp-block-post-template a[href]`;
+				queryRef.querySelector( firstAnchor )?.focus();
 			}
 		},
 		*prefetch() {
+			const { queryRef } = getContext();
 			const { ref } = getElement();
-			const isDisabled = ref.closest( '[data-wp-navigation-id]' )?.dataset
-				.wpNavigationDisabled;
+			const isDisabled = queryRef?.dataset.wpNavigationDisabled;
 			if ( isValidLink( ref ) && ! isDisabled ) {
-				yield prefetch( ref.href );
+				const { actions } = yield import(
+					'@wordpress/interactivity-router'
+				);
+				yield actions.prefetch( ref.href );
 			}
 		},
 	},
@@ -86,8 +83,16 @@ store( 'core/query', {
 			const { url } = getContext();
 			const { ref } = getElement();
 			if ( url && isValidLink( ref ) ) {
-				yield prefetch( ref.href );
+				const { actions } = yield import(
+					'@wordpress/interactivity-router'
+				);
+				yield actions.prefetch( ref.href );
 			}
 		},
+		setQueryRef() {
+			const ctx = getContext();
+			const { ref } = getElement();
+			ctx.queryRef = ref;
+		},
 	},
 } );

package/src/search/block.json

@@ -87,7 +87,6 @@
 		},
 		"html": false
 	},
-	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-search-editor",
 	"style": "wp-block-search"
 }