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.

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": <value>
       }
     }
+  },
+  "core/site-tagline": {
+    "styles": {
+      "color": {
+        "background": <value>,
+        "gradient": <value>,
+        "text": <value>
+      },
+      "typography": {
+        "fontSize": <value>,
+        "lineHeight": <value>
+      }
+    }
   }
 }
 ```

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',
 			)

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,

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
+	}
+}

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 (
+		<>
+			<BlockControls>
+				<AlignmentToolbar
+					onChange={ ( newAlign ) =>
+						setAttributes( { align: newAlign } )
+					}
+					value={ align }
+				/>
+			</BlockControls>
+
+			<RichText
+				allowedFormats={ [] }
+				className={ classnames( {
+					[ `has-text-align-${ align }` ]: align,
+				} ) }
+				onChange={ setSiteTagline }
+				placeholder={ __( 'Site Tagline' ) }
+				tagName={ Block.p }
+				value={ siteTagline }
+			/>
+		</>
+	);
+}

packages/block-library/src/site-tagline/icon.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+		<Path fill="none" d="M0 0h24v24H0z" />
+		<Path d="M4 9h16v2H4V9zm0 4h10v2H4v-2z" />
+	</SVG>
+);

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,
+};

packages/block-library/src/site-tagline/index.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Server-side rendering of the `core/site-tagline` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/site-tagline` block on the server.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string The render.
+ */
+function render_block_core_site_tagline( $attributes ) {
+	$align_class_name = empty( $attributes['align'] ) ? '' : ' ' . "has-text-align-{$attributes['align']}";
+
+	return sprintf(
+		'<p class="%1$s">%2$s</p>',
+		'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' );

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',

packages/e2e-tests/fixtures/blocks/core__site-tagline.html

@@ -0,0 +1 @@
+<!-- wp:site-tagline /-->

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": ""
+    }
+]

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"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__site-tagline.serialized.html

@@ -0,0 +1 @@
+<!-- wp:site-tagline /-->