Add support to custom previews #186
Conversation
| const { assets } = useSelect( ( select ) => { | ||
| const settings = select( 'core/block-editor' ).getSettings(); | ||
| return { | ||
| assets: settings.__unstableResolvedAssets, | ||
| }; | ||
| }, [] ); | ||
|
|
There was a problem hiding this comment.
This implementation is necessary to allow the injection of the styles into the iframe preview.
It was based on: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/block-preview/auto.js#L31-L38
| @@ -89,6 +93,7 @@ const DEFAULT_STATE = { | |||
| patterns: [], | |||
| defaultPreferences: {}, | |||
| allowApi: false, | |||
| disableCanvasAnimations: false, | |||
There was a problem hiding this comment.
For our Popup preview use case, we need to use a position: absolute on the preview.
We faced a weird behavior that seemed to be related to the animation library.
Some of the styling properties were kept when switching between previews, causing an issue when switching from an absolute positioned preview to one of the other.
Disabling the animations solved this issue.
There was a problem hiding this comment.
This looks good to me. It also seems it does not break any existing behaviour, so 💯
I'll mention @johngodley here just so that he can give this a look whenever he's back, but I think this is safe to merge and release if you need it before he has a chance to check this.
Summary
On Crowdsignal, we have been using the Isolated Block Editor as the core of our New Editor Experience (NEX), where the users can build their Surveys (Projects) using blocks.
We offer a few distribution channels to the users to share their Projects with their audience.
Some of these distribution channels should appear on the user's page using specific designs like Popups or Cards.
Currently, the Isolated Block Editor only supports the standard devices:
Desktop,Tablet, andMobile.We'd like to provide the users a way to preview these distribution channels from inside the Editor.
The suggested changes will allow:
Testing Instructions
TBD