diff --git a/lib/load.php b/lib/load.php
index 2f8644ccf4636f..b3c81971a353f6 100644
--- a/lib/load.php
+++ b/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';
+}
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 12ab36c1f21047..427d55ba224123 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/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)
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 9fb94f40bdef7c..b5778d5b472ff9 100644
--- a/packages/block-library/src/editor.scss
+++ b/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";
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 5dd3fee7b2a29d..aac4e56fc7a8b5 100644
--- a/packages/block-library/src/index.js
+++ b/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,
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
new file mode 100644
index 00000000000000..f5a5acd20c4982
--- /dev/null
+++ b/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 (
+
+ setAttributes( { label: html } ) }
+ />
+ setAttributes( { placeholder: event.target.value } ) }
+ />
+ setAttributes( { buttonText: html } ) }
+ />
+
+ );
+}
diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss
new file mode 100644
index 00000000000000..cb5a489f180fb3
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/packages/block-library/src/search/index.js b/packages/block-library/src/search/index.js
new file mode 100644
index 00000000000000..0fcfa75722ff48
--- /dev/null
+++ b/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;
+ },
+};
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
new file mode 100644
index 00000000000000..ac7da463e92f2e
--- /dev/null
+++ b/packages/block-library/src/search/index.php
@@ -0,0 +1,82 @@
+%s',
+ $input_id,
+ $attributes['label']
+ );
+ }
+
+ $input_markup = sprintf(
+ '',
+ $input_id,
+ esc_attr( get_search_query() ),
+ esc_attr( $attributes['placeholder'] )
+ );
+
+ if ( ! empty( $attributes['buttonText'] ) ) {
+ $button_markup = sprintf(
+ '',
+ $attributes['buttonText']
+ );
+ }
+
+ $class = 'wp-block-search';
+ if ( isset( $attributes['className'] ) ) {
+ $class .= ' ' . $attributes['className'];
+ }
+
+ return sprintf(
+ '',
+ $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' );
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
new file mode 100644
index 00000000000000..80a8a20b5fd37a
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/packages/block-library/src/search/theme.scss b/packages/block-library/src/search/theme.scss
new file mode 100644
index 00000000000000..f95849183b5f6f
--- /dev/null
+++ b/packages/block-library/src/search/theme.scss
@@ -0,0 +1,5 @@
+.wp-block-search {
+ .wp-block-search__label {
+ font-weight: bold;
+ }
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 09d3a2125e378b..35168d85ab237d 100644
--- a/packages/block-library/src/style.scss
+++ b/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";
diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss
index 3dcef9d811ecb8..7a4dcce562f8ac 100644
--- a/packages/block-library/src/theme.scss
+++ b/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";
diff --git a/test/integration/full-content/fixtures/core__search.html b/test/integration/full-content/fixtures/core__search.html
new file mode 100644
index 00000000000000..f62e8a853c2eaa
--- /dev/null
+++ b/test/integration/full-content/fixtures/core__search.html
@@ -0,0 +1 @@
+
diff --git a/test/integration/full-content/fixtures/core__search.json b/test/integration/full-content/fixtures/core__search.json
new file mode 100644
index 00000000000000..e1397fdc9a37aa
--- /dev/null
+++ b/test/integration/full-content/fixtures/core__search.json
@@ -0,0 +1,10 @@
+[
+ {
+ "clientId": "_clientId_0",
+ "name": "core/search",
+ "isValid": true,
+ "attributes": {},
+ "innerBlocks": [],
+ "originalContent": ""
+ }
+]
diff --git a/test/integration/full-content/fixtures/core__search.parsed.json b/test/integration/full-content/fixtures/core__search.parsed.json
new file mode 100644
index 00000000000000..0dfea6eb47b8fb
--- /dev/null
+++ b/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"
+ ]
+ }
+]
diff --git a/test/integration/full-content/fixtures/core__search.serialized.html b/test/integration/full-content/fixtures/core__search.serialized.html
new file mode 100644
index 00000000000000..f62e8a853c2eaa
--- /dev/null
+++ b/test/integration/full-content/fixtures/core__search.serialized.html
@@ -0,0 +1 @@
+
diff --git a/test/integration/full-content/fixtures/core__search__custom-text.html b/test/integration/full-content/fixtures/core__search__custom-text.html
new file mode 100644
index 00000000000000..bb6e6a56c9a339
--- /dev/null
+++ b/test/integration/full-content/fixtures/core__search__custom-text.html
@@ -0,0 +1 @@
+
diff --git a/test/integration/full-content/fixtures/core__search__custom-text.json b/test/integration/full-content/fixtures/core__search__custom-text.json
new file mode 100644
index 00000000000000..e1397fdc9a37aa
--- /dev/null
+++ b/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": ""
+ }
+]
diff --git a/test/integration/full-content/fixtures/core__search__custom-text.parsed.json b/test/integration/full-content/fixtures/core__search__custom-text.parsed.json
new file mode 100644
index 00000000000000..fd128b35f93c81
--- /dev/null
+++ b/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"
+ ]
+ }
+]
diff --git a/test/integration/full-content/fixtures/core__search__custom-text.serialized.html b/test/integration/full-content/fixtures/core__search__custom-text.serialized.html
new file mode 100644
index 00000000000000..f62e8a853c2eaa
--- /dev/null
+++ b/test/integration/full-content/fixtures/core__search__custom-text.serialized.html
@@ -0,0 +1 @@
+