Pair the site editor's nested iframe to the Service Worker.

The site editor was initiating network requests that weren't routed through the service worker. That's a known bug in Chrome, Firefox, and a few other browsers based on these two. The issue is only with the iframes using srcDoc and src="about:blank" as they fail to inherit the root site's service worker. Gutenberg loads the site editor using <iframe srcDoc="<!doctype html"> to force the standards mode and not the quirks mode: WordPress/gutenberg#38855 This commit patches the site editor to achieve the same result via <iframe src="/doctype.html"> and a doctype.html file containing just `<!doctype html>`. This allows the iframe to inherit the service worker and correctly load all the css, js, fonts, images, and other assets. Ideally this issue would be fixed directly in Gutenberg and the patch below would be removed. See #42 for more details
WordPress · Dec 2, 2022 · b7ca737 · b7ca737
1 parent 4349b90
commit b7ca737
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/build/wp-includes/empty.html b/build/wp-includes/empty.html
@@ -0,0 +1 @@
+<!doctype html>
diff --git a/build/wp-includes/js/dist/block-editor.js b/build/wp-includes/js/dist/block-editor.js
@@ -22997,7 +22997,7 @@ function Iframe(_ref3, ref) {
     ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, setRef]),
     tabIndex: tabIndex // Correct doctype is required to enable rendering in standards mode
     ,
-    srcDoc: "<!doctype html>",
+
     title: (0,external_wp_i18n_namespaceObject.__)('Editor canvas')
   }), iframeDocument && (0,external_wp_element_namespaceObject.createPortal)((0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)("head", {
     ref: headRef

diff --git a/build/wp-includes/js/dist/block-editor.min.js b/build/wp-includes/js/dist/block-editor.min.js
diff --git a/src/wordpress-wasm/wordpress/Dockerfile b/src/wordpress-wasm/wordpress/Dockerfile
@@ -36,6 +36,37 @@ RUN cp -r wordpress wordpress-static && \
     # Remove all empty directories
     find . -type d -empty -delete
 
+# Pair the site editor's nested iframe to the Service Worker.
+# 
+# Without the patch below, the site editor initiates network requests that
+# aren't routed through the service worker. That's a known browser issue:
+# 
+# * https://bugs.chromium.org/p/chromium/issues/detail?id=880768
+# * https://bugzilla.mozilla.org/show_bug.cgi?id=1293277
+# * https://github.com/w3c/ServiceWorker/issues/765
+# 
+# The problem with iframes using srcDoc and src="about:blank" as they
+# fail to inherit the root site's service worker.
+# 
+# Gutenberg loads the site editor using <iframe srcDoc="<!doctype html">
+# to force the standards mode and not the quirks mode:
+# 
+# https://github.com/WordPress/gutenberg/pull/38855
+# 
+# This commit patches the site editor to achieve the same result via
+# <iframe src="/doctype.html"> and a doctype.html file containing just
+# `<!doctype html>`. This allows the iframe to inherit the service worker
+# and correctly load all the css, js, fonts, images, and other assets.
+# 
+# Ideally this issue would be fixed directly in Gutenberg and the patch
+# below would be removed.
+# 
+# See https://github.com/WordPress/wordpress-wasm/issues/42 for more details
+
+RUN echo '<!doctype html>' > wordpress-static/wp-includes/empty.html &&  \
+    gsed -E 's#srcDoc:"[^"]+"#src:"/wp-includes/empty.html"#g' -i wordpress-static/wp-includes/js/dist/block-editor.min.js && \
+    gsed -E 's#srcDoc:"[^"]+"#src:"/wp-includes/empty.html"#g' -i wordpress-static/wp-includes/js/dist/block-editor.js
+
 # Move the static files to the final output directory
 RUN mv wordpress-static/* /root/output