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/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-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,26 @@ export default function SearchEdit( {
 		style,
 	} = attributes;
 
+	const isEnhancedPagination = context?.enhancedPagination;
+
+	useEffect( () => {
+		if ( isEnhancedPagination ) {
+			// Add the name to the metadata
+			setAttributes( { metadata: { name: 'Instant Search' } } );
+		} else {
+			// Remove the name from the metadata
+			const { name, ...metadata } = attributes.metadata || {};
+			setAttributes( { metadata } );
+		}
+
+		// We disable the exhaustive-deps warning because the effect should not depend
+		// on the attributes.metadata value. We only want to re-run the effect when the
+		// isEnhancedPagination value changes.
+
+		// eslint-disable-next-line react-compiler/react-compiler
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ isEnhancedPagination, setAttributes ] );
+
 	const wasJustInsertedIntoNavigationBlock = useSelect(
 		( select ) => {
 			const { getBlockParentsByBlockName, wasBlockJustInserted } =
@@ -385,24 +406,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
-							}
-						/>
+					{ ! isEnhancedPagination && (
+						<>
+							<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 +621,22 @@ export default function SearchEdit( {
 				} }
 				showHandle={ isSelected }
 			>
-				{ ( isButtonPositionInside ||
-					isButtonPositionOutside ||
-					hasOnlyButton ) && (
+				{ isEnhancedPagination ? (
+					renderTextField()
+				) : (
 					<>
-						{ renderTextField() }
-						{ renderButton() }
+						{ ( isButtonPositionInside ||
+							isButtonPositionOutside ||
+							hasOnlyButton ) && (
+							<>
+								{ renderTextField() }
+								{ renderButton() }
+							</>
+						) }
+
+						{ hasNoButton && renderTextField() }
 					</>
 				) }
-
-				{ hasNoButton && renderTextField() }
 			</ResizableBox>
 		</div>
 	);

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,16 @@ 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'] ) ) ? true : false;
+	$use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
+	$show_button     = true;
+	if ( isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'] ) {
+		$show_button = false;
+	} 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              = '';
@@ -48,6 +53,12 @@ function render_block_core_search( $attributes ) {
 	// This variable is a constant and its value is always false at this moment.
 	// It is defined this way because some values depend on it, in case it changes in the future.
 	$open_by_default = false;
+	// 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.
+	$gutenberg_experiments  = get_option( 'gutenberg-experiments' );
+	$instant_search_enabled = $gutenberg_experiments && array_key_exists( 'gutenberg-search-query-block', $gutenberg_experiments );
 
 	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
 	$label            = new WP_HTML_Tag_Processor( sprintf( '<label %1$s>%2$s</label>', $inline_styles['label'], $label_inner_html ) );
@@ -90,6 +101,21 @@ 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 ( $enhanced_pagination ) {
+			wp_enqueue_script_module( '@wordpress/block-library/search/view' );
+
+			if ( $instant_search_enabled ) {
+				$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 +189,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 || ( $enhanced_pagination && $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 ( $enhanced_pagination && $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( '/' ) ),