Full Site Editing: Add experimental SiteDescription block

lib/blocks.php

@@ -53,6 +53,7 @@ function gutenberg_reregister_core_block_types() {
 		'social-link.php'     => gutenberg_get_registered_social_link_blocks(),
 		'tag-cloud.php'       => 'core/tag-cloud',
 		'site-title.php'      => 'core/site-title',
+		'site-description.php'=> 'core/site-description',
 	);
 
 	$registry = WP_Block_Type_Registry::get_instance();

packages/base-styles/_z-index.scss

@@ -33,6 +33,7 @@ $z-layers: (
 	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
 	".wp-block-cover__video-background": 0, // Video background inside cover block.
 	".wp-block-site-title__save-button": 1,
+	".wp-block-site-description__save-button": 1,
 
 	// Active pill button
 	".components-button.is-button {:focus or .is-primary}": 1,

packages/block-library/src/editor.scss

@@ -37,6 +37,7 @@
 @import "./verse/editor.scss";
 @import "./video/editor.scss";
 @import "./site-title/editor.scss";
+@import "./site-description/editor.scss";
 
 /**
  * Import styles from internal editor components used by the blocks.

packages/block-library/src/index.js

@@ -64,6 +64,7 @@ import * as socialLink from './social-link';
 
 // Full Site Editing Blocks
 import * as siteTitle from './site-title';
+import * as siteDescription from './site-description';
 
 /**
  * Function to register an individual block.
@@ -182,7 +183,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 				...socialLink.sites,
 
 				// Register Full Site Editing Blocks.
-				...( __experimentalEnableFullSiteEditing ? [ siteTitle ] : [] ),
+				...( __experimentalEnableFullSiteEditing ? [ siteTitle, siteDescription ] : [] ),
 			].forEach( registerBlock );
 		} :
 		undefined;

packages/block-library/src/site-description/block.json

@@ -0,0 +1,37 @@
+{
+	"name": "core/site-description",
+	"category": "layout",
+	"supports": {
+		"align": [ "wide", "full" ],
+		"html": false
+	},
+	"attributes": {
+		"align": {
+			"type": "string",
+			"default": "wide"
+		},
+		"textAlign": {
+			"type": "string",
+			"default": "center"
+		},
+		"textColor": {
+			"type": "string"
+		},
+		"customTextColor": {
+			"type": "string"
+		},
+		"backgroundColor": {
+			"type": "string"
+		},
+		"customBackgroundColor": {
+			"type": "string"
+		},
+		"fontSize": {
+			"type": "string",
+			"default": "small"
+		},
+		"customFontSize": {
+			"type": "number"
+		}
+	}
+}

packages/block-library/src/site-description/edit.js

@@ -0,0 +1,146 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useEntityProp,
+	__experimentalUseEntitySaving,
+} from '@wordpress/core-data';
+import { Button, PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	AlignmentToolbar,
+	BlockControls,
+	ContrastChecker,
+	FontSizePicker,
+	InspectorControls,
+	PanelColorSettings,
+	PlainText,
+	withColors,
+	withFontSizes,
+} from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { ENTER } from '@wordpress/keycodes';
+
+function SiteDescriptionEdit( {
+	attributes,
+	backgroundColor,
+	className,
+	fontSize,
+	insertDefaultBlock,
+	setAttributes,
+	setBackgroundColor,
+	setFontSize,
+	setTextColor,
+	textColor,
+
+} ) {
+	const [ description, setDescription ] = useEntityProp( 'root', 'site', 'description' );
+	const [ isDirty, isSaving, save ] = __experimentalUseEntitySaving(
+		'root',
+		'site',
+		'description'
+	);
+
+	const { customFontSize, textAlign } = attributes;
+	const actualFontSize = customFontSize || fontSize.size;
+
+	const preventNewlines = ( event ) => {
+		if ( event.keyCode === ENTER ) {
+			event.preventDefault();
+			insertDefaultBlock();
+		}
+	};
+
+	return (
+		<>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ textAlign }
+					onChange={ ( nextAlign ) => setAttributes( { textAlign: nextAlign } ) }
+				/>
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody className="blocks-font-size" title={ __( 'Text Settings' ) }>
+					<FontSizePicker onChange={ setFontSize } value={ actualFontSize } />
+				</PanelBody>
+				<PanelColorSettings
+					title={ __( 'Color Settings' ) }
+					initialOpen={ false }
+					colorSettings={ [
+						{
+							value: backgroundColor.color,
+							onChange: setBackgroundColor,
+							label: __( 'Background Color' ),
+						},
+						{
+							value: textColor.color,
+							onChange: setTextColor,
+							label: __( 'Text Color' ),
+						},
+					] }
+				>
+					<ContrastChecker
+						{ ...{
+							textColor: textColor.color,
+							backgroundColor: backgroundColor.color,
+						} }
+						fontSize={ actualFontSize }
+					/>
+				</PanelColorSettings>
+			</InspectorControls>
+			<Button
+				isPrimary
+				className="wp-block-site-description__save-button"
+				disabled={ ! isDirty || ! description }
+				isBusy={ isSaving }
+				onClick={ save }
+			>
+				{ __( 'Update' ) }
+			</Button>
+			<PlainText
+				className={ classNames( 'site-description', className, {
+					'has-text-color': textColor.color,
+					'has-background': backgroundColor.color,
+					[ `has-text-align-${ textAlign }` ]: textAlign,
+					[ backgroundColor.class ]: backgroundColor.class,
+					[ textColor.class ]: textColor.class,
+					[ fontSize.class ]: ! customFontSize && fontSize.class,
+				} ) }
+				isStylable
+				multiline={ false }
+				onChange={ setDescription }
+				onKeyDown={ preventNewlines }
+				placeholder={ __( 'Site Description' ) }
+				style={ {
+					backgroundColor: backgroundColor.color,
+					color: textColor.color,
+					fontSize: actualFontSize ? actualFontSize + 'px' : undefined,
+				} }
+				value={ description }
+			/>
+		</>
+	);
+}
+
+export default compose( [
+	withColors( 'backgroundColor', { textColor: 'color' } ),
+	withFontSizes( 'fontSize' ),
+	withSelect( ( select, { clientId } ) => {
+		const { getBlockIndex, getBlockRootClientId } = select( 'core/block-editor' );
+		const rootClientId = getBlockRootClientId( clientId );
+		return {
+			blockIndex: getBlockIndex( clientId, rootClientId ),
+			rootClientId,
+		};
+	} ),
+	withDispatch( ( dispatch, { blockIndex, rootClientId } ) => ( {
+		insertDefaultBlock: () =>
+			dispatch( 'core/block-editor' ).insertDefaultBlock( undefined, rootClientId, blockIndex + 1 ),
+	} ) ),
+] )( SiteDescriptionEdit );

packages/block-library/src/site-description/editor.scss

@@ -0,0 +1,6 @@
+.wp-block-site-description__save-button {
+	position: absolute;
+	right: 0;
+	top: 0;
+	z-index: z-index(".wp-block-site-description__save-button");
+}

packages/block-library/src/site-description/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-description/index.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import icon from './icon';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Site Description' ),
+	icon,
+	edit,
+};

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

@@ -0,0 +1,71 @@
+<?php
+/**
+ * Server-side rendering of the `core/site-description` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/site-description` block on the server.
+ *
+ * @return string The render.
+ */
+function render_block_core_site_description( $attributes ) {
+	$styles = '';
+
+	$class = 'wp-block-site-description';
+	if ( isset( $attributes['className'] ) ) {
+		$class .= ' ' . $attributes['className'];
+	}
+
+	if ( isset( $attributes['align'] ) ) {
+		$class .= ' align' . $attributes['align'];
+	}
+
+	if ( isset( $attributes['textAlign'] ) ) {
+		$class .= ' has-text-align-' . $attributes['textAlign'];
+	}
+
+	if ( isset( $attributes['textColor'] ) ) {
+		$class .= ' has-text-color';
+		$class .= ' has-' . $attributes['textColor'] . '-color';
+	} elseif ( isset( $attributes['customTextColor'] ) ) {
+		$class  .= ' has-text-color';
+		$styles .= ' color: ' . $attributes['customTextColor'] . ';';
+	}
+
+	if ( isset( $attributes['backgroundColor'] ) ) {
+		$class .= ' has-background';
+		$class .= ' has-' . $attributes['backgroundColor'] . '-background-color';
+	} elseif ( isset( $attributes['customBackgroundColor'] ) ) {
+		$class  .= ' has-background';
+		$styles .= ' background-color: ' . $attributes['customBackgroundColor'] . ';';
+	}
+
+	if ( isset( $attributes['fontSize'] ) ) {
+		$class .= ' has-' . $attributes['fontSize'] . '-font-size';
+	} elseif ( isset( $attributes['customFontSize'] ) ) {
+		$styles .= ' font-size: ' . $attributes['customFontSize'] . 'px;';
+	}
+
+	ob_start();
+	?>
+	<p class="<?php echo esc_attr( $class ); ?>" style="<?php echo esc_attr( $styles ); ?>">
+		<?php bloginfo( 'description' ); ?>
+	</p>
+	<?php
+	return ob_get_clean();
+}
+
+/**
+ * Registers the `core/site-description` block on the server.
+ */
+function register_block_core_site_description() {
+	register_block_type(
+		'core/site-description',
+		array(
+			'render_callback' => 'render_block_core_site_description',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_site_description' );