Fix previews for blocks using InnerBlocks

WordPress · May 10, 2019 · 9946176 · 9946176
1 parent 94d48e0
commit 9946176
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 )
  ),
  };