Block Previews: dynamic preview size

[scruffian]

Description

This allows block to specify the viewport width for their example. This is useful because some block previews look better at smaller viewport sizes.

How has this been tested?

In chrome.

Screenshots

Before:

After:

Types of changes

New feature

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR. .

[creativecoder]

I like the idea of being able to customize the preview in this way.

Because of the way the BlockPreview component scales the preview, it's difficult to convey what this property does. Maybe the property on the example could be renamed to be baseWidth, scaleWidth, or similar to try and make it clearer?

[ItsJonQ]

@scruffian Neat! Prop pass through with value fallback :)

I lack a bit of project context for this update. In isoloation, the change makes sense to me.

For implementation, I feel like we can clean up the && checks by using lodash.get (since the package already has lodash as a dependency)

That way, you can do something like this:

import { get } from 'lodash'

const viewportWidth = get(hoveredItemBlockType, 'example.viewportWidth', 500)

Would love your feedback 😊

[scruffian]

Great idea thanks! Done in ec596e0.

[creativecoder]

@ItsJonQ Curious, does gutenberg support the optional chaining operator (meaning, is it transpiled in the build tools for browser compatibility)?

[ItsJonQ]

@creativecoder Good question! I remember this was mentioned recently. It looks like something was merged #19831

I haven't personally tried it yet. @gziolo Is this project optional chaining ready? :D

[gziolo]

It should support, however in practice there was a blocker discovered by @aduth and filed in #19952. docgen tool that we use for documentation doesn't support ES2019 and ES2020 😞

[youknowriad]

The preview is supposed to scale to the container width no matter the "viewportSize". Why do you think it's not happening with this block?

[scruffian]

@youknowriad that's not the behaviour I observe when I've used it for any blocks - the viewportWidth sets a scale for the block, so that with a large viewportWidth text is scaled down. Is that not how it should work?

[youknowriad]

@scruffian As you can test with the Core blocks (columns, image, cover,...), the preview is scaled to match the panel size.

It seems like there's something going wrong with the blocks you're trying to preview. Should we dig deeper to try to understand why it doesn't behave as expected?

[scruffian]

Ok, I think I got to the bottom of this. The blocks I was trying to preview were in <div>s that were 100% wide, so the BlockPreview was sizing them down. I will solve this by setting the block wrapper to have display: inline-block so that the block stretches to fit.