From 994617683fc73f51b2b85d92050daf175919ef93 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 10 May 2019 14:48:03 +0100
Subject: [PATCH] Fix previews for blocks using InnerBlocks

---
 .../src/components/block-preview/index.js     | 31 ++++++++++---------
 .../src/components/block-styles/index.js      |  3 ++
 .../src/components/block-switcher/index.js    |  1 +
 .../block-vertical-alignment-toolbar/index.js |  4 +--
 4 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 97e9a9ebef40c..cc4c846a1cff3 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -1,19 +1,16 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
 import { Disabled } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import BlockEdit from '../block-edit';
+import BlockEditorProvider from '../provider';
+import BlockList from '../block-list';
 
 /**
  * Block Preview Component: It renders a preview given a block name and attributes.
@@ -31,18 +28,22 @@ function BlockPreview( props ) {
 	);
 }
 
-export function BlockPreviewContent( { name, attributes } ) {
-	const block = createBlock( name, attributes );
+export function BlockPreviewContent( { name, attributes, innerBlocks, settings } ) {
+	const block = createBlock( name, attributes, innerBlocks );
 	return (
 		<Disabled className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper" aria-hidden>
-			<BlockEdit
-				name={ name }
-				focus={ false }
-				attributes={ block.attributes }
-				setAttributes={ noop }
-			/>
+			<BlockEditorProvider
+				value={ [ block ] }
+				settings={ settings }
+			>
+				<BlockList />
+			</BlockEditorProvider>
 		</Disabled>
 	);
 }
 
-export default BlockPreview;
+export default withSelect( ( select ) => {
+	return {
+		settings: select( 'core/block-editor' ).getSettings(),
+	};
+} )( BlockPreview );
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index 215d9e545b69f..93c522eb227f5 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -71,6 +71,7 @@ function BlockStyles( {
 	name,
 	attributes,
 	type,
+	block,
 	onSwitch = noop,
 	onHoverClassName = noop,
 } ) {
@@ -129,6 +130,7 @@ function BlockStyles( {
 									...attributes,
 									className: styleClassName,
 								} }
+								innerBlocks={ block.innerBlocks }
 							/>
 						</div>
 						<div className="editor-block-styles__item-label block-editor-block-styles__item-label">
@@ -149,6 +151,7 @@ export default compose( [
 		const blockType = getBlockType( block.name );
 
 		return {
+			block,
 			name: block.name,
 			attributes: block.attributes,
 			className: block.attributes.className || '',
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index 4d6964cc0e110..66292f21faf4a 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -164,6 +164,7 @@ export class BlockSwitcher extends Component {
 							<BlockPreview
 								name={ blocks[ 0 ].name }
 								attributes={ { ...blocks[ 0 ].attributes, className: hoveredClassName } }
+								innerBlocks={ blocks[ 0 ].innerBlocks }
 							/>
 						}
 					</>
diff --git a/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js b/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js
index e7d0014cdecbc..d3d94a0218b09 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js
@@ -68,10 +68,10 @@ export default compose(
 	} ),
 	withViewportMatch( { isLargeViewport: 'medium' } ),
 	withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => {
-		const { getBlockRootClientId, getEditorSettings } = select( 'core/editor' );
+		const { getBlockRootClientId, getSettings } = select( 'core/block-editor' );
 		return {
 			isCollapsed: isCollapsed || ! isLargeViewport || (
-				! getEditorSettings().hasFixedToolbar &&
+				! getSettings().hasFixedToolbar &&
 				getBlockRootClientId( clientId )
 			),
 		};