Use Gutenberg Site Editor component for pattern previews

[shaunandrews]

The upcoming Site Editor includes a way to "focus" on a particular template part. It looks something like this:

https://user-images.githubusercontent.com/191598/142905771-0a0a3513-adff-4920-8966-26c429e8957a.mp4

It would be an improvement to make use of this component for previewing on the pattern detail pages (like https://wordpress.org/patterns/pattern/large-background-image-with-title-and-description/)

If we can't use the exact same component, perhaps we can update the styles of ours to look similar.

[ryelle]

This uses a resizableEditor component which is not exported, so we can't use it directly (we also don't need the "editor" functionality), but can probably take the gist of it from packages/edit-site/src/components/block-editor/resizable-editor.js.

[StevenDufresne]

It would be an improvement to make use of this component for previewing on the pattern detail pages

Can you go into detail as to why it would be an improvement to use the actual component?

[ryelle]

I don't think the component itself is the important part, it's matching the look of our preview to be similar. I imagine the reasoning is to keep the interaction patterns consistent between the Pattern Directory site and the editor.