Search Block - ability to specify additional search query vars

docs/reference-guides/core-blocks.md

@@ -708,7 +708,7 @@ Help visitors find your content. ([Source](https://github.com/WordPress/gutenber
 -	**Name:** core/search
 -	**Category:** widgets
 -	**Supports:** align (center, left, right), color (background, gradients, text), ~~html~~
--	**Attributes:** buttonPosition, buttonText, buttonUseIcon, label, placeholder, showLabel, width, widthUnit
+-	**Attributes:** buttonPosition, buttonText, buttonUseIcon, label, placeholder, query, showLabel, width, widthUnit
 
 ## Separator
 

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

@@ -38,6 +38,10 @@
 		"buttonUseIcon": {
 			"type": "boolean",
 			"default": false
+		},
+		"query": {
+			"type": "object",
+			"default": {}
 		}
 	},
 	"supports": {

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

@@ -216,22 +216,24 @@ export default function SearchEdit( {
 			: borderProps.style;
 
 		return (
-			<input
-				type="search"
-				className={ textFieldClasses }
-				style={ textFieldStyles }
-				aria-label={ __( 'Optional placeholder text' ) }
-				// We hide the placeholder field's placeholder when there is a value. This
-				// stops screen readers from reading the placeholder field's placeholder
-				// which is confusing.
-				placeholder={
-					placeholder ? undefined : __( 'Optional placeholder…' )
-				}
-				value={ placeholder }
-				onChange={ ( event ) =>
-					setAttributes( { placeholder: event.target.value } )
-				}
-			/>
+			<>
+				<input
+					type="search"
+					className={ textFieldClasses }
+					style={ textFieldStyles }
+					aria-label={ __( 'Optional placeholder text' ) }
+					// We hide the placeholder field's placeholder when there is a value. This
+					// stops screen readers from reading the placeholder field's placeholder
+					// which is confusing.
+					placeholder={
+						placeholder ? undefined : __( 'Optional placeholder…' )
+					}
+					value={ placeholder }
+					onChange={ ( event ) =>
+						setAttributes( { placeholder: event.target.value } )
+					}
+				/>
+			</>
 		);
 	};
 

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

@@ -27,17 +27,19 @@ function render_block_core_search( $attributes ) {
 		)
 	);
 
-	$input_id         = 'wp-block-search__input-' . ++$instance_id;
-	$classnames       = classnames_for_block_core_search( $attributes );
-	$show_label       = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
-	$use_icon_button  = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
-	$show_input       = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
-	$show_button      = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
-	$input_markup     = '';
-	$button_markup    = '';
-	$inline_styles    = styles_for_block_core_search( $attributes );
-	$color_classes    = get_color_classes_for_block_core_search( $attributes );
-	$is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
+	$input_id            = 'wp-block-search__input-' . ++$instance_id;
+	$classnames          = classnames_for_block_core_search( $attributes );
+	$show_label          = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
+	$use_icon_button     = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
+	$show_input          = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
+	$show_button         = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
+	$query_params        = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array();
+	$input_markup        = '';
+	$button_markup       = '';
+	$query_params_markup = '';
+	$inline_styles       = styles_for_block_core_search( $attributes );
+	$color_classes       = get_color_classes_for_block_core_search( $attributes );
+	$is_button_inside    = ! empty( $attributes['buttonPosition'] ) &&
 		'button-inside' === $attributes['buttonPosition'];
 	// Border color classes need to be applied to the elements that have a border color.
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
@@ -69,6 +71,16 @@ function render_block_core_search( $attributes ) {
 		);
 	}
 
+	if ( count( $query_params ) > 0 ) {
+		foreach ( $query_params as $param => $value ) {
+			$query_params_markup .= sprintf(
+				'<input type="hidden" name="%s" value="%s" />',
+				esc_attr( $param ),
+				esc_attr( $value )
+			);
+		}
+	}
+
 	if ( $show_button ) {
 		$button_internal_markup = '';
 		$button_classes         = $color_classes;
@@ -105,7 +117,7 @@ function render_block_core_search( $attributes ) {
 		'<div class="wp-block-search__inside-wrapper %s" %s>%s</div>',
 		esc_attr( $field_markup_classes ),
 		$inline_styles['wrapper'],
-		$input_markup . $button_markup
+		$input_markup . $query_params_markup . $button_markup
 	);
 	$wrapper_attributes   = get_block_wrapper_attributes( array( 'class' => $classnames ) );
 

test/integration/fixtures/blocks/core__search.json

@@ -6,7 +6,8 @@
 			"showLabel": true,
 			"placeholder": "",
 			"buttonPosition": "button-outside",
-			"buttonUseIcon": false
+			"buttonUseIcon": false,
+			"query": {}
 		},
 		"innerBlocks": []
 	}

test/integration/fixtures/blocks/core__search__custom-text.json

@@ -8,7 +8,8 @@
 			"placeholder": "Custom placeholder",
 			"buttonText": "Custom button text",
 			"buttonPosition": "button-outside",
-			"buttonUseIcon": false
+			"buttonUseIcon": false,
+			"query": {}
 		},
 		"innerBlocks": []
 	}