Search block: Move away from legacy get_search_form() markup

Changes the Search block to render its own search form markup, instead
of the same markup that get_search_form() renders. This lets us fully
match the design spec.

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

@@ -1,86 +1,40 @@
 /**
  * WordPress dependencies
  */
-import { Component, Fragment } from '@wordpress/element';
-import { InspectorControls } from '@wordpress/editor';
-import { TextControl } from '@wordpress/components';
+import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
-export default class SearchEdit extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.updateLabel = this.updateLabel.bind( this );
-		this.updatePlaceholder = this.updatePlaceholder.bind( this );
-		this.updateSubmitValue = this.updateSubmitValue.bind( this );
-		this.handleFormSubmit = this.handleFormSubmit.bind( this );
-	}
-
-	updateLabel( newLabel ) {
-		this.props.setAttributes( { label: newLabel } );
-	}
-
-	updatePlaceholder( newPlaceholder ) {
-		this.props.setAttributes( { placeholder: newPlaceholder } );
-	}
-
-	updateSubmitValue( newValue ) {
-		this.props.setAttributes( { submitValue: newValue } );
-	}
-
-	handleFormSubmit( event ) {
-		event.preventDefault();
-		return false;
-	}
-
-	render() {
-		const { attributes, focus } = this.props;
-
-		const { label, placeholder, submitValue } = attributes;
-
-		return (
-			<Fragment>
-				<form
-					role="search"
-					method="get"
-					className="search-form"
-					onSubmit={ this.handleFormSubmit }
-				>
-					<label>
-						<span className="search-label">{ label }</span>
-						<input
-							type="search"
-							className="search-field"
-							placeholder={ placeholder }
-							value=""
-							name="s"
-						/>
-					</label>
-					<input type="submit" className="search-submit" value={ submitValue } />
-				</form>
-				{ focus && (
-					<InspectorControls key="inspector">
-						<TextControl
-							label={ __( 'Search label' ) }
-							value={ label }
-							onChange={ this.updateLabel }
-							help={ __( 'Provides a label for the search field.' ) }
-						/>
-						<TextControl
-							label={ __( 'Placeholder text' ) }
-							value={ placeholder }
-							onChange={ this.updatePlaceholder }
-							help={ __( 'Provides placeholder text for the search field.' ) }
-						/>
-						<TextControl
-							label={ __( 'Submit text' ) }
-							value={ submitValue }
-							onChange={ this.updateSubmitValue }
-							help={ __( 'The text for the form submit button.' ) }
-						/>
-					</InspectorControls>
-				) }
-			</Fragment>
-		);
-	}
+import { RichText, InspectorControls } from '@wordpress/editor';
+import { PanelBody, TextControl } from '@wordpress/components';
+
+export default function SearchEdit( { attributes, setAttributes } ) {
+	const { label, placeholder } = attributes;
+
+	return (
+		<Fragment>
+			<div className="wp-block-search">
+				<RichText
+					tagName="div"
+					className="wp-block-search__label"
+					value={ label }
+					formattingControls={ [] }
+					onChange={ ( text ) => setAttributes( { label: text } ) }
+				/>
+				<input
+					type="search"
+					className="wp-block-search__input"
+					value=""
+					placeholder={ placeholder }
+				/>
+			</div>
+			<InspectorControls>
+				<PanelBody title={ __( 'Search Settings' ) }>
+					<TextControl
+						label={ __( 'Placeholder text' ) }
+						value={ placeholder }
+						onChange={ ( text ) => setAttributes( { placeholder: text } ) }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		</Fragment>
+	);
 }

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

