diff --git a/lib/load.php b/lib/load.php index 2f8644ccf4636..b3c81971a353f 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 12ab36c1f2104..427d55ba22412 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 9fb94f40bdef7..b5778d5b472ff 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 5dd3fee7b2a29..aac4e56fc7a8b 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 0000000000000..f5a5acd20c498 --- /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 0000000000000..cb5a489f180fb --- /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 0000000000000..0fcfa75722ff4 --- /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 0000000000000..ac7da463e92f2 --- /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 0000000000000..80a8a20b5fd37 --- /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 0000000000000..f95849183b5f6 --- /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 09d3a2125e378..35168d85ab237 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 3dcef9d811ecb..7a4dcce562f8a 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 0000000000000..f62e8a853c2ea --- /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 0000000000000..e1397fdc9a37a --- /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 0000000000000..0dfea6eb47b8f --- /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 0000000000000..f62e8a853c2ea --- /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 0000000000000..bb6e6a56c9a33 --- /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 0000000000000..e1397fdc9a37a --- /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 0000000000000..fd128b35f93c8 --- /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 0000000000000..f62e8a853c2ea --- /dev/null +++ b/test/integration/full-content/fixtures/core__search__custom-text.serialized.html @@ -0,0 +1 @@ +