Add search block (#13583)

* Adding search widget block

Co-authored-by: Rachel Cherry <bamadesigner@gmail.com>

* 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.

* s/Placeholder text/Placeholder Text/

Co-Authored-By: noisysocks <robert@noisysocks.com>

* Remove superfluous 'your'

Co-Authored-By: noisysocks <robert@noisysocks.com>

* Search: Add button and inline placeholder editing

* Update CHANGELOG

* Search block: Support custom CSS classes

* Search block: Add aria-label to placeholder <input>

* Search block: Style label as bold in theme.scss

* Search block: Add aria-label to all inputs

* Search block: Use ellipsis at end of input placeholders

* Search block: Display placeholder in 'placeholder' attribute, not 'value'

* Revert "Search block: Display placeholder in 'placeholder' attribute, not 'value'"

This reverts commit 154cddc.

* Search block: Remove placeholder attribute when there is a placeholder value

* Search block: Fix placeholder attribute receiving false instead of undefined

lib/load.php

@@ -49,3 +49,6 @@
 if ( ! function_exists( 'render_block_core_shortcode' ) ) {
 	require dirname( __FILE__ ) . '/../packages/block-library/src/shortcode/index.php';
 }
+if ( ! function_exists( 'render_block_core_search' ) ) {
+	require dirname( __FILE__ ) . '/../packages/block-library/src/search/index.php';
+}

packages/block-library/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Add background color controls for the table block.
 - Add new `RSS` block ([#7966](https://github.com/WordPress/gutenberg/pull/7966)).
+- Add new `Search` block ([#13583](https://github.com/WordPress/gutenberg/pull/13583)).
 
 ## 2.2.12 (2019-01-03)
 

packages/block-library/src/editor.scss

@@ -23,6 +23,7 @@
 @import "./pullquote/editor.scss";
 @import "./quote/editor.scss";
 @import "./rss/editor.scss";
+@import "./search/editor.scss";
 @import "./shortcode/editor.scss";
 @import "./spacer/editor.scss";
 @import "./subhead/editor.scss";

packages/block-library/src/index.js

@@ -39,6 +39,7 @@ import * as preformatted from './preformatted';
 import * as pullquote from './pullquote';
 import * as reusableBlock from './block';
 import * as rss from './rss';
+import * as search from './search';
 import * as separator from './separator';
 import * as shortcode from './shortcode';
 import * as spacer from './spacer';
@@ -87,6 +88,7 @@ export const registerCoreBlocks = () => {
 		preformatted,
 		pullquote,
 		rss,
+		search,
 		separator,
 		reusableBlock,
 		spacer,

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

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+
+export default function SearchEdit( { className, attributes, setAttributes } ) {
+	const { label, placeholder, buttonText } = attributes;
+
+	return (
+		<div className={ className }>
+			<RichText
+				wrapperClassName="wp-block-search__label"
+				aria-label={ __( 'Label text' ) }
+				placeholder={ __( 'Add label…' ) }
+				keepPlaceholderOnFocus
+				formattingControls={ [] }
+				value={ label }
+				onChange={ ( html ) => setAttributes( { label: html } ) }
+			/>
+			<input
+				className="wp-block-search__input"
+				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 } ) }
+			/>
+			<RichText
+				wrapperClassName="wp-block-search__button"
+				className="wp-block-search__button-rich-text"
+				aria-label={ __( 'Button text' ) }
+				placeholder={ __( 'Add button text…' ) }
+				keepPlaceholderOnFocus
+				formattingControls={ [] }
+				value={ buttonText }
+				onChange={ ( html ) => setAttributes( { buttonText: html } ) }
+			/>
+		</div>
+	);
+}

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

@@ -0,0 +1,26 @@
+.wp-block-search {
+	.wp-block-search__input {
+		border-radius: $radius-round-rectangle;
+		border: 1px solid $dark-gray-150;
+		color: $dark-opacity-300;
+		font-family: $default-font;
+		font-size: $default-font-size;
+
+		&:focus {
+			outline: none;
+		}
+	}
+
+	.wp-block-search__button {
+		background: #f7f7f7;
+		border-radius: $radius-round-rectangle;
+		border: 1px solid #ccc;
+		box-shadow: inset 0 -1px 0 #ccc;
+		font-family: $default-font;
+		font-size: $default-font-size;
+
+		.wp-block-search__button-rich-text {
+			padding: 6px 10px;
+		}
+	}
+}

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

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+
+export const name = 'core/search';
+
+export const settings = {
+	title: __( 'Search' ),
+
+	description: __( 'Help visitors find your content.' ),
+
+	icon: 'search',
+
+	category: 'widgets',
+
+	keywords: [ __( 'find' ) ],
+
+	edit,
+
+	save() {
+		return null;
+	},
+};

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

@@ -0,0 +1,82 @@
+<?php
+/**
+ * Server-side rendering of the `core/search` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Dynamically renders the `core/search` block.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string The search block markup.
+ */
+function render_block_core_search( $attributes ) {
+	static $instance_id = 0;
+
+	$input_id = 'wp-block-search__input-' . ++$instance_id;
+
+	if ( ! empty( $attributes['label'] ) ) {
+		$label_markup = sprintf(
+			'<label for="%s" class="wp-block-search__label">%s</label>',
+			$input_id,
+			$attributes['label']
+		);
+	}
+
+	$input_markup = sprintf(
+		'<input type="search" id="%s" class="wp-block-search__input" name="s" value="%s" placeholder="%s" />',
+		$input_id,
+		esc_attr( get_search_query() ),
+		esc_attr( $attributes['placeholder'] )
+	);
+
+	if ( ! empty( $attributes['buttonText'] ) ) {
+		$button_markup = sprintf(
+			'<button type="submit" class="wp-block-search__button">%s</button>',
+			$attributes['buttonText']
+		);
+	}
+
+	$class = 'wp-block-search';
+	if ( isset( $attributes['className'] ) ) {
+		$class .= ' ' . $attributes['className'];
+	}
+
+	return sprintf(
+		'<form class="%s" role="search" method="get" action="%s">%s</form>',
+		$class,
+		esc_url( home_url( '/' ) ),
+		$label_markup . $input_markup . $button_markup
+	);
+}
+
+/**
+ * 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' => '',
+				),
+				'buttonText'  => array(
+					'type'    => 'string',
+					'default' => __( 'Search' ),
+				),
+			),
+
+			'render_callback' => 'render_block_core_search',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_search' );

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

@@ -0,0 +1,16 @@
+.wp-block-search {
+	display: flex;
+	flex-wrap: wrap;
+
+	.wp-block-search__label {
+		width: 100%;
+	}
+
+	.wp-block-search__input {
+		flex-grow: 1;
+	}
+
+	.wp-block-search__button {
+		margin-left: 10px;
+	}
+}

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

@@ -0,0 +1,5 @@
+.wp-block-search {
+	.wp-block-search__label {
+		font-weight: bold;
+	}
+}

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

packages/block-library/src/theme.scss

@@ -2,5 +2,6 @@
 @import "./preformatted/theme.scss";
 @import "./pullquote/theme.scss";
 @import "./quote/theme.scss";
+@import "./search/theme.scss";
 @import "./separator/theme.scss";
 @import "./table/theme.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","buttonText":"Custom button text"} /-->

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,22 @@
+[
+    {
+        "blockName": "core/search",
+        "attrs": {
+            "buttonText": "Custom button text",
+            "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 /-->