From 57d986c1d7c7d188925e0442b7bf2aff1ae8ccdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Mon, 16 Oct 2023 10:31:52 +0200 Subject: [PATCH 1/2] WP: Apply the "controlled iframe" patch in JavaScript, not in Dockerfile This PR moves applying a WordPress patch from the Dockerfile, where WP is built into a `.data` file, to JavaScript, where it can be applied to any arbitrary WordPress installation. This is needed to patch WordPress branches in Pull Request previewer. See #700. Testing instructions: 1. Run Playground with `npm run start` 2. Go to the block editor 3. Confirm that inserter's CSS is loaded (black + icon) 4. Install the Gutenberg plugin 5. Confirm that inserter's CSS is still loaded Related to #668, #646. --- .../blueprints/public/blueprint-schema.json | 3 + .../steps/apply-wordpress-patches/index.ts | 109 ++++++++++++++++++ .../src/lib/steps/install-plugin.ts | 81 +------------ .../playground/compile-wordpress/Dockerfile | 37 ------ .../build-assets/controlled-iframe.js | 56 --------- 5 files changed, 115 insertions(+), 171 deletions(-) delete mode 100644 packages/playground/compile-wordpress/build-assets/controlled-iframe.js diff --git a/packages/playground/blueprints/public/blueprint-schema.json b/packages/playground/blueprints/public/blueprint-schema.json index 73192efcf3..fd132ab458 100644 --- a/packages/playground/blueprints/public/blueprint-schema.json +++ b/packages/playground/blueprints/public/blueprint-schema.json @@ -190,6 +190,9 @@ }, "disableWpNewBlogNotification": { "type": "boolean" + }, + "makeEditorFrameControlled": { + "type": "boolean" } }, "required": ["step"] diff --git a/packages/playground/blueprints/src/lib/steps/apply-wordpress-patches/index.ts b/packages/playground/blueprints/src/lib/steps/apply-wordpress-patches/index.ts index 36c23cbcc9..6049d8dcec 100644 --- a/packages/playground/blueprints/src/lib/steps/apply-wordpress-patches/index.ts +++ b/packages/playground/blueprints/src/lib/steps/apply-wordpress-patches/index.ts @@ -14,6 +14,7 @@ export interface ApplyWordPressPatchesStep { patchSecrets?: boolean; disableSiteHealth?: boolean; disableWpNewBlogNotification?: boolean; + makeEditorFrameControlled?: boolean; } export const applyWordPressPatches: StepHandler< @@ -40,6 +41,12 @@ export const applyWordPressPatches: StepHandler< if (options.disableWpNewBlogNotification === true) { await patch.disableWpNewBlogNotification(); } + if (options.makeEditorFrameControlled === true) { + await makeEditorFrameControlled(php, patch.wordpressPath, [ + `${patch.wordpressPath}/wp-includes/js/dist/block-editor.js`, + `${patch.wordpressPath}/wp-includes/js/dist/block-editor.min.js`, + ]); + } }; class WordPressPatcher { @@ -123,3 +130,105 @@ function randomString(length: number) { result += chars[Math.floor(Math.random() * chars.length)]; return result; } + +/** + * + * 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