Update BlockPreview component to accept multiple Blocks to preview #16033

marekhrabe · 2019-06-07T09:37:07Z

Description

BlockPreview currently only accepts a single Block. This PR updates this to allow it to (optionally) accept an array of blocks. It also simplifies the API by requiring a Block object rather than expecting Block properties as individual args.

Note: the Reusable Blocks previews are not currently working due to this unrelated bug #16808

How has this been tested?

Firstly confirm existing behaviour has been preserved with the change in API. To do this, manually test all instances where BlockPreview is used and ensure all function as per master branch:

Insert Quote block, open Block Switcher, see Previews render
Open Block Inserter, scroll to Reusable Blocks, hover to see a preview (please see note above)

To test multiple Blocks being rendered you can:

Apply this diff: https://gist.github.com/obenland/761894e1a5be40091e41214756b6a323
(Applying the diff is necessary to make this PR's under-the-hood changes visible)
Create a Post with a lot of Blocks in it.
In a quote or button block, open the Block switcher to see all of the Blocks from the page appear in the BlockPreviewContent below the standard Block Style previews.

Places to check for previews

Undo the additional diff from instructions above and test with code in this branch:
- Block Inserter - top left of the screen the "plus" button. In the inserter, hover a reusable block (you might need to create one first) and you should see a preview on right. As noted above, you will see an error there. If you see an error, that means previews still work the same way and this PR didn't break it. Error is good here. Seeing nothing would be bad.
- Block Switcher - for Button or Quote block it shows "Block Styles" as described above. Make sure both the thumbnail and the detail after hovering the thumbnail contain a preview of the style.

Types of changes

New feature (non-breaking change which adds functionality)

To Demo

Show multiple blocks being previewed.

youknowriad

Right now that component expects name, attributes and innerBlocks prop to render the preview. I think if we want to expose it, it would be better to allow passing blocks as an array instead of these granular props. What do you think?

marekhrabe · 2019-06-07T10:02:43Z

It definitely sounds like a nicer API. Do you think we should update all current usages to use blocks or just add blocks as another way of using this component?

youknowriad · 2019-06-07T10:36:34Z

Do you think we should update all current usages to use blocks

I'd opt for this. It seems straightforward?

youknowriad · 2019-06-07T10:38:46Z

Also, I think we might want to expose BlockPreviewContent using the BlockPreview name instead. It seems that the current BlockPreview adds an unnecessary "title" that might not be useful for all usage. Thoughts?

This might require some adjustements to classnames and things like that.

getdave · 2019-06-17T11:07:51Z

Let's keep this in sync with #16113

cc @jasmussen

marekhrabe · 2019-06-17T11:16:58Z

I did some investigation during the weekend and I'm currently thinking between:

exporting BlockPreview (previously known as BlockPreviewContent), and BlockPreviewFullSize(previously BlockPreview)
replacing both usages with a single BlockPreview component which would have a prop that controls whether it's scaled (and how much) and I'd remove the "Preview" heading completely from our component, making sure it gets moved to places where BlockPreview is used from

The smaller size is used in "Styles" panel for example and the full size can be seen inside the block switcher or in block inserter for reusable blocks

I'm personally leaning towards the latter

getdave · 2019-07-03T10:08:19Z

@marekhrabe I've found the two-component modal pretty confusing. I'd lean towards number 2 also.

marekhrabe · 2019-07-03T11:28:20Z

I also liked the approach when doing some prototypes locally, it was just a bit more work than expected as those two components do very different things and all places they are used from have to be updated.

With the rate #16113 is getting worked on and introducing a lot of changes, I think it might be wise to wait with this PR for that one to be merged. Otherwise, we will be doing some duplicate work about scaling etc…

packages/block-editor/src/components/block-preview/index.js

marekhrabe · 2019-07-30T00:00:49Z

I'm working separately on the unification of BlockPreview & BlockPreviewContent (WIP #16801).

With @getdave and @retrofox, we plan to spend some more time on various issues around block previews. To be able to ship gradual updates to these components, I would suggest to keep this PR only about the move from name, attributes, innerBlocks into blocks and make sure all preview usages will be migrated to blocks. I'd suggest removing the export from this PR.

Let's finish the support for blocks here, scaling in #16113 and write docs for the preview and export the component as the last thing. Would this make sense?

retrofox · 2019-07-30T20:17:36Z

I've been testing the preview for the components that have defined the styles.

master branch

this branch

Although showing the + button into the preview already happens in prod, I wonder why it looks darker than in the master branch

Not sure why this was introduced.

See #16801

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.

initalAttributes is already an object so no need to spread into an object.

…Array

marekhrabe · 2019-07-30T23:59:07Z

I've done a rebase against the master branch (clean, no conflicts) so I can start integrating with #16801.

marekhrabe · 2019-07-31T00:53:49Z

I have fixed the issue around innerBlocks being undefined which caused an avalanche of bugs in random places. #16033 (comment)

I think this is now ready for a review.

cc: @youknowriad you were suspicious about it and totally right!

getdave · 2019-07-31T06:58:11Z

I've been testing the preview for the components that have defined the styles.

master branch

this branch

Although showing the + button into the preview already happens in prod, I wonder why it looks darker than in the master branch

Suggest we filter this out if previews along with any other Block inserters.

youknowriad

LGTM 👍Thanks for the updates.

I agree that the inserter on the left should be hidden on previews. for me it shows similarly (color) in both master and this branch.

…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

marekhrabe added the [Type] Enhancement A suggestion for improvement. label Jun 7, 2019

marekhrabe requested a review from youknowriad June 7, 2019 09:37

marekhrabe requested review from ellatrix, gziolo and talldan as code owners June 7, 2019 09:37

marekhrabe self-assigned this Jun 7, 2019

youknowriad reviewed Jun 7, 2019

View reviewed changes

getdave changed the title ~~Export BlockPreview component~~ (3P) Export BlockPreview component Jun 17, 2019

obenland mentioned this pull request Jul 12, 2019

(8P) FSE: Dynamic Previews: Technical Explorations Automattic/wp-calypso#33729

Closed

getdave force-pushed the add/export-for-block-preview branch from 1e075b8 to 4d43dad Compare July 23, 2019 15:08

getdave assigned getdave and unassigned marekhrabe Jul 24, 2019

getdave added the Needs Technical Feedback Needs testing from a developer perspective. label Jul 24, 2019

getdave changed the title ~~(3P) Export BlockPreview component~~ (3P) Export BlockPreview component and accept multiple Blocks to preview Jul 24, 2019

obenland changed the title ~~(3P) Export BlockPreview component and accept multiple Blocks to preview~~ (*5P) Export BlockPreview component and accept multiple Blocks to preview Jul 29, 2019

marekhrabe commented Jul 29, 2019

View reviewed changes

packages/block-editor/src/components/block-preview/index.js Outdated Show resolved Hide resolved

marekhrabe and others added 12 commits July 30, 2019 16:57

export BlockPreview

d084523

Update to accept multiple Blocks

51e44f1

Update reusable Blocks preview to use the new single blocks prop

17bab95

Remove unecessary clone of Blocks

74f4a0c

Not sure why this was introduced.

Remove export. This is being handled in another PR

ad31ffd

See #16801

Simplify casting to array via lodash

078ee6b

Utilise cloneBlocks to safely merge attributes on blocks prop

b8493f1

Spread reusable block initial attrs correctly

5117318

Fix cloneBlock fn to check for innerBlocks before attempting to map

80c105a

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

41b0a99

Removes unecessary spread operation

20bc603

initalAttributes is already an object so no need to spread into an object.

block-preview: ensuring to cast BlockEditorProvider value prop as an …

d04cf21

…Array

marekhrabe force-pushed the add/export-for-block-preview branch from 8b77521 to d04cf21 Compare July 30, 2019 23:57

marekhrabe added 2 commits July 30, 2019 17:22

don't call cloneBlock on a non-block object

2b8f1fb

bring back the old behavior of cloneBlock

75f9bb0

marekhrabe force-pushed the add/export-for-block-preview branch from 97c05cb to 75f9bb0 Compare July 31, 2019 00:41

marekhrabe mentioned this pull request Jul 31, 2019

Unify BlockPreview & BlockPreviewContent into one component #16801

Merged

5 tasks

youknowriad approved these changes Jul 31, 2019

View reviewed changes

getdave merged commit 96dcc4f into master Jul 31, 2019

github-actions bot added this to the Gutenberg 6.3 milestone Jul 31, 2019

obenland deleted the add/export-for-block-preview branch August 8, 2019 16:01

ellatrix mentioned this pull request Aug 9, 2019

Record selection changes in history (undo) #16428

Closed

5 tasks

snyk-io bot mentioned this pull request Aug 13, 2024

[Snyk] Upgrade @wordpress/element from 5.28.0 to 6.3.0 Playgirlkaybraz11/wp-xeet#8

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update BlockPreview component to accept multiple Blocks to preview #16033

Update BlockPreview component to accept multiple Blocks to preview #16033

marekhrabe commented Jun 7, 2019 •

edited

Loading

youknowriad left a comment

marekhrabe commented Jun 7, 2019

youknowriad commented Jun 7, 2019

youknowriad commented Jun 7, 2019

getdave commented Jun 17, 2019

marekhrabe commented Jun 17, 2019 •

edited

Loading

getdave commented Jul 3, 2019

marekhrabe commented Jul 3, 2019

marekhrabe commented Jul 30, 2019 •

edited

Loading

retrofox commented Jul 30, 2019

marekhrabe commented Jul 30, 2019

marekhrabe commented Jul 31, 2019 •

edited

Loading

getdave commented Jul 31, 2019

youknowriad left a comment

Update BlockPreview component to accept multiple Blocks to preview #16033

Update BlockPreview component to accept multiple Blocks to preview #16033

Conversation

marekhrabe commented Jun 7, 2019 • edited Loading

Description

How has this been tested?

Places to check for previews

Types of changes

To Demo

youknowriad left a comment

Choose a reason for hiding this comment

marekhrabe commented Jun 7, 2019

youknowriad commented Jun 7, 2019

youknowriad commented Jun 7, 2019

getdave commented Jun 17, 2019

marekhrabe commented Jun 17, 2019 • edited Loading

getdave commented Jul 3, 2019

marekhrabe commented Jul 3, 2019

marekhrabe commented Jul 30, 2019 • edited Loading

retrofox commented Jul 30, 2019

marekhrabe commented Jul 30, 2019

marekhrabe commented Jul 31, 2019 • edited Loading

getdave commented Jul 31, 2019

youknowriad left a comment

Choose a reason for hiding this comment

marekhrabe commented Jun 7, 2019 •

edited

Loading

marekhrabe commented Jun 17, 2019 •

edited

Loading

marekhrabe commented Jul 30, 2019 •

edited

Loading

marekhrabe commented Jul 31, 2019 •

edited

Loading