From d0845237fc8f05bcb270921611b36e9e2f91eaa3 Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Fri, 7 Jun 2019 11:16:44 +0200 Subject: [PATCH 01/14] export BlockPreview --- packages/block-editor/src/components/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index dc38643a6519b..636cb7b0a8d87 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -12,6 +12,7 @@ export { default as BlockEdit } from './block-edit'; export { default as BlockFormatControls } from './block-format-controls'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; +export { default as BlockPreview } from './block-preview'; export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar'; export { default as ButtonBlockerAppender } from './button-block-appender'; export { default as ColorPalette } from './color-palette'; From 51e44f12307980c2bb92d831486a1a42d316f986 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 23 Jul 2019 16:55:25 +0100 Subject: [PATCH 02/14] Update to accept multiple Blocks --- .../src/components/block-preview/index.js | 16 +++++++++++++--- .../src/components/block-styles/index.js | 19 +++++++++---------- .../src/components/block-switcher/index.js | 11 ++++++++--- 3 files changed, 30 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js index cc4c846a1cff3..51afdeb7e55d6 100644 --- a/packages/block-editor/src/components/block-preview/index.js +++ b/packages/block-editor/src/components/block-preview/index.js @@ -28,12 +28,22 @@ 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; + } + + const theBlocks = Array.isArray( blocks ) ? blocks : [ blocks ]; + + // Create new "clone" Blocks to show in the preview + const blocksToPreview = theBlocks.map( ( { name, attributes, innerBlocks } ) => { + return createBlock( name, attributes, innerBlocks ); + } ); + return ( diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js index 93c522eb227f5..f6646f1c36feb 100644 --- a/packages/block-editor/src/components/block-styles/index.js +++ b/packages/block-editor/src/components/block-styles/index.js @@ -68,8 +68,6 @@ function BlockStyles( { styles, className, onChangeClassName, - name, - attributes, type, block, onSwitch = noop, @@ -125,12 +123,15 @@ function BlockStyles( { >
@@ -152,8 +153,6 @@ export default compose( [ return { block, - name: block.name, - attributes: block.attributes, className: block.attributes.className || '', styles: getBlockStyles( block.name ), type: blockType, diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index eae64277471b2..787a5cc05276a 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -161,9 +161,14 @@ export class BlockSwitcher extends Component { { ( hoveredClassName !== null ) && } From 17bab95ac82191d2c8b7462e083a27008586c1ca Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 24 Jul 2019 09:18:06 +0100 Subject: [PATCH 03/14] Update reusable Blocks preview to use the new single blocks prop --- packages/block-editor/README.md | 4 ++++ packages/block-editor/src/components/inserter/menu.js | 5 ++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 63718286e9bb8..19398ea0e49bc 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -122,6 +122,10 @@ Undocumented declaration. Undocumented declaration. +# **BlockPreview** + +Undocumented declaration. + # **BlockSelectionClearer** Undocumented declaration. diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index bf659f789d188..70b739576052e 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -351,7 +351,10 @@ export class InserterMenu extends Component {
{ hoveredItem && isReusableBlock( hoveredItem ) && - + } ); From 74f4a0c0bdbf4cd4bc119c08edd93fe8f183da1d Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 30 Jul 2019 10:31:34 +0100 Subject: [PATCH 04/14] Remove unecessary clone of Blocks Not sure why this was introduced. --- .../block-editor/src/components/block-preview/index.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js index 51afdeb7e55d6..ad014944b7630 100644 --- a/packages/block-editor/src/components/block-preview/index.js +++ b/packages/block-editor/src/components/block-preview/index.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { createBlock } from '@wordpress/blocks'; import { Disabled } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; @@ -35,15 +34,10 @@ export function BlockPreviewContent( { blocks, settings } ) { const theBlocks = Array.isArray( blocks ) ? blocks : [ blocks ]; - // Create new "clone" Blocks to show in the preview - const blocksToPreview = theBlocks.map( ( { name, attributes, innerBlocks } ) => { - return createBlock( name, attributes, innerBlocks ); - } ); - return ( From ad31ffde0c3b5c736e46c4382a607b455251cf76 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 30 Jul 2019 10:35:07 +0100 Subject: [PATCH 05/14] Remove export. This is being handled in another PR See https://github.com/WordPress/gutenberg/pull/16801 --- packages/block-editor/README.md | 4 ---- packages/block-editor/src/components/index.js | 1 - 2 files changed, 5 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 19398ea0e49bc..63718286e9bb8 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -122,10 +122,6 @@ Undocumented declaration. Undocumented declaration. -# **BlockPreview** - -Undocumented declaration. - # **BlockSelectionClearer** Undocumented declaration. diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 636cb7b0a8d87..dc38643a6519b 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -12,7 +12,6 @@ export { default as BlockEdit } from './block-edit'; export { default as BlockFormatControls } from './block-format-controls'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; -export { default as BlockPreview } from './block-preview'; export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar'; export { default as ButtonBlockerAppender } from './button-block-appender'; export { default as ColorPalette } from './color-palette'; From 078ee6b769e90fa6c512d2527ab9b34e9b52f4e1 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 30 Jul 2019 10:53:56 +0100 Subject: [PATCH 06/14] Simplify casting to array via lodash --- .../block-editor/src/components/block-preview/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js index ad014944b7630..93c41ca0eb430 100644 --- a/packages/block-editor/src/components/block-preview/index.js +++ b/packages/block-editor/src/components/block-preview/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { castArray } from 'lodash'; + /** * WordPress dependencies */ @@ -32,7 +37,7 @@ export function BlockPreviewContent( { blocks, settings } ) { return null; } - const theBlocks = Array.isArray( blocks ) ? blocks : [ blocks ]; + const theBlocks = castArray( blocks ); return ( From b8493f1ac4b86c6acc74847e5147b87c93a458c5 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 30 Jul 2019 11:12:04 +0100 Subject: [PATCH 07/14] Utilise cloneBlocks to safely merge attributes on blocks prop --- .../src/components/block-styles/index.js | 14 ++++---------- .../block-editor/src/components/inserter/menu.js | 6 ++---- 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js index f6646f1c36feb..2485c73e9a0a4 100644 --- a/packages/block-editor/src/components/block-styles/index.js +++ b/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 @@ -123,15 +123,9 @@ function BlockStyles( { >
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 70b739576052e..2eb7ebc592a07 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -28,6 +28,7 @@ import { isReusableBlock, createBlock, isUnmodifiedDefaultBlock, + cloneBlock, } from '@wordpress/blocks'; import { withDispatch, withSelect } from '@wordpress/data'; import { withInstanceId, compose, withSafeTimeout } from '@wordpress/compose'; @@ -351,10 +352,7 @@ export class InserterMenu extends Component {
{ hoveredItem && isReusableBlock( hoveredItem ) && - + } ); From 5117318f74b0ab22e7bbfe7c80fde9a92e6e3a59 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 30 Jul 2019 11:30:29 +0100 Subject: [PATCH 08/14] Spread reusable block initial attrs correctly --- packages/block-editor/src/components/inserter/menu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 2eb7ebc592a07..d7c27229903a5 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -352,7 +352,7 @@ export class InserterMenu extends Component { { hoveredItem && isReusableBlock( hoveredItem ) && - + } ); From 80c105a765cab8151cad4a8b1f740d175357d17b Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 30 Jul 2019 12:02:24 +0100 Subject: [PATCH 09/14] 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. --- .../block-editor/src/components/block-preview/index.js | 4 ++-- packages/blocks/src/api/factory.js | 10 ++++++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js index 93c41ca0eb430..f9356bc84ca4b 100644 --- a/packages/block-editor/src/components/block-preview/index.js +++ b/packages/block-editor/src/components/block-preview/index.js @@ -9,7 +9,7 @@ import { castArray } from 'lodash'; import { __ } from '@wordpress/i18n'; import { Disabled } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; - +import { createBlock } from '@wordpress/blocks'; /** * Internal dependencies */ @@ -37,7 +37,7 @@ export function BlockPreviewContent( { blocks, settings } ) { return null; } - const theBlocks = castArray( blocks ); + const theBlocks = castArray( blocks ).map( ( { name, attributes, innerBlocks } ) => createBlock( name, attributes, innerBlocks ) ); return ( diff --git a/packages/blocks/src/api/factory.js b/packages/blocks/src/api/factory.js index 8d659b1c87886..023ac67cb714a 100644 --- a/packages/blocks/src/api/factory.js +++ b/packages/blocks/src/api/factory.js @@ -91,6 +91,13 @@ export function createBlock( name, attributes = {}, innerBlocks = [] ) { export function cloneBlock( block, mergeAttributes = {}, newInnerBlocks ) { const clientId = uuid(); + // Check for innerBlocks on block before attempting + // to map them. There are edge cases where they can + // be `undefined` + if ( ! newInnerBlocks && block.innerBlocks ) { + newInnerBlocks = block.innerBlocks.map( ( innerBlock ) => cloneBlock( innerBlock ) ); + } + return { ...block, clientId, @@ -98,8 +105,7 @@ export function cloneBlock( block, mergeAttributes = {}, newInnerBlocks ) { ...block.attributes, ...mergeAttributes, }, - innerBlocks: newInnerBlocks || - block.innerBlocks.map( ( innerBlock ) => cloneBlock( innerBlock ) ), + innerBlocks: newInnerBlocks, }; } From 41b0a991224bf4f48025c652e3f88a77251d1b0c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 30 Jul 2019 12:05:29 +0100 Subject: [PATCH 10/14] Simplify modifying passed block attrs via cloneBlock --- .../src/components/block-switcher/index.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 787a5cc05276a..4101092db6d4d 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/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,13 +161,11 @@ export class BlockSwitcher extends Component { { ( hoveredClassName !== null ) && } From 20bc603cc9321258eed1b243b891691ea9567eca Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 30 Jul 2019 12:07:00 +0100 Subject: [PATCH 11/14] Removes unecessary spread operation initalAttributes is already an object so no need to spread into an object. --- packages/block-editor/src/components/inserter/menu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index d7c27229903a5..07df627c72374 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -352,7 +352,7 @@ export class InserterMenu extends Component { { hoveredItem && isReusableBlock( hoveredItem ) && - + } ); From d04cf215c8134f812705f1d96e7a74774d498e43 Mon Sep 17 00:00:00 2001 From: retrofox Date: Tue, 30 Jul 2019 14:57:17 -0300 Subject: [PATCH 12/14] block-preview: ensuring to cast BlockEditorProvider value prop as an Array --- packages/block-editor/src/components/block-preview/index.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js index f9356bc84ca4b..b4d0850f3b810 100644 --- a/packages/block-editor/src/components/block-preview/index.js +++ b/packages/block-editor/src/components/block-preview/index.js @@ -9,7 +9,7 @@ import { castArray } from 'lodash'; import { __ } from '@wordpress/i18n'; import { Disabled } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; -import { createBlock } from '@wordpress/blocks'; + /** * Internal dependencies */ @@ -37,12 +37,10 @@ export function BlockPreviewContent( { blocks, settings } ) { return null; } - const theBlocks = castArray( blocks ).map( ( { name, attributes, innerBlocks } ) => createBlock( name, attributes, innerBlocks ) ); - return ( From 2b8f1fb6527278eff3c6e0dcac78d28cbbbd7619 Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Tue, 30 Jul 2019 17:22:39 -0700 Subject: [PATCH 13/14] don't call cloneBlock on a non-block object --- packages/block-editor/src/components/inserter/menu.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 07df627c72374..12d119ce4ab51 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -28,7 +28,6 @@ import { isReusableBlock, createBlock, isUnmodifiedDefaultBlock, - cloneBlock, } from '@wordpress/blocks'; import { withDispatch, withSelect } from '@wordpress/data'; import { withInstanceId, compose, withSafeTimeout } from '@wordpress/compose'; @@ -352,7 +351,7 @@ export class InserterMenu extends Component { { hoveredItem && isReusableBlock( hoveredItem ) && - + } ); From 75f9bb0af93793951b3dc21d18c7d3e751d5091e Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Tue, 30 Jul 2019 17:38:00 -0700 Subject: [PATCH 14/14] bring back the old behavior of cloneBlock --- packages/blocks/src/api/factory.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/blocks/src/api/factory.js b/packages/blocks/src/api/factory.js index 023ac67cb714a..8d659b1c87886 100644 --- a/packages/blocks/src/api/factory.js +++ b/packages/blocks/src/api/factory.js @@ -91,13 +91,6 @@ export function createBlock( name, attributes = {}, innerBlocks = [] ) { export function cloneBlock( block, mergeAttributes = {}, newInnerBlocks ) { const clientId = uuid(); - // Check for innerBlocks on block before attempting - // to map them. There are edge cases where they can - // be `undefined` - if ( ! newInnerBlocks && block.innerBlocks ) { - newInnerBlocks = block.innerBlocks.map( ( innerBlock ) => cloneBlock( innerBlock ) ); - } - return { ...block, clientId, @@ -105,7 +98,8 @@ export function cloneBlock( block, mergeAttributes = {}, newInnerBlocks ) { ...block.attributes, ...mergeAttributes, }, - innerBlocks: newInnerBlocks, + innerBlocks: newInnerBlocks || + block.innerBlocks.map( ( innerBlock ) => cloneBlock( innerBlock ) ), }; }