@@ -13,7 +13,7 @@ export const name = 'core/search';
 export const settings = {
 	title: __( 'Search' ),
 
-	description: __( 'A search form for your site.' ),
+	description: __( 'Help your visitors find your content.' ),
 
 	icon: 'search',
 

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

@@ -6,78 +6,53 @@
  */
 
 /**
- * Renders the `core/search` block on server.
+ * Dynamically renders the `core/search` block.
  *
- * Copied from get_search_form() because the core
- * search form function doesn't allow to change markup (yet).
-
  * @param array $attributes The block attributes.
  *
- * @return string Returns the search form markup.
+ * @return string The search block markup.
  */
 function render_block_core_search( $attributes ) {
-
-	$search_form_template = locate_template( 'searchform.php' );
-	if ( '' != $search_form_template ) {
-		ob_start();
-		require( $search_form_template );
-		$form = ob_get_clean();
-	} else {
-
-		$defaults = array(
-			'label'       => _x( 'Search for:', 'label', 'gutenberg' ),
-			'placeholder' => esc_attr_x( 'Search …', 'placeholder', 'gutenberg' ),
-			'submitValue' => esc_attr_x( 'Search', 'submit button', 'gutenberg' ),
-		);
-
-		$args = wp_parse_args( $attributes, $defaults );
-
-		/**
-		 * Filters the arguments used for the search form.
-		 *
-		 * @since x.x.x
-		 *
-		 * @param array $args The search form markup arguments.
-		 */
-		$args = apply_filters( 'get_search_form_args', $args );
-
-		$form = '<form role="search" method="get" class="search-form" action="' . esc_url( home_url( '/' ) ) . '">
-			<label>
-				<span class="screen-reader-text">' . $args['label'] . '</span>
-				<input type="search" class="search-field" placeholder="' . esc_attr( $args['placeholder'] ) . '" value="' . get_search_query() . '" name="s" />
-			</label>
-			<input type="submit" class="search-submit" value="' . esc_attr( $args['submitValue'] ) . '" />
-		</form>';
-	}
-
-	/** This filter is documented in wp-includes/general-template.php */
-	$result = apply_filters( 'get_search_form', $form );
-
-	if ( null === $result ) {
-		$result = $form;
-	}
-
-	return $form;
+	static $instance_id = 0;
+
+	$html = '
+		<form role="search" method="get" class="wp-block-search" action="%1$s">
+			<label for="%2$s" class="wp-block-search__label">%3$s</label>
+			<input id="%2$s" type="search" class="wp-block-search__input" placeholder="%4$s" value="%5$s" name="s" />
+		</form>
+	';
+
+	return sprintf(
+		$html,
+		esc_url( home_url( '/' ) ),
+		'wp-block-search__input-' . ++$instance_id,
+		esc_html( $attributes['label'] ),
+		esc_attr( $attributes['placeholder'] ),
+		esc_attr( get_search_query() )
+	);
 }
 
-register_block_type(
-	'core/search',
-	array(
-		'attributes'      => array(
-			'label'       => array(
-				'type'    => 'string',
-				'default' => _x( 'Search for:', 'label', 'gutenberg' ),
-			),
-			'placeholder' => array(
-				'type'    => 'string',
-				'default' => esc_attr_x( 'Search &hellip;', 'placeholder', 'gutenberg' ),
-			),
-			'submitValue' => array(
-				'type'    => 'string',
-				'default' => esc_attr_x( 'Search', 'submit button', 'gutenberg' ),
+/**
+ * Registers the `core/search` block on the server.
+ */
+function register_block_core_search() {
+	register_block_type(
+		'core/search',
+		array(
+			'attributes'      => array(
+				'label'       => array(
+					'type'    => 'string',
+					'default' => __( 'Search' ),
+				),
+				'placeholder' => array(
+					'type'    => 'string',
+					'default' => __( 'Enter a search keyword or phrase' ),
+				),
 			),
-		),
 
-		'render_callback' => 'render_block_core_search',
-	)
-);
+			'render_callback' => 'render_block_core_search',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_search' );

packages/block-library/src/search/style.scss

@@ -0,0 +1,10 @@
+.wp-block-search {
+	.wp-block-search__label {
+		display: block;
+		font-weight: bold;
+	}
+
+	.wp-block-search__input {
+		width: 100%;
+	}
+}

packages/block-library/src/style.scss

@@ -16,6 +16,7 @@
 @import "./pullquote/style.scss";
 @import "./quote/style.scss";
 @import "./rss/style.scss";
+@import "./search/style.scss";
 @import "./separator/style.scss";
 @import "./subhead/style.scss";
 @import "./table/style.scss";

test/integration/full-content/fixtures/core__search.html

@@ -0,0 +1 @@
+<!-- wp:search /-->

test/integration/full-content/fixtures/core__search.json

@@ -0,0 +1,10 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/search",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

test/integration/full-content/fixtures/core__search.parsed.json

@@ -0,0 +1,18 @@
+[
+    {
+        "blockName": "core/search",
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "",
+        "innerContent": []
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

test/integration/full-content/fixtures/core__search.serialized.html

@@ -0,0 +1 @@
+<!-- wp:search /-->

test/integration/full-content/fixtures/core__search__custom-text.html

@@ -0,0 +1 @@
+<!-- wp:search {"label":"Custom label","placeholder":"Custom placeholder"} /-->

test/integration/full-content/fixtures/core__search__custom-text.json

@@ -0,0 +1,10 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/search",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

test/integration/full-content/fixtures/core__search__custom-text.parsed.json

@@ -0,0 +1,21 @@
+[
+    {
+        "blockName": "core/search",
+        "attrs": {
+            "label": "Custom label",
+            "placeholder": "Custom placeholder"
+        },
+        "innerBlocks": [],
+        "innerHTML": "",
+        "innerContent": []
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

test/integration/full-content/fixtures/core__search__custom-text.serialized.html

@@ -0,0 +1 @@
+<!-- wp:search /-->