Try: Replace BlockDescription component with block type property

blocks/README.md

@@ -226,7 +226,11 @@ editor interface where blocks are implemented.
 
 - `title: string` - A human-readable
   [localized](https://codex.wordpress.org/I18n_for_WordPress_Developers#Handling_JavaScript_files)
-  label for the block. Shown in the block picker.
+  name for the block. Shown in the block picker.
+- `description: string` - A human-readable
+  [localized](https://codex.wordpress.org/I18n_for_WordPress_Developers#Handling_JavaScript_files)
+  description of the block. Shown in the sidebar block inspector. Can be longer
+  than the `title` to describe intent, usage, or available settings for block.
 - `icon: string | WPElement | Function` - Slug of the
   [Dashicon](https://developer.wordpress.org/resource/dashicons/#awards)
   to be shown in the control's button, or an element (or function returning an

blocks/index.js

@@ -15,7 +15,6 @@ import './library';
 export * from './api';
 export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as BlockControls } from './block-controls';
-export { default as BlockDescription } from './block-description';
 export { default as Editable } from './editable';
 export { default as InspectorControls } from './inspector-controls';
 export { default as MediaUploadButton } from './media-upload-button';

blocks/library/cover-image/index.js

@@ -17,7 +17,6 @@ import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import InspectorControls from '../../inspector-controls';
 import ToggleControl from '../../inspector-controls/toggle-control';
-import BlockDescription from '../../block-description';
 
 const { text } = query;
 
@@ -26,6 +25,8 @@ const validAlignments = [ 'left', 'center', 'right', 'wide', 'full' ];
 registerBlockType( 'core/cover-image', {
 	title: __( 'Cover Image' ),
 
+	description: __( 'Cover Image is a bold image block with an optional title.' ),
+
 	icon: 'format-image',
 
 	category: 'common',
@@ -108,9 +109,6 @@ registerBlockType( 'core/cover-image', {
 			controls,
 			focus && (
 				<InspectorControls key="inspector">
-					<BlockDescription>
-						<p>{ __( 'Cover Image is a bold image block with an optional title.' ) }</p>
-					</BlockDescription>
 					<h3>{ __( 'Cover Image Settings' ) }</h3>
 					<ToggleControl
 						label={ __( 'Fixed Background' ) }

blocks/library/gallery/index.js

@@ -18,7 +18,6 @@ import ToggleControl from '../../inspector-controls/toggle-control';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import GalleryImage from './gallery-image';
-import BlockDescription from '../../block-description';
 
 const MAX_COLUMNS = 8;
 
@@ -67,7 +66,11 @@ function defaultColumnsNumber( attributes ) {
 
 registerBlockType( 'core/gallery', {
 	title: __( 'Gallery' ),
+
+	description: __( 'Image galleries are a great way to share groups of pictures on your site.' ),
+
 	icon: 'format-gallery',
+
 	category: 'common',
 
 	getEditWrapperProps( attributes ) {
@@ -131,9 +134,6 @@ registerBlockType( 'core/gallery', {
 			controls,
 			focus && images.length > 1 && (
 				<InspectorControls key="inspector">
-					<BlockDescription>
-						<p>{ __( 'Image galleries are a great way to share groups of pictures on your site.' ) }</p>
-					</BlockDescription>
 					<h3>{ __( 'Gallery Settings' ) }</h3>
 					<RangeControl
 						label={ __( 'Columns' ) }

blocks/library/heading/index.js

@@ -19,13 +19,14 @@ import Editable from '../../editable';
 import BlockControls from '../../block-controls';
 import InspectorControls from '../../inspector-controls';
 import AlignmentToolbar from '../../alignment-toolbar';
-import BlockDescription from '../../block-description';
 
 const { children, prop } = query;
 
 registerBlockType( 'core/heading', {
 	title: __( 'Heading' ),
 
+	description: __( 'Search engines use the headings to index the structure and content of your web pages.' ),
+
 	icon: 'heading',
 
 	category: 'common',
@@ -121,9 +122,6 @@ registerBlockType( 'core/heading', {
 			),
 			focus && (
 				<InspectorControls key="inspector">
-					<BlockDescription>
-						<p>{ __( 'Search engines use the headings to index the structure and content of your web pages.' ) }</p>
-					</BlockDescription>
 					<h3>{ __( 'Heading Settings' ) }</h3>
 					<p>{ __( 'Size' ) }</p>
 					<Toolbar

blocks/library/image/index.js

@@ -20,14 +20,15 @@ import InspectorControls from '../../inspector-controls';
 import TextControl from '../../inspector-controls/text-control';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
-import BlockDescription from '../../block-description';
 import UrlInput from '../../url-input';
 
 const { attr, children } = query;
 
 registerBlockType( 'core/image', {
 	title: __( 'Image' ),
 
+	description: __( 'Worth a thousand words.' ),
+
 	icon: 'format-image',
 
 	category: 'common',
@@ -167,9 +168,6 @@ registerBlockType( 'core/image', {
 			controls,
 			focus && (
 				<InspectorControls key="inspector">
-					<BlockDescription>
-						<p>{ __( 'Worth a thousand words.' ) }</p>
-					</BlockDescription>
 					<h3>{ __( 'Image Settings' ) }</h3>
 					<TextControl label={ __( 'Alternate Text' ) } value={ alt } onChange={ updateAlt } />
 				</InspectorControls>

blocks/library/latest-posts/index.js

@@ -16,7 +16,6 @@ import { getLatestPosts } from './data.js';
 import InspectorControls from '../../inspector-controls';
 import TextControl from '../../inspector-controls/text-control';
 import ToggleControl from '../../inspector-controls/toggle-control';
-import BlockDescription from '../../block-description';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 
@@ -26,6 +25,8 @@ const MAX_POSTS = 100;
 registerBlockType( 'core/latest-posts', {
 	title: __( 'Latest Posts' ),
 
+	description: __( 'Shows a list of your site\'s most recent posts.' ),
+
 	icon: 'list-view',
 
 	category: 'widgets',
@@ -125,9 +126,6 @@ registerBlockType( 'core/latest-posts', {
 				),
 				focus && (
 					<InspectorControls key="inspector">
-						<BlockDescription>
-							<p>{ __( 'Shows a list of your site\'s most recent posts.' ) }</p>
-						</BlockDescription>
 						<h3>{ __( 'Latest Posts Settings' ) }</h3>
 
 						<ToggleControl

blocks/library/text/index.js

@@ -14,13 +14,14 @@ import BlockControls from '../../block-controls';
 import Editable from '../../editable';
 import InspectorControls from '../../inspector-controls';
 import ToggleControl from '../../inspector-controls/toggle-control';
-import BlockDescription from '../../block-description';
 
 const { children, query } = hpq;
 
 registerBlockType( 'core/text', {
 	title: __( 'Text' ),
 
+	description: __( 'Text. Great things start here.' ),
+
 	icon: 'text',
 
 	category: 'common',
@@ -69,9 +70,6 @@ registerBlockType( 'core/text', {
 			),
 			focus && (
 				<InspectorControls key="inspector">
-					<BlockDescription>
-						<p>{ __( 'Text. Great things start here.' ) }</p>
-					</BlockDescription>
 					<h3>{ __( 'Text Settings' ) }</h3>
 					<ToggleControl
 						label={ __( 'Drop Cap' ) }

editor/sidebar/block-inspector/index.js

@@ -9,6 +9,7 @@ import { Slot } from 'react-slot-fill';
  */
 import { __ } from 'i18n';
 import { Panel, PanelBody } from 'components';
+import { getBlockType } from 'blocks';
 
 /**
  * Internal Dependencies
@@ -18,13 +19,21 @@ import BlockInspectorClassName from './class-name';
 import { getSelectedBlock } from '../../selectors';
 
 const BlockInspector = ( { selectedBlock } ) => {
-	if ( ! selectedBlock ) {
+	let blockType;
+	if ( ! selectedBlock || ! ( blockType = getBlockType( selectedBlock.name ) ) ) {
 		return <span className="editor-block-inspector__no-blocks">{ __( 'No block selected.' ) }</span>;
 	}
 
+	const { description } = blockType;
+
 	return (
 		<Panel>
 			<PanelBody>
+				{ description && (
+					<p className="editor-block-inspector__description">
+						{ description }
+					</p>
+				) }
 				<Slot name="Inspector.Controls" />
 				<BlockInspectorClassName />
 			</PanelBody>

editor/sidebar/block-inspector/style.scss

@@ -14,3 +14,10 @@
 	margin: 32px 16px;
 	text-align: center;
 }
+
+.editor-block-inspector__description {
+	padding-bottom: 1.5em;
+	margin: 0 0 1.5em;
+	border-bottom: 1px solid $light-gray-500;
+	font-style: italic;
+}