Update BlockPreview component to accept multiple Blocks to preview (#…

…16033)

* export BlockPreview

* Update to accept multiple Blocks

* Update reusable Blocks preview to use the new single blocks prop

* Remove unecessary clone of Blocks

Not sure why this was introduced.

* Remove export. This is being handled in another PR

See #16801

* Simplify casting to array via lodash

* Utilise cloneBlocks to safely merge attributes on blocks prop

* Spread reusable block initial attrs correctly

* Fix cloneBlock fn to check for innerBlocks before attempting to map

The `innerBlocks` of the `block` being cloned can be `undefined`. Therefore, by attempting to map these we trigger an error.

Fixed to introduce existence check before attempting to manipulate innerBlocks.

* Simplify modifying passed block attrs via cloneBlock

* Removes unecessary spread operation

initalAttributes is already an object so no need to spread into an object.

* block-preview: ensuring to cast BlockEditorProvider value prop as an Array

* don't call cloneBlock on a non-block object

* bring back the old behavior of cloneBlock

packages/block-editor/src/components/block-preview/index.js

@@ -1,8 +1,12 @@
+/**
+ * External dependencies
+ */
+import { castArray } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
 import { Disabled } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 
@@ -28,12 +32,15 @@ function BlockPreview( props ) {
 	);
 }
 
-export function BlockPreviewContent( { name, attributes, innerBlocks, settings } ) {
-	const block = createBlock( name, attributes, innerBlocks );
+export function BlockPreviewContent( { blocks, settings } ) {
+	if ( ! blocks ) {
+		return null;
+	}
+
 	return (
 		<Disabled className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper" aria-hidden>
 			<BlockEditorProvider
-				value={ [ block ] }
+				value={ castArray( blocks ) }
 				settings={ settings }
 			>
 				<BlockList />

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 } from '@wordpress/blocks';
+import { getBlockType, cloneBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -68,8 +68,6 @@ function BlockStyles( {
 	styles,
 	className,
 	onChangeClassName,
-	name,
-	attributes,
 	type,
 	block,
 	onSwitch = noop,
@@ -125,12 +123,9 @@ function BlockStyles( {
 					>
 						<div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
 							<BlockPreviewContent
-								name={ name }
-								attributes={ {
-									...attributes,
+								blocks={ cloneBlock( block, {
 									className: styleClassName,
-								} }
-								innerBlocks={ block.innerBlocks }
+								} ) }
 							/>
 						</div>
 						<div className="editor-block-styles__item-label block-editor-block-styles__item-label">
@@ -152,8 +147,6 @@ export default compose( [
 
 		return {
 			block,
-			name: block.name,
-			attributes: block.attributes,
 			className: block.attributes.className || '',
 			styles: getBlockStyles( block.name ),
 			type: blockType,

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, hasChildBlocksWithInserterSupport } from '@wordpress/blocks';
+import { getBlockType, getPossibleBlockTransformations, switchToBlockType, hasChildBlocksWithInserterSupport, cloneBlock } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { DOWN } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -161,9 +161,12 @@ export class BlockSwitcher extends Component {
 
 						{ ( hoveredClassName !== null ) &&
 							<BlockPreview
-								name={ blocks[ 0 ].name }
-								attributes={ { ...blocks[ 0 ].attributes, className: hoveredClassName } }
-								innerBlocks={ blocks[ 0 ].innerBlocks }
+								blocks={
+									cloneBlock( blocks[ 0 ], {
+										className: hoveredClassName,
+									} )
+								}
+
 							/>
 						}
 					</>

packages/block-editor/src/components/inserter/menu.js

@@ -351,7 +351,7 @@ export class InserterMenu extends Component {
 				</div>
 
 				{ hoveredItem && isReusableBlock( hoveredItem ) &&
-					<BlockPreview name={ hoveredItem.name } attributes={ hoveredItem.initialAttributes } />
+					<BlockPreview blocks={ createBlock( hoveredItem.name, hoveredItem.initialAttributes ) } />
 				}
 			</div>
 		);