Skip to content

Commit

Permalink
Update BlockPreview component to accept multiple Blocks to preview (#…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
marekhrabe authored and gziolo committed Aug 29, 2019
1 parent ee3f11a commit 5c12dee
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 19 deletions.
15 changes: 11 additions & 4 deletions packages/block-editor/src/components/block-preview/index.js
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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 />
Expand Down
13 changes: 3 additions & 10 deletions packages/block-editor/src/components/block-styles/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -68,8 +68,6 @@ function BlockStyles( {
styles,
className,
onChangeClassName,
name,
attributes,
type,
block,
onSwitch = noop,
Expand Down Expand Up @@ -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">
Expand All @@ -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,
Expand Down
11 changes: 7 additions & 4 deletions packages/block-editor/src/components/block-switcher/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
} )
}

/>
}
</>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/inserter/menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down

0 comments on commit 5c12dee

Please sign in to comment.