Custom HTML Block: apply editor-styles to preview mode.

[torounit]

Description

Apply Editor Styles for custom html block preview.

• add export urlRewrite, traverse, wrap in @wordpress/editor.
• add css prop to <Sandbox>

Screenshots

before

after

theme: Twenty Nineteen.

Types of changes

• New feature (non-breaking change which adds functionality)

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.

[youknowriad]

This code is not the fastest one and the main issue is that it will be executed on each subscribe (on each state change). Should we mirror how it's done in the EditorProvider component (when mounting the component)?

Also there's some duplication between these two components. Do you think we can extract the logic somehow?

[torounit]

@youknowriad

Does it mean you need to cache styles?

[youknowriad]

I mean just compute the styles prop on initial mount of the component, store it as state or something and avoid computing it on each render.

[torounit]

@youknowriad I think fixed problem. Cached computed styles.

[youknowriad]

Thanks for the update @torounit This works. I'd prefer if we avoid the global variable though and tie it to the component.

Something like this

https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/provider/index.js#L49-L68

In fact the logic is the same and should probably be extracted to a utility.

[torounit]

@youknowriad
Transform css logic in packages/editor/src/editor-styles. How is this change?

[youknowriad]

Changes are great. I'd still prefer to avoid the let editorStylesCache = []; and computing the CSS in withSelect and instead use componentDidMount for that. (like the provider).

I'll add more reviewers here. I'm mostly happy with this change, I think we're very close.

[torounit]

@youknowriad

how about latest update ?

[youknowriad]

Hi @torounit I pushed a small update, I hope you don't mind. Let me know what you think.

@jasmussen how this looks for you?

[jasmussen]

Judging purely by the screenshot, this seems pretty good to me, 👍 👍

[torounit]

👍

[talldan]

Hey @torounit - I spotted an issue that seems to have resulted from this PR, see #13414.

Just wondering if you have any thoughts on what a potential fix might look like?