Add the block example API and use it for inserter and switcher previe…

…ws (#17124)
WordPress · Aug 29, 2019 · 1456d81 · 1456d81
1 parent 4876f0d
commit 1456d81
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
@@ -86,12 +86,12 @@ function ScaledBlockPreview( { blocks, viewportWidth } ) {
 	return (
 		<div
 			ref={ previewRef }
-			className={ classnames( 'block-editor-block-preview__container', {
+			className={ classnames( 'block-editor-block-preview__container editor-styles-wrapper', {
 				'is-ready': isReady,
 			} ) }
 			aria-hidden
 		>
-			<Disabled style={ previewStyles } className="block-editor-block-preview__content editor-styles-wrapper">
+			<Disabled style={ previewStyles } className="block-editor-block-preview__content">
 				<BlockList />
 			</Disabled>
 		</div>

diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
@@ -12,7 +12,7 @@ import { withSelect, withDispatch } from '@wordpress/data';
 import TokenList from '@wordpress/token-list';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { _x } from '@wordpress/i18n';
-import { getBlockType, cloneBlock } from '@wordpress/blocks';
+import { getBlockType, cloneBlock, createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -122,7 +122,13 @@ function BlockStyles( {
 						aria-label={ style.label || style.name }
 					>
 						<div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
-							<BlockPreview blocks={ cloneBlock( block, { className: styleClassName } ) } />
+							<BlockPreview
+								viewportWidth={ 500 }
+								blocks={ type.example ?
+									createBlock( block.name, { ...type.example.attributes, className: styleClassName }, type.example.innerBlocks ) :
+									cloneBlock( block, { className: styleClassName } )
+								}
+							/>
 						</div>
 						<div className="editor-block-styles__item-label block-editor-block-styles__item-label">
 							{ style.label || style.name }

diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -8,7 +8,7 @@ import { castArray, filter, first, mapKeys, orderBy, uniq, map } from 'lodash';
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { Dropdown, IconButton, Toolbar, PanelBody, Path, SVG } from '@wordpress/components';
-import { getBlockType, getPossibleBlockTransformations, switchToBlockType, cloneBlock } from '@wordpress/blocks';
+import { getBlockType, getPossibleBlockTransformations, switchToBlockType, cloneBlock, createBlock } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { DOWN } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -43,6 +43,9 @@ export class BlockSwitcher extends Component {
 			return null;
 		}
 
+		const hoveredBlock = hoveredClassName ? blocks[ 0 ] : null;
+		const hoveredBlockType = hoveredClassName ? getBlockType( hoveredBlock.name ) : null;
+
 		const itemsByName = mapKeys( inserterItems, ( { name } ) => name );
 		const possibleBlockTransformations = orderBy(
 			filter(
@@ -165,11 +168,11 @@ export class BlockSwitcher extends Component {
 							<div className="block-editor-block-switcher__preview">
 								<div className="block-editor-block-switcher__preview-title">{ __( 'Preview' ) }</div>
 								<BlockPreview
-									className="block-editor-block-switcher__preview-content"
+									viewportWidth={ 500 }
 									blocks={
-										cloneBlock( blocks[ 0 ], {
-											className: hoveredClassName,
-										} )
+										hoveredBlockType.example ?
+											createBlock( hoveredBlock.name, { ...hoveredBlockType.example.attributes, className: hoveredClassName }, hoveredBlockType.example.innerBlocks ) :
+											cloneBlock( hoveredBlock, { className: hoveredClassName } )
 									}
 								/>
 							</div>

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -118,6 +118,7 @@
 			align-self: stretch;
 			// For sticky to work we need top
 			top: 0;
+			padding: 10px;
 		}
 	}
 

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -263,6 +263,7 @@ export class InserterMenu extends Component {
 			suggestedItems,
 		} = this.state;
 		const isPanelOpen = ( panel ) => openPanels.indexOf( panel ) !== -1;
+		const hoveredItemBlockType = hoveredItem ? getBlockType( hoveredItem.name ) : null;
 
 		// Disable reason (no-autofocus): The inserter menu is a modal display, not one which
 		// is always visible, and one which already incurs this behavior of autoFocus via
@@ -364,14 +365,19 @@ export class InserterMenu extends Component {
 					<div className="block-editor-inserter__menu-help-panel">
 						{ hoveredItem && (
 							<>
-								<BlockCard blockType={ getBlockType( hoveredItem.name ) } />
-								{ isReusableBlock( hoveredItem ) && (
+								<BlockCard blockType={ hoveredItemBlockType } />
+								{ ( isReusableBlock( hoveredItem ) || hoveredItemBlockType.example ) && (
 									<div className="block-editor-inserter__preview">
-										<div className="block-editor-inserter__preview-title">{ __( 'Preview' ) }</div>
-										<BlockPreview
-											className="block-editor-inserter__preview-content"
-											blocks={ createBlock( hoveredItem.name, hoveredItem.initialAttributes ) }
-										/>
+										<div className="block-editor-inserter__preview-content">
+											<BlockPreview
+												viewportWidth={ 500 }
+												blocks={ createBlock(
+													hoveredItem.name,
+													hoveredItemBlockType.example ? hoveredItemBlockType.example.attributes : hoveredItem.initialAttributes,
+													hoveredItemBlockType.example ? hoveredItemBlockType.example.innerBlocks : undefined
+												) }
+											/>
+										</div>
 									</div>
 								) }
 							</>

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -154,19 +154,21 @@ $block-inserter-search-height: 38px;
 	overflow-y: auto;
 
 	@include break-medium {
-		display: block;
+		display: flex;
+		flex-direction: column;
 	}
 
 	.block-editor-block-card {
 		padding-bottom: 20px;
-		margin-bottom: 10px;
+		margin-bottom: 20px;
 		border-bottom: $border-width solid $light-gray-500;
 		@include edit-post__fade-in-animation();
 	}
-}
 
-.block-editor-inserter__preview-title {
-	margin-bottom: 10px;
+	.block-editor-inserter__preview {
+		display: flex;
+		flex-grow: 2;
+	}
 }
 
 .block-editor-inserter__menu-help-panel-no-block {
@@ -207,3 +209,12 @@ $block-inserter-search-height: 38px;
 	font-weight: 600;
 	margin-bottom: 20px;
 }
+
+.block-editor-inserter__preview-content {
+	border: $border-width solid $light-gray-500;
+	border-radius: $radius-round-rectangle;
+	min-height: 150px;
+	padding: 10px;
+	display: grid;
+	flex-grow: 2;
+}
diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
@@ -22,6 +22,11 @@ export const settings = {
 	description: __( 'Start with the building block of all narrative.' ),
 	icon,
 	keywords: [ __( 'text' ) ],
+	example: {
+		attributes: {
+			content: __( 'Start writing, no matter what. The water does not flow until the faucet is turned on.' ),
+		},
+	},
 	supports: {
 		className: false,
 	},
-Original file line number
+Diff line change
@@ Expand Up / @@ -118,6 +118,7 @@ @@
     			align-self: stretch;
     			// For sticky to work we need top
     			top: 0;
+    			padding: 10px;
     		}
     	}
@@ Expand Down @@