Query and Search blocks: support for Instant Search via query_loop_block_query_vars filter

lib/experimental/blocks.php

@@ -136,3 +136,36 @@ function gutenberg_block_core_form_view_script_module( $data ) {
 	'script_module_data_@wordpress/block-library/form/view',
 	'gutenberg_block_core_form_view_script_module'
 );
+
+/**
+ * Passes the search query param to Query Loop blocks, if the instant search experiment is enabled.
+ *
+ * @param array     $query The query variables.
+ * @param WP_Block  $block Block instance.
+ * @return array Modified query variables.
+ */
+function gutenberg_block_core_query_add_url_filtering( $query, $block ) {
+	// Check if the instant search gutenberg experiment is enabled
+	$gutenberg_experiments  = get_option( 'gutenberg-experiments' );
+	$instant_search_enabled = $gutenberg_experiments && array_key_exists( 'gutenberg-search-query-block', $gutenberg_experiments );
+	if ( ! $instant_search_enabled ) {
+		return $query;
+	}
+
+	// Make sure block has a queryId
+	if ( empty( $block->context['queryId'] ) ) {
+		return $query;
+	}
+
+	// Get the search key from the URL
+	$search_key = 'instant-search-' . $block->context['queryId'];
+	if ( ! isset( $_GET[ $search_key ] ) ) {
+		return $query;
+	}
+
+	// Add the search parameter to the query
+	$query['s'] = sanitize_text_field( $_GET[ $search_key ] );
+
+	return $query;
+}
+add_filter( 'query_loop_block_query_vars', 'gutenberg_block_core_query_add_url_filtering', 10, 2 );

lib/experimental/editor-settings.php

@@ -25,6 +25,12 @@ function gutenberg_enable_experiments() {
 	if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
 		wp_add_inline_script( 'wp-block-library', 'window.__experimentalDisableTinymce = true', 'before' );
 	}
+	if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
+		wp_add_inline_script( 'wp-block-library', 'window.__experimentalFullPageClientSideNavigation = true', 'before' );
+	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-search-query-block', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableSearchQueryBlock = true', 'before' );
+	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-comment', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockComment = true', 'before' );
 	}

lib/experiments-page.php

