Page layout picker: Fix broken web fonts in page layout picker large preview

[andrewserong]

In the page layout picker, the existing code that looks to copy over styles to the iframe no longer targets the correct style tags, causing the preview to miss crucial style tags for rendering the web fonts from Global Styles correctly.

This change targets getting the styles from where they're inserted in the visual editor in Gutenberg, which is as children of the .edit-post-visual-editor node (the relevant line in Gutenberg is here).

This fixes the rendering issue reported in #49742.

Changes proposed in this Pull Request

• In the page layout picker, target only the style tags within the post body that we require to adequately style the preview, to avoid CSS conflicts that broke web fonts in the preview.
• Note: the whitespace change in the readme.txt file is just to trigger an ETK build. I'll remove the whitespace change before merging.

Screenshot

Before:

After:

Testing instructions

• Apply this change in your sandbox (D57313-code) and set your sandboxed test site to use a theme that uses custom fonts / Global styles, e.g. Balasana, Maywood, or Barnsbury
• Go to add a new page, and browse through the layouts and compare against the reported issue (Starter Page Templates: large iFrame preview is not rendering Google fonts #49742) — the styles should look much closer to how the layout looks when inserted in the editor.
• Insert a layout.
• From the top right in the editor, go to Global Styles and update the fonts for the site, and hit the publish button within the Global Styles plugin.
• Go to add a new page and ensure the preview renders with the global styles correctly.
• Switch your site to a theme that doesn't use Global Styles, e.g. Twenty Twenty or Twenty Twenty One, and ensure the preview renders correctly (or at least better than in the reported issue)

Related to #49742

[matticbot]

Test live: https://calypso.live/?branch=try/fixes-for-page-layout-picker

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

Caution: This PR affects files in the Editing Toolkit Plugin on WordPress.com
Please ensure your changes work on WordPress.com before merging.

D57313-code has been created so you can easily test it on your sandbox. See this FieldGuide page about developing the Editing Toolkit Plugin for more info: PCYsg-ly5-p2

[aaronrobertshaw]

LGTM. Everything tested well. 🚢

• Tested with Balasana & Maywood
• New page layout previews look much closer to how they look after inserting into the editor.
• Inspecting styles within the previews showed correct Google fonts being applied
• Previews also honoured prior selections for custom fonts via the Customizer
• After applying Global Styles, the previews faithfully reflected those choices
• Switching back to a non Global Styles theme, the previews reflected that themes fonts

[ramonjd]

Before:

After:

👍