[wp-trac] [WordPress Trac] #58672: Font asset files not loading within iframed editor

[WordPress Trac]

#58672: Font asset files not loading within iframed editor
-------------------------------------------------+-------------------------
 Reporter:  ironprogrammer                       |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  6.3
Component:  Editor                               |     Version:  trunk
 Severity:  normal                               |  Resolution:
 Keywords:  has-patch needs-testing has-         |     Focuses:
  testing-info has-screenshots gutenberg-merge   |
-------------------------------------------------+-------------------------
Changes (by ironprogrammer):

 * keywords:  has-patch =>
     has-patch needs-testing has-testing-info has-screenshots gutenberg-
     merge


Comment:

 == Testing Instructions
 For [https://github.com/WordPress/wordpress-develop/pull/4759 PR #4759].

 === Setup
 - In a clean install of 6.3-beta2 or from `trunk` (6.3-beta2-56100-src).
 - The Gutenberg plugin ''deactivated''.

 === Steps to Reproduce and Test Patch
 Perform the following steps in:
 - **Site Editor:** In ''Appearance > Editor'', activate the editor, and
 open ◐ ''Styles > Typography > Headings''.
 - **Post Editor:** In ''Posts'' with a new or existing post, add a Heading
 block and use the ''Typography > Fonts'' picker. (You may need to activate
 the font picker through the three vertical dots to the side of
 Typography.)

 1. Set the Font to "IBM Plex Mono".
 2. 👀 Observe that the displayed font is the fallback `monospace` (Figure
 1).
 3. 👀 Open the browser's inspector tool and observe that in the editor's
 iframed document, the `style#wp-block-library-inline-css` element's
 `@font-face` definitions use relative paths, e.g. `/wp-
 content/themes/twentytwentythree/assets/fonts/ibm-plex-mono/IBMPlexMono-
 Regular.woff2`.

 4. 🩹 Apply patch.

 5. Repeat Steps 2-3:
 6. 👀 In Step 2, observe that the displayed font is "IBM Plex Mono"
 (Figure 2).
 7. 👀 In Step 3, observe that the font file paths are absolute, e.g. `http
 ://wp-src.test/wp-content/themes/twentytwentythree/assets/fonts/ibm-plex-
 mono/IBMPlexMono-Regular.woff2`.

 === Expected Results
 - ✅ After patch, paths to font files should be absolute, and render the
 correct face in the iframe.

 === Supplemental Artifacts
 ''Figure 1: Fallback `monospace` font (on macOS Ventura).''
   [[Image(https://cldup.com/yeT1JITorS.png)]]

 ''Figure 2: "IBM Plex Mono" font
 ([https://fonts.google.com/specimen/IBM+Plex+Mono?query=ibm+plex+mono
 specimen at Google Fonts]).''
   [[Image(https://cldup.com/rAvlimsMXk.png)]]

 === Additional Information
 Note that font faces displayed on the site frontend, as well as in the
 post editor ''with meta boxes active'', should continue to display as
 expected. In these contexts the editor is not iframed, so the URLs should
 work before (relative) and after (absolute).

 (Meta boxes can be enabled in a vanilla install from the post editor by
 clicking the ''three vertical dots > Preferences > Panels > Additional'',
 then toggling on "Custom fields". Click the panel's displayed reload
 button to apply the change.)

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/58672#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform