Create a SiteDescription block similar to SiteTitle

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,39 @@
+{
+	"name": "core/site-description",
+	"category": "layout",
+	"supports": {
+		"align": [ "wide", "full" ],
+		"html": false,
+		"multiple": false,
+		"reusable": 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,65 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useEntityProp,
+	__experimentalUseEntitySaving,
+} from '@wordpress/core-data';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { PlainText } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { ENTER } from '@wordpress/keycodes';
+
+function SiteDescriptionEdit( { insertDefaultBlock } ) {
+	const [ description, setDescription ] = useEntityProp( 'root', 'site', 'description' );
+	const [ isDirty, isSaving, save ] = __experimentalUseEntitySaving(
+		'root',
+		'site',
+		'description'
+	);
+
+	const preventNewlines = ( event ) => {
+		if ( event.keyCode === ENTER ) {
+			event.preventDefault();
+			insertDefaultBlock();
+		}
+	};
+
+	return (
+		<>
+			<Button
+				isPrimary
+				className="wp-block-site-description__save-button"
+				disabled={ ! isDirty || ! description }
+				isBusy={ isSaving }
+				onClick={ save }
+			>
+				{ __( 'Update' ) }
+			</Button>
+			<PlainText
+				placeholder={ __( 'Site Description' ) }
+				value={ description }
+				onChange={ setDescription }
+				isStylable
+				onKeyDown={ preventNewlines }
+			/>
+		</>
+	);
+}
+
+export default compose( [
+	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,
+};