Fonts in layout preview are not correct in WP 5.9

[laurelfulford]

As of WP 5.9 RC 2, the layout preview no longer uses the correct fonts.

In WP 5.8.3, the preview looks like this - the headers use a sans-serif font, and the button is bolded:

In 5.9, the Headings use a serif font, and the button is no longer bolded:

In the editor in WP 5.9, the headings and button are still styled correctly:

It may have made more sense to bundle this issue with #681, as they may all be related, so please let me know if I should just move this information over there -- thank you!

[miguelpeixe]

This appears to be a bug on the Gutenberg side, which I just filed an issue: WordPress/gutenberg#37961.

5.9 is introducing iframed editors that are being used on <BlockPreview />, which is the component we use to render the layout previews and also part of the functionality behind the Posts Inserter block.

Iframes do not inherit styles from the parent document so there is a strategy to pass the styles on to the iframed blocks, which appears to be faulty on Firefox.

This strategy is understandably temporary so we shouldn't rely on the fix. We can resolve this issue by:

1. Compile block styles individually and use the block editorStyle attribute
2. Use add_editor_style() for global editor styling until Block editor: add a way to extend style dependency handles for editor content WordPress/gutenberg#37466 is not released

Note that the use of add_editor_style() requires a specific CSS structure.

[laurelfulford]

This Newspack Block preview issue sounds like it might have the same underlying cause 😬 it's also only happening in Firefox: Automattic/newspack-blocks#1013