Add search block

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 /-->