From b303d24b67e3619b8b4aae7eb56df3f57c1dca36 Mon Sep 17 00:00:00 2001 From: Jacopo Tomasone Date: Wed, 15 Jul 2020 11:48:28 +0100 Subject: [PATCH] Site Tagline Block (#23788) Add a Site Tagline (aka Site Description) block for the Site Editor. It supports text alignment, colors, font size, and line height out of the box. --- .../developers/themes/theme-json.md | 15 ++++++ lib/blocks.php | 1 + packages/block-library/src/index.js | 4 +- .../block-library/src/site-tagline/block.json | 18 +++++++ .../block-library/src/site-tagline/edit.js | 49 +++++++++++++++++++ .../block-library/src/site-tagline/icon.js | 11 +++++ .../block-library/src/site-tagline/index.js | 21 ++++++++ .../block-library/src/site-tagline/index.php | 36 ++++++++++++++ .../e2e-tests/fixtures/block-transforms.js | 4 ++ .../fixtures/blocks/core__site-tagline.html | 1 + .../fixtures/blocks/core__site-tagline.json | 10 ++++ .../blocks/core__site-tagline.parsed.json | 18 +++++++ .../blocks/core__site-tagline.serialized.html | 1 + 13 files changed, 188 insertions(+), 1 deletion(-) create mode 100644 packages/block-library/src/site-tagline/block.json create mode 100644 packages/block-library/src/site-tagline/edit.js create mode 100644 packages/block-library/src/site-tagline/icon.js create mode 100644 packages/block-library/src/site-tagline/index.js create mode 100644 packages/block-library/src/site-tagline/index.php create mode 100644 packages/e2e-tests/fixtures/blocks/core__site-tagline.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__site-tagline.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__site-tagline.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__site-tagline.serialized.html diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md index 3db274fbe70e0c..9e28ec37a8a794 100644 --- a/docs/designers-developers/developers/themes/theme-json.md +++ b/docs/designers-developers/developers/themes/theme-json.md @@ -168,6 +168,7 @@ Each block will declare which style properties it exposes. This has been coined | Columns | Yes | Yes | Yes | Yes | | Media & text | Yes | Yes | Yes | Yes | | Site Title | Yes | Yes | - | Yes | +| Site Tagline | Yes | Yes | - | Yes | [1] The heading block represents 6 distinct HTML elements: H1-H6. It comes with selectors to target each individual element (ex: core/heading/h1 for H1, etc). @@ -182,6 +183,7 @@ Each block will declare which style properties it exposes. This has been coined | Columns | - | - | | Media & text | - | - | | Site Title | Yes | Yes | +| Site Tagline | Yes | Yes | [1] The heading block represents 6 distinct HTML elements: H1-H6. It comes with selectors to target each individual element (ex: core/heading/h1 for H1, etc). @@ -394,6 +396,19 @@ The list of features that are currently supported are: "lineHeight": } } + }, + "core/site-tagline": { + "styles": { + "color": { + "background": , + "gradient": , + "text": + }, + "typography": { + "fontSize": , + "lineHeight": + } + } } } ``` diff --git a/lib/blocks.php b/lib/blocks.php index df85df02b74428..b9bf822ea318d9 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -87,6 +87,7 @@ function gutenberg_reregister_core_block_types() { 'query-loop.php' => 'core/query-loop', 'query-pagination.php' => 'core/query-pagination', 'site-logo.php' => 'core/site-logo', + 'site-tagline.php' => 'core/site-tagline', 'site-title.php' => 'core/site-title', 'template-part.php' => 'core/template-part', ) diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 5ff83c96790993..c962c8172dec66 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -66,6 +66,7 @@ import * as widgetArea from './widget-area'; // Full Site Editing Blocks import * as siteLogo from './site-logo'; +import * as siteTagline from './site-tagline'; import * as siteTitle from './site-title'; import * as templatePart from './template-part'; import * as query from './query'; @@ -199,8 +200,9 @@ export const __experimentalRegisterExperimentalCoreBlocks = // Register Full Site Editing Blocks. ...( __experimentalEnableFullSiteEditing ? [ - siteTitle, siteLogo, + siteTagline, + siteTitle, templatePart, query, queryLoop, diff --git a/packages/block-library/src/site-tagline/block.json b/packages/block-library/src/site-tagline/block.json new file mode 100644 index 00000000000000..d9d0577d824a15 --- /dev/null +++ b/packages/block-library/src/site-tagline/block.json @@ -0,0 +1,18 @@ +{ + "name": "core/site-tagline", + "category": "design", + "attributes": { + "align": { + "type": "string" + } + }, + "supports": { + "html": false, + "lightBlockWrapper": true, + "__experimentalColor": { + "gradients": true + }, + "__experimentalFontSize": true, + "__experimentalLineHeight": true + } +} diff --git a/packages/block-library/src/site-tagline/edit.js b/packages/block-library/src/site-tagline/edit.js new file mode 100644 index 00000000000000..eff39e55c3b910 --- /dev/null +++ b/packages/block-library/src/site-tagline/edit.js @@ -0,0 +1,49 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { useEntityProp } from '@wordpress/core-data'; +import { + AlignmentToolbar, + __experimentalBlock as Block, + BlockControls, + RichText, +} from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +export default function SiteTaglineEdit( { attributes, setAttributes } ) { + const { align } = attributes; + const [ siteTagline, setSiteTagline ] = useEntityProp( + 'root', + 'site', + 'description' + ); + + return ( + <> + + + setAttributes( { align: newAlign } ) + } + value={ align } + /> + + + + + ); +} diff --git a/packages/block-library/src/site-tagline/icon.js b/packages/block-library/src/site-tagline/icon.js new file mode 100644 index 00000000000000..9e708e94fafd79 --- /dev/null +++ b/packages/block-library/src/site-tagline/icon.js @@ -0,0 +1,11 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/components'; + +export default ( + + + + +); diff --git a/packages/block-library/src/site-tagline/index.js b/packages/block-library/src/site-tagline/index.js new file mode 100644 index 00000000000000..13186a9fa54658 --- /dev/null +++ b/packages/block-library/src/site-tagline/index.js @@ -0,0 +1,21 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; +import icon from './icon'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + title: __( 'Site Tagline' ), + keywords: [ __( 'description' ) ], + icon, + edit, +}; diff --git a/packages/block-library/src/site-tagline/index.php b/packages/block-library/src/site-tagline/index.php new file mode 100644 index 00000000000000..c7461b19a4a20a --- /dev/null +++ b/packages/block-library/src/site-tagline/index.php @@ -0,0 +1,36 @@ +%2$s

', + 'wp-block-site-tagline' . esc_attr( $align_class_name ), + get_bloginfo( 'description' ) + ); +} + +/** + * Registers the `core/site-tagline` block on the server. + */ +function register_block_core_site_tagline() { + register_block_type_from_metadata( + __DIR__ . '/site-tagline', + array( + 'render_callback' => 'render_block_core_site_tagline', + ) + ); +} +add_action( 'init', 'register_block_core_site_tagline' ); diff --git a/packages/e2e-tests/fixtures/block-transforms.js b/packages/e2e-tests/fixtures/block-transforms.js index c9ebbc3ebe6ccf..35404b9dec474b 100644 --- a/packages/e2e-tests/fixtures/block-transforms.js +++ b/packages/e2e-tests/fixtures/block-transforms.js @@ -332,6 +332,10 @@ export const EXPECTED_TRANSFORMS = { originalBlock: 'Shortcode', availableTransforms: [ 'Group' ], }, + 'core__site-tagline': { + availableTransforms: [ 'Group' ], + originalBlock: 'Site Tagline', + }, 'core__site-title': { availableTransforms: [ 'Group' ], originalBlock: 'Site Title', diff --git a/packages/e2e-tests/fixtures/blocks/core__site-tagline.html b/packages/e2e-tests/fixtures/blocks/core__site-tagline.html new file mode 100644 index 00000000000000..c332ab1cb57bb1 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__site-tagline.html @@ -0,0 +1 @@ + diff --git a/packages/e2e-tests/fixtures/blocks/core__site-tagline.json b/packages/e2e-tests/fixtures/blocks/core__site-tagline.json new file mode 100644 index 00000000000000..35075600dc0d19 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__site-tagline.json @@ -0,0 +1,10 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/site-tagline", + "isValid": true, + "attributes": {}, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__site-tagline.parsed.json b/packages/e2e-tests/fixtures/blocks/core__site-tagline.parsed.json new file mode 100644 index 00000000000000..c5d544814b04ad --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__site-tagline.parsed.json @@ -0,0 +1,18 @@ +[ + { + "blockName": "core/site-tagline", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__site-tagline.serialized.html b/packages/e2e-tests/fixtures/blocks/core__site-tagline.serialized.html new file mode 100644 index 00000000000000..c332ab1cb57bb1 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__site-tagline.serialized.html @@ -0,0 +1 @@ +