Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update BlockPreview component to accept multiple Blocks to preview #16033

Merged
merged 14 commits into from
Jul 31, 2019
Merged

Update BlockPreview component to accept multiple Blocks to preview #16033

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d084523
export BlockPreview
marekhrabe Jun 7, 2019
51e44f1
Update to accept multiple Blocks
getdave Jul 23, 2019
17bab95
Update reusable Blocks preview to use the new single blocks prop
getdave Jul 24, 2019
74f4a0c
Remove unecessary clone of Blocks
getdave Jul 30, 2019
ad31ffd
Remove export. This is being handled in another PR
getdave Jul 30, 2019
078ee6b
Simplify casting to array via lodash
getdave Jul 30, 2019
b8493f1
Utilise cloneBlocks to safely merge attributes on blocks prop
getdave Jul 30, 2019
5117318
Spread reusable block initial attrs correctly
getdave Jul 30, 2019
80c105a
Fix cloneBlock fn to check for innerBlocks before attempting to map
getdave Jul 30, 2019
41b0a99
Simplify modifying passed block attrs via cloneBlock
getdave Jul 30, 2019
20bc603
Removes unecessary spread operation
getdave Jul 30, 2019
d04cf21
block-preview: ensuring to cast BlockEditorProvider value prop as an …
retrofox Jul 30, 2019
2b8f1fb
don't call cloneBlock on a non-block object
marekhrabe Jul 31, 2019
75f9bb0
bring back the old behavior of cloneBlock
marekhrabe Jul 31, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions packages/block-editor/src/components/block-preview/index.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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