WordPress: Fix the srcDoc patch in WordPress block-editor.js

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. More details: #91 (comment)
WordPress · May 22, 2023 · 12c27f4 · 12c27f4
1 parent 949fa8c
commit 12c27f4
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 10 deletions.
diff --git a/packages/playground/compile-wordpress/Dockerfile b/packages/playground/compile-wordpress/Dockerfile
@@ -30,11 +30,8 @@ RUN git clone https://github.com/WordPress/sqlite-database-integration.git \
     --single-branch \
     --depth 1 &&    \
     rm -rf wordpress/wp-content/plugins/sqlite-database-integration/.git && \
-    cat wordpress/wp-content/plugins/sqlite-database-integration/db.copy \
-    | sed "s#{SQLITE_IMPLEMENTATION_FOLDER_PATH}#' . __DIR__ . '/plugins/sqlite-database-integration#g" \
-    | sed 's#{SQLITE_PLUGIN}#sqlite-database-integration#g' \
-    > wordpress/wp-content/db.php && \
     # Required by the SQLite integration plugin:
+    cp wordpress/wp-content/plugins/sqlite-database-integration/db.copy wordpress/wp-content/db.php && \
     cp wordpress/wp-config-sample.php wordpress/wp-config.php
 
 # Separate WordPress static files
@@ -74,8 +71,8 @@ RUN cp -r wordpress wordpress-static && \
 # See https://github.com/WordPress/wordpress-playground/issues/42 for more details
 
 RUN echo '<!doctype html>' > wordpress-static/wp-includes/empty.html &&  \
-    sed -E 's#srcDoc:"[^"]+"#src:"/wp-includes/empty.html"#g' -i wordpress-static/wp-includes/js/dist/block-editor.min.js && \
-    sed -E 's#srcDoc:"[^"]+"#src:"/wp-includes/empty.html"#g' -i wordpress-static/wp-includes/js/dist/block-editor.js
+    sed -E 's#srcDoc:\s*("[^"]+"|[^,\n}]+)#src:"/wp-includes/empty.html"#g' -i wordpress-static/wp-includes/js/dist/block-editor.min.js && \
+    sed -E 's#srcDoc:\s*("[^"]+"|[^,\n}]+)#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 mkdir /root/output/$OUT_FILENAME

diff --git a/packages/playground/remote/public/wp-6.0/wp-includes/js/dist/block-editor.js b/packages/playground/remote/public/wp-6.0/wp-includes/js/dist/block-editor.js
@@ -20944,7 +20944,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>",
+    src:"/wp-includes/empty.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/packages/playground/remote/public/wp-6.1/wp-includes/js/dist/block-editor.js b/packages/playground/remote/public/wp-6.1/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>",
+    src:"/wp-includes/empty.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/packages/playground/remote/public/wp-6.2/wp-includes/js/dist/block-editor.js b/packages/playground/remote/public/wp-6.2/wp-includes/js/dist/block-editor.js
@@ -20332,7 +20332,7 @@ function Iframe(_ref2) {
     // mode. Also preload the styles to avoid a flash of unstyled
     // content.
     ,
-    srcDoc: srcDoc,
+    src:"/wp-includes/empty.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/packages/playground/remote/public/wp-6.2/wp-includes/js/dist/block-editor.min.js b/packages/playground/remote/public/wp-6.2/wp-includes/js/dist/block-editor.min.js