WordPress: Fix the srcDoc patch in WordPress block-editor.js (#408)

Pookie717 · Pookie717 · commit 27551ad5fbb0 · 2023-05-22T16:03:04.000+02:00
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: WordPress/wordpress-playground#91 (comment)
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

Original file line number	Diff line number	Diff line change
`@@ -20944,7 +20944,7 @@ function Iframe(_ref3, ref) {`
`20944`	`20944`	`ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, setRef]),`
`20945`	`20945`	`tabIndex: tabIndex // Correct doctype is required to enable rendering in standards mode`
`20946`	`20946`	`,`
`20947`		`- srcDoc: "<!doctype html>",`
	`20947`	`+ src:"/wp-includes/empty.html",`
`20948`	`20948`	`title: (0,external_wp_i18n_namespaceObject.__)('Editor canvas')`
`20949`	`20949`	`}), 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", {`
`20950`	`20950`	`ref: headRef`
Original file line number	Diff line number	Diff line change
`@@ -22997,7 +22997,7 @@ function Iframe(_ref3, ref) {`
`22997`	`22997`	`ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, setRef]),`
`22998`	`22998`	`tabIndex: tabIndex // Correct doctype is required to enable rendering in standards mode`
`22999`	`22999`	`,`
`23000`		`- srcDoc: "<!doctype html>",`
	`23000`	`+ src:"/wp-includes/empty.html",`
`23001`	`23001`	`title: (0,external_wp_i18n_namespaceObject.__)('Editor canvas')`
`23002`	`23002`	`}), 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", {`
`23003`	`23003`	`ref: headRef`
Original file line number	Diff line number	Diff line change
`@@ -20332,7 +20332,7 @@ function Iframe(_ref2) {`
`20332`	`20332`	`// mode. Also preload the styles to avoid a flash of unstyled`
`20333`	`20333`	`// content.`
`20334`	`20334`	`,`
`20335`		`- srcDoc: srcDoc,`
	`20335`	`+ src:"/wp-includes/empty.html",`
`20336`	`20336`	`title: (0,external_wp_i18n_namespaceObject.__)('Editor canvas')`
`20337`	`20337`	`}), 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", {`
`20338`	`20338`	`ref: headRef`