@@ -211,6 +211,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-search-query-block',
+		__( 'Instant Search and Query Block', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable instant search functionality of the Search + Query blocks.', 'gutenberg' ),
+			'id'    => 'gutenberg-search-query-block',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

packages/block-editor/src/components/block-title/use-block-display-title.js

@@ -51,7 +51,12 @@ export default function useBlockDisplayTitle( {
 			}
 
 			const attributes = getBlockAttributes( clientId );
-			const label = getBlockLabel( blockType, attributes, context );
+			const label = getBlockLabel(
+				blockType,
+				attributes,
+				context,
+				clientId
+			);
 			// If the label is defined we prioritize it over a possible block variation title match.
 			if ( label !== blockType.title ) {
 				return label;

packages/block-library/src/search/block.json

@@ -48,6 +48,7 @@
 			"default": false
 		}
 	},
+	"usesContext": [ "enhancedPagination", "query", "queryId" ],
 	"supports": {
 		"align": [ "left", "center", "right" ],
 		"color": {

packages/block-library/src/search/edit.js

@@ -59,6 +59,7 @@ export default function SearchEdit( {
 	toggleSelection,
 	isSelected,
 	clientId,
+	context,
 } ) {
 	const {
 		label,
@@ -74,6 +75,13 @@ export default function SearchEdit( {
 		style,
 	} = attributes;
 
+	// Check if the block is inside a Query block with enhanced pagination enabled
+	// and if the `__experimentalEnableSearchQueryBlock` flag is enabled.
+	const hasInstantSearch = !! (
+		context?.enhancedPagination &&
+		window?.__experimentalEnableSearchQueryBlock
+	);
+
 	const wasJustInsertedIntoNavigationBlock = useSelect(
 		( select ) => {
 			const { getBlockParentsByBlockName, wasBlockJustInserted } =
@@ -377,54 +385,60 @@ export default function SearchEdit( {
 							}
 						/>
 					</ToolsPanelItem>
-					<ToolsPanelItem
-						hasValue={ () => buttonPosition !== 'button-outside' }
-						label={ __( 'Button position' ) }
-						onDeselect={ () => {
-							setAttributes( {
-								buttonPosition: 'button-outside',
-								isSearchFieldHidden: false,
-							} );
-						} }
-						isShownByDefault
-					>
-						<SelectControl
-							value={ buttonPosition }
-							__next40pxDefaultSize
-							__nextHasNoMarginBottom
-							label={ __( 'Button position' ) }
-							onChange={ ( value ) => {
-								setAttributes( {
-									buttonPosition: value,
-									isSearchFieldHidden:
-										value === 'button-only',
-								} );
-							} }
-							options={ buttonPositionControls }
-						/>
-					</ToolsPanelItem>
-					{ buttonPosition !== 'no-button' && (
-						<ToolsPanelItem
-							hasValue={ () => !! buttonUseIcon }
-							label={ __( 'Use button with icon' ) }
-							onDeselect={ () => {
-								setAttributes( {
-									buttonUseIcon: false,
-								} );
-							} }
-							isShownByDefault
-						>
-							<ToggleControl
-								__nextHasNoMarginBottom
-								checked={ buttonUseIcon }
-								label={ __( 'Use button with icon' ) }
-								onChange={ ( value ) =>
-									setAttributes( {
-										buttonUseIcon: value,
-									} )
+					{ ! hasInstantSearch && (
+						<>
+							<ToolsPanelItem
+								hasValue={ () =>
+									buttonPosition !== 'button-outside'
 								}
-							/>
-						</ToolsPanelItem>
+								label={ __( 'Button position' ) }
+								onDeselect={ () => {
+									setAttributes( {
+										buttonPosition: 'button-outside',
+										isSearchFieldHidden: false,
+									} );
+								} }
+								isShownByDefault
+							>
+								<SelectControl
+									value={ buttonPosition }
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Button position' ) }
+									onChange={ ( value ) => {
+										setAttributes( {
+											buttonPosition: value,
+											isSearchFieldHidden:
+												value === 'button-only',
+										} );
+									} }
+									options={ buttonPositionControls }
+								/>
+							</ToolsPanelItem>
+							{ buttonPosition !== 'no-button' && (
+								<ToolsPanelItem
+									hasValue={ () => !! buttonUseIcon }
+									label={ __( 'Use button with icon' ) }
+									onDeselect={ () => {
+										setAttributes( {
+											buttonUseIcon: false,
+										} );
+									} }
+									isShownByDefault
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										checked={ buttonUseIcon }
+										label={ __( 'Use button with icon' ) }
+										onChange={ ( value ) =>
+											setAttributes( {
+												buttonUseIcon: value,
+											} )
+										}
+									/>
+								</ToolsPanelItem>
+							) }
+						</>
 					) }
 					<ToolsPanelItem
 						hasValue={ () => !! width }
@@ -641,16 +655,22 @@ export default function SearchEdit( {
 				} }
 				showHandle={ isSelected }
 			>
-				{ ( isButtonPositionInside ||
-					isButtonPositionOutside ||
-					hasOnlyButton ) && (
+				{ hasInstantSearch ? (
+					renderTextField()
+				) : (
 					<>
-						{ renderTextField() }
-						{ renderButton() }
+						{ ( isButtonPositionInside ||
+							isButtonPositionOutside ||
+							hasOnlyButton ) && (
+							<>
+								{ renderTextField() }
+								{ renderButton() }
+							</>
+						) }
+
+						{ hasNoButton && renderTextField() }
 					</>
 				) }
-
-				{ hasNoButton && renderTextField() }
 			</ResizableBox>
 		</div>
 	);

packages/block-library/src/search/index.js

@@ -1,8 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { search as icon } from '@wordpress/icons';
+import { select } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -18,6 +20,46 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	__experimentalLabel( attributes, { clientId, context } ) {
+		// Only show the label in list view.
+		if ( context !== 'list-view' ) {
+			return;
+		}
+
+		// Check if the block is inside a Query Loop block.
+		const queryLoopBlockIds = select(
+			blockEditorStore
+		).getBlockParentsByBlockName( clientId, 'core/query' );
+
+		const blockTitle = __( 'Search' );
+		const customName = attributes?.metadata?.name;
+
+		// If the block is not inside a Query Loop block, return the block label.
+		if ( ! queryLoopBlockIds.length ) {
+			return customName || blockTitle;
+		}
+
+		const queryLoopBlock = select( blockEditorStore ).getBlock(
+			queryLoopBlockIds[ 0 ]
+		);
+
+		// Check if the Query Loop block has enhanced pagination enabled and
+		// if the `__experimentalEnableSearchQueryBlock` flag is enabled.
+		const hasInstantSearch = !! (
+			queryLoopBlock?.attributes?.enhancedPagination &&
+			window?.__experimentalEnableSearchQueryBlock
+		);
+
+		if ( ! hasInstantSearch ) {
+			return customName || blockTitle;
+		}
+
+		return sprintf(
+			/* translators: %s: The block label */
+			__( '%s (Instant search enabled)' ),
+			customName || blockTitle
+		);
+	},
 	example: {
 		attributes: { buttonText: __( 'Search' ), label: __( 'Search' ) },
 		viewportWidth: 400,