Query and Search blocks: support for Instant Search

lib/experiments-page.php

@@ -187,6 +187,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',
+		)
+	);
+
 	add_settings_field(
 		'gutenberg-editor-write-mode',
 		__( 'Editor write mode', 'gutenberg' ),

packages/block-library/src/post-template/index.php

@@ -50,6 +50,19 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 	$page_key            = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
 	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
 	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$search_query_direct = '';
+
+	// Get the search query parameter for the specific query if it exists.
+	if ( isset( $block->context['queryId'] ) ) {
+		$search_param = 'instant-search-' . $block->context['queryId'];
+		if ( ! empty( $_GET[ $search_param ] ) ) {
+			$search_query_direct = sanitize_text_field( $_GET[ $search_param ] );
+		}
+	}
+
+	// Check if the Instant Search experiment is enabled.
+	$gutenberg_experiments  = get_option( 'gutenberg-experiments' );
+	$instant_search_enabled = isset( $gutenberg_experiments['gutenberg-search-query-block'] ) && $gutenberg_experiments['gutenberg-search-query-block'];
 
 	// Use global query if needed.
 	$use_global_query = ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] );
@@ -69,7 +82,13 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 		}
 	} else {
 		$query_args = build_query_vars_from_query_block( $block, $page );
-		$query      = new WP_Query( $query_args );
+
+		// Add search parameter if enhanced pagination is on and search query exists
+		if ( $enhanced_pagination && $instant_search_enabled && ! empty( $search_query_direct ) ) {
+			$query_args['s'] = $search_query_direct;
+		}
+
+		$query = new WP_Query( $query_args );
 	}
 
 	if ( ! $query->have_posts() ) {

packages/block-library/src/query-no-results/block.json

@@ -7,7 +7,7 @@
 	"description": "Contains the block elements used to render content when no query results are found.",
 	"parent": [ "core/query" ],
 	"textdomain": "default",
-	"usesContext": [ "queryId", "query" ],
+	"usesContext": [ "queryId", "query", "enhancedPagination" ],
 	"example": {
 		"innerBlocks": [
 			{

packages/block-library/src/query-no-results/index.php

@@ -23,8 +23,22 @@ function render_block_core_query_no_results( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
-	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$page_key            = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
+	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+
+	// Add check for instant search experiment and search query
+	$gutenberg_experiments  = get_option( 'gutenberg-experiments' );
+	$instant_search_enabled = isset( $gutenberg_experiments['gutenberg-search-query-block'] ) && $gutenberg_experiments['gutenberg-search-query-block'];
+	$search_query_direct    = '';
+
+	// Get the search query parameter for the specific query if it exists
+	if ( isset( $block->context['queryId'] ) ) {
+		$search_param = 'instant-search-' . $block->context['queryId'];
+		if ( ! empty( $_GET[ $search_param ] ) ) {
+			$search_query_direct = sanitize_text_field( $_GET[ $search_param ] );
+		}
+	}
 
 	// Override the custom query with the global query if needed.
 	$use_global_query = ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] );
@@ -33,7 +47,13 @@ function render_block_core_query_no_results( $attributes, $content, $block ) {
 		$query = $wp_query;
 	} else {
 		$query_args = build_query_vars_from_query_block( $block, $page );
-		$query      = new WP_Query( $query_args );
+
+		// Add search parameter if instant search is enabled and search query exists
+		if ( $enhanced_pagination && $instant_search_enabled && ! empty( $search_query_direct ) ) {
+			$query_args['s'] = $search_query_direct;
+		}
+
+		$query = new WP_Query( $query_args );
 	}
 
 	if ( $query->post_count > 0 ) {

packages/block-library/src/query-pagination-next/index.php

@@ -24,6 +24,16 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
 	$max_page            = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
 
+	// Add check for instant search experiment and search query
+	$gutenberg_experiments  = get_option( 'gutenberg-experiments' );
+	$instant_search_enabled = isset( $gutenberg_experiments['gutenberg-search-query-block'] ) && $gutenberg_experiments['gutenberg-search-query-block'];
+
+	$search_query_direct = '';
+	if ( isset( $block->context['queryId'] ) ) {
+		$search_param        = 'instant-search-' . $block->context['queryId'];
+		$search_query_direct = empty( $_GET[ $search_param ] ) ? '' : sanitize_text_field( $_GET[ $search_param ] );
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$show_label         = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
 	$default_label      = __( 'Next Page' );
@@ -54,7 +64,17 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 		$content = get_next_posts_link( $label, $max_page );
 		remove_filter( 'next_posts_link_attributes', $filter_link_attributes );
 	} elseif ( ! $max_page || $max_page > $page ) {
-		$custom_query           = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
+		// Add check for instant search experiment and search query
+		if ( $enhanced_pagination && $instant_search_enabled && ! empty( $search_query_direct ) ) {
+			$args         = array_merge(
+				build_query_vars_from_query_block( $block, $page ),
+				array( 's' => $search_query_direct )
+			);
+			$custom_query = new WP_Query( $args );
+		} else {
+			$custom_query = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
+		}
+
 		$custom_query_max_pages = (int) $custom_query->max_num_pages;
 		if ( $custom_query_max_pages && $custom_query_max_pages !== $page ) {
 			$content = sprintf(

packages/block-library/src/query-pagination-numbers/index.php

@@ -24,6 +24,19 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
 	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
 	$max_page            = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
 
+	// Add check for instant search experiment and search query
+	$gutenberg_experiments  = get_option( 'gutenberg-experiments' );
+	$instant_search_enabled = isset( $gutenberg_experiments['gutenberg-search-query-block'] ) && $gutenberg_experiments['gutenberg-search-query-block'];
+
+	// Get the search query parameter for the specific query if it exists.
+	$search_query_direct = '';
+	if ( isset( $block->context['queryId'] ) ) {
+		$search_param = 'instant-search-' . $block->context['queryId'];
+		if ( ! empty( $_GET[ $search_param ] ) ) {
+			$search_query_direct = sanitize_text_field( $_GET[ $search_param ] );
+		}
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$content            = '';
 	global $wp_query;
@@ -41,7 +54,17 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
 		}
 		$content = paginate_links( $paginate_args );
 	} else {
-		$block_query = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
+		// Add check for instant search experiment and search query
+		// If instant search is enabled and we have a search query, run a new query
+		if ( $enhanced_pagination && $instant_search_enabled && ! empty( $search_query_direct ) ) {
+			$args        = array_merge(
+				build_query_vars_from_query_block( $block, $page ),
+				array( 's' => $search_query_direct )
+			);
+			$block_query = new WP_Query( $args );
+		} else {
+			$block_query = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
+		}
 		// `paginate_links` works with the global $wp_query, so we have to
 		// temporarily switch it with our custom query.
 		$prev_wp_query = $wp_query;

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>
 	);