Custom HTML block: Preview styles do not match the rest of the editor

[ZebulanStanphill]

The issue

The styling used for the preview mode of the Custom HTML block do not match the rest of the editor.

Steps to reproduce

1. Switch to the Code Editor in Gutenberg. (Ctrl+Shift+Alt+M)
2. Copy this HTML into the editor:

<!-- wp:heading -->
<h2>Heading block</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Paragraph block blah blah blah blah blah blah</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<h2>Heading in a Custom HTML block</h2>
<p>Paragraph in a Custom HTML block</p>
<!-- /wp:html -->

3. Switch back to the Visual Editor. (Ctrl+Shift+Alt+M)
4. Enable the Preview mode of the Custom HTML block.
5. Notice that the styling of the Preview mode of the Custom HTML block does not match the rest of the editor.

Expected behavior

The preview mode of the Custom HTML block should use styling that looks like the rest of the editor.

Related issues and PRs

• Styles: add Editor Styles support #9008

[karmatosed]

I don't have an issue with consistency here in styling. Want to create a PR?

[ZebulanStanphill]

@karmatosed I don't know how. 😞 I haven't finished reading https://git-scm.com/book/en/v2/ yet.

Anyway, it looks like the Custom HTML block uses an <iframe> to render its preview, which is probably why the styling from the rest of the editor has no effect. The styling would have to be duplicated or imported somehow into the <iframe>.

Note also that this relates to #9008.

[karmatosed]

@ZebulanStanphill no worries at all and keep at the learning, it's great to see. I am sure someone can help with this.

[saltnpixels]

I am noticing the same issue I think. I created an editor-style.css and applied it using 'enqueue_block_editor_assets' hook. but it does not affect the html block preview mode.

[lkraav]

This also landed on our radar, because we are trying to get our Custom Elements to render inside HTML block preview as normal, but in order for that to happen, <iframe> element needs to load our JS bundle.

Did anybody take a look at the HTML block implementation details yet to understand what needs to patched how to get custom assets enqueued inside the <iframe>? cc @paulkirspuu

[pento]

WP46118 was closed as a duplicate.

[tellthemachines]

@saltnpixels it should work if you add_theme_support( 'editor-styles' ); in your theme setup, and then enqueue the stylesheet with add_editor_style. Themes that use editor styles in this way have consistent styles in the HTML block preview: e.g. Twenty Nineteen. I believe this is not an editor issue, but a theme issue.

[stevygee]

Just fixed this issue in one of my themes yesterday: In addition to the steps mentioned by @tellthemachines, I had to remove a wrapping .edit-post-visual-editor { ... } in my editor stylesheet (from early Gutenberg days) in order for this to work. I also use body {} for general font settings again, because this selector now get rewritten by WP so it only applies to the editor content (more details in the handbook).

[noisysocks]

Reported here too: https://core.trac.wordpress.org/ticket/48211

[Azragh]

@tellthemachines isn't there a way to get this to work without enqueuing styles with add_editor_style()? I moved away from that function to be able to split my styles in seperate SCSS files for frontend, TinyMCE and Gutenberg (and some other reasons) - so I can't use that one.. I have to use enqueue_block_editor_assets() ..