(8P) FSE: Dynamic Previews: Technical Explorations

[obenland]

Expand Gutenberg's Block Preview component to accept a list of blocks and editor settings, to render a preview of a page template.

As this is being worked on, please make sure to

1. Document all problems as they arise, so they can be fixed in Gutenberg.
2. Keep @youknowriad closely involved.

The goal here is to assess the current state of the Block Preview component and document the next steps necessary for us to be able to use it in the template selector. Ideally, it will result in a list of tasks with enough detail that they can be estimated and prioritized.

See paAmJe-sC-p2.
See WordPress/gutenberg#16033.

[obenland]

@jasmussen's proof of concept of how dynamically generated preview thumbnails could be created: https://codepen.io/joen/pen/KjKoYJ

More context: p1560249679008000-slack-gutenpages

[jasmussen]

Wanted to share work started on improving the preview component itself:

WordPress/gutenberg#16113

When done, you can feed the component a width and a height and then it should handle the scaling.

[frontdevde]

I thought I'll keep a running list of tasks here that I'll update as I come across relevant tasks.

Gutenberg

• Gutenberg: dynamic responsive scaling of the BlockPreview
  • The BlockPreview should responsively fill the available space while maintaining the correct aspect ratio based on the true size of the previewed content.
  • PR in progress: Autoscaling/sizing Block previews WordPress/gutenberg#16113

• Gutenberg: allow passing blocks as an array to BlockPreview
  • Currently, the BlockPreview component expects name, attributes and innerBlocks props to render the preview.
  • With the goal of exposing this component, it would be better to allow passing blocks as an array instead of these granular props.
  • When scoping this task we should factor in that we'll need to update all existing instances of BlockPreview to the new approach.
  • For details see Update BlockPreview component to accept multiple Blocks to preview WordPress/gutenberg#16033 (review)

• Gutenberg: streamline BlockPreview component variants
  • We should consider combining the use cases of BlockPreviewContent and BlockPreview to just BlockPreview with a prop to handle scaling. The "Preview" heading should be removed from the component in favor of using it directly as a heading solely in places where it's needed.
  • For details see Update BlockPreview component to accept multiple Blocks to preview WordPress/gutenberg#16033 (comment)

• Gutenberg: expose BlockPreview so it can be used by plugins
  • BlockPreview would be a useful component for plugin developers that want to show a preview outside the main editor area. We'd thus want to expose it e.g.wp.blockEditor.BlockPreview
  • For details see Update BlockPreview component to accept multiple Blocks to preview WordPress/gutenberg#16033

FSE/SPT

• tbd