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

lib/experimental/blocks.php

@@ -118,6 +118,39 @@ function gutenberg_register_block_style( $block_name, $style_properties ) {
 	return $result;
 }
 
+/**
+ * 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 );
+
 /**
  * Additional data to expose to the view script module in the Form block.
  */

lib/experimental/editor-settings.php

@@ -28,6 +28,9 @@ function gutenberg_enable_experiments() {
 	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

@@ -199,6 +199,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

@@ -67,6 +67,7 @@ export default function SearchEdit( {
 	toggleSelection,
 	isSelected,
 	clientId,
+	context,
 } ) {
 	const {
 		label,
@@ -82,6 +83,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 } =
@@ -385,24 +393,28 @@ export default function SearchEdit( {
 						} }
 						className={ showLabel ? 'is-pressed' : undefined }
 					/>
-					<ToolbarDropdownMenu
-						icon={ getButtonPositionIcon() }
-						label={ __( 'Change button position' ) }
-						controls={ buttonPositionControls }
-					/>
-					{ ! hasNoButton && (
-						<ToolbarButton
-							title={ __( 'Use button with icon' ) }
-							icon={ buttonWithIcon }
-							onClick={ () => {
-								setAttributes( {
-									buttonUseIcon: ! buttonUseIcon,
-								} );
-							} }
-							className={
-								buttonUseIcon ? 'is-pressed' : undefined
-							}
-						/>
+					{ ! hasInstantSearch && (
+						<>
+							<ToolbarDropdownMenu
+								icon={ getButtonPositionIcon() }
+								label={ __( 'Change button position' ) }
+								controls={ buttonPositionControls }
+							/>
+							{ ! hasNoButton && (
+								<ToolbarButton
+									title={ __( 'Use button with icon' ) }
+									icon={ buttonWithIcon }
+									onClick={ () => {
+										setAttributes( {
+											buttonUseIcon: ! buttonUseIcon,
+										} );
+									} }
+									className={
+										buttonUseIcon ? 'is-pressed' : undefined
+									}
+								/>
+							) }
+						</>
 					) }
 				</ToolbarGroup>
 			</BlockControls>
@@ -596,16 +608,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,41 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	__experimentalLabel( attributes, { clientId } ) {
+		const { label } = attributes;
+		const customName = attributes?.metadata?.name;
+
+		// Check if the block is inside a Query Loop block.
+		const queryLoopBlockIds = select(
+			blockEditorStore
+		).getBlockParentsByBlockName( clientId, 'core/query' );
+
+		// If the block is not inside a Query Loop block, return the block label.
+		if ( ! queryLoopBlockIds.length ) {
+			return customName || label;
+		}
+
+		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 || label;
+		}
+
+		return sprintf(
+			/* translators: %s: The block label */
+			__( '%s (Instant search enabled)' ),
+			customName || label || 'Search'
+		);
+	},
 	example: {
 		attributes: { buttonText: __( 'Search' ), label: __( 'Search' ) },
 		viewportWidth: 400,

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

@@ -16,7 +16,7 @@
  *
  * @return string The search block markup.
  */
-function render_block_core_search( $attributes ) {
+function render_block_core_search( $attributes, $content, $block ) {
 	// Older versions of the Search block defaulted the label and buttonText
 	// attributes to `__( 'Search' )` meaning that many posts contain `<!--
 	// wp:search /-->`. Support these by defaulting an undefined label and
@@ -29,11 +29,26 @@ function render_block_core_search( $attributes ) {
 		)
 	);
 
-	$input_id            = wp_unique_id( 'wp-block-search__input-' );
-	$classnames          = classnames_for_block_core_search( $attributes );
-	$show_label          = ! empty( $attributes['showLabel'] );
-	$use_icon_button     = ! empty( $attributes['buttonUseIcon'] );
-	$show_button         = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
+	$input_id        = wp_unique_id( 'wp-block-search__input-' );
+	$classnames      = classnames_for_block_core_search( $attributes );
+	$show_label      = ! empty( $attributes['showLabel'] );
+	$use_icon_button = ! empty( $attributes['buttonUseIcon'] );
+
+	// Check if the block is using the enhanced pagination.
+	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
+
+	// Check if the block is using the instant search experiment, which requires the enhanced pagination.
+	$gutenberg_experiments  = get_option( 'gutenberg-experiments' );
+	$instant_search_enabled = $enhanced_pagination && $gutenberg_experiments && array_key_exists( 'gutenberg-search-query-block', $gutenberg_experiments );
+
+	$show_button = true;
+
+	if ( $instant_search_enabled ) {
+		$show_button = false;
+		// If the button position is no-button, ALSO hide the button.
+	} elseif ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) {
+		$show_button = false;
+	}
 	$button_position     = $show_button ? $attributes['buttonPosition'] : null;
 	$query_params        = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array();
 	$button              = '';
@@ -90,6 +105,19 @@ function render_block_core_search( $attributes ) {
 			$input->set_attribute( 'aria-hidden', 'true' );
 			$input->set_attribute( 'tabindex', '-1' );
 		}
+
+		// Instant search is only enabled when both are true:
+		// 1. The block is a child of a Query Loop block.
+		// 2. The Query Loop block has the enhanced pagination feature enabled.
+		//
+		// Instant search functionality does not make sense without enhanced pagination
+		// because we might have to paginate the results of the search too!
+		if ( $instant_search_enabled ) {
+			wp_enqueue_script_module( '@wordpress/block-library/search/view' );
+
+			$input->set_attribute( 'data-wp-bind--value', 'context.search' );
+			$input->set_attribute( 'data-wp-on-async--input', 'actions.updateSearch' );
+		}
 	}
 
 	if ( count( $query_params ) > 0 ) {
@@ -163,28 +191,52 @@ function render_block_core_search( $attributes ) {
 		array( 'class' => $classnames )
 	);
 	$form_directives      = '';
+	$form_context         = array();
 
 	// If it's interactive, add the directives.
+	if ( $is_expandable_searchfield || $instant_search_enabled ) {
+		$form_directives = 'data-wp-interactive="core/search"';
+	}
+
 	if ( $is_expandable_searchfield ) {
 		$aria_label_expanded  = __( 'Submit Search' );
 		$aria_label_collapsed = __( 'Expand search field' );
-		$form_context         = wp_interactivity_data_wp_context(
-			array(
-				'isSearchInputVisible' => $open_by_default,
-				'inputId'              => $input_id,
-				'ariaLabelExpanded'    => $aria_label_expanded,
-				'ariaLabelCollapsed'   => $aria_label_collapsed,
-			)
+		$form_context         = array(
+			'isSearchInputInitiallyVisible' => $open_by_default,
+			'inputId'                       => $input_id,
+			'ariaLabelExpanded'             => $aria_label_expanded,
+			'ariaLabelCollapsed'            => $aria_label_collapsed,
 		);
-		$form_directives      = '
-		 data-wp-interactive="core/search"
-		 ' . $form_context . '
+		$form_directives     .= '
 		 data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible"
 		 data-wp-on-async--keydown="actions.handleSearchKeydown"
 		 data-wp-on-async--focusout="actions.handleSearchFocusout"
 		';
 	}
 
+	if ( $instant_search_enabled && isset( $block->context['queryId'] ) ) {
+
+		$search = '';
+
+		// If the query is defined in the block context, use it
+		if ( isset( $block->context['query']['search'] ) && '' !== $block->context['query']['search'] ) {
+			$search = $block->context['query']['search'];
+		}
+
+		// If the query is defined in the URL, it overrides the block context value if defined
+		$search = empty( $_GET[ 'instant-search-' . $block->context['queryId'] ] ) ? $search : sanitize_text_field( $_GET[ 'instant-search-' . $block->context['queryId'] ] );
+
+		$form_context = array_merge(
+			$form_context,
+			array(
+				'search'  => $search,
+				'queryId' => $block->context['queryId'],
+			)
+		);
+	}
+
+	$form_directives .= wp_interactivity_data_wp_context( $form_context );
+
 	return sprintf(
 		'<form role="search" method="get" action="%1s" %2s %3s>%4s</form>',
 		esc_url( home_url( '/' ) ),