From 8e5678b9ec9503ebab386729587ff00f75990915 Mon Sep 17 00:00:00 2001 From: Adam Zielinski Date: Fri, 12 Jan 2024 13:24:50 +0100 Subject: [PATCH] Browser: Patch Gutenberg on site import (#938) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Applies the missing Playground patch for Gutenberg when importing a Playground site with an unpatched Gutenberg bundled. Without this PR, importing such a site zip file results in this broken state: ![Screenshot 2024-01-03 at 10 07 35 AM](https://github.com/WordPress/wordpress-playground/assets/205419/efa617f6-f326-42c9-890d-a3719c2407a1) Here’s a replication link: https://github.com/annezazu/playground/pull/2 ## Testing instructions Go to http://localhost:5400/website-server/?import-site=https%3A%2F%2Fraw.githubusercontent.com%2Fannezazu%2Fplayground%2Fplayground-changes-2023-12-20T17-29-06-815Z%2Fplayground%2Fplayground.zip&url=/wp-admin/post-new.php and confirm the inserter button is styled correctly. It would be great to ship an E2E test as a follow-up PR. This one is important enough that I won't block it on lack of a test. cc @annezazu --- .../steps/apply-wordpress-patches/index.ts | 23 ++++++++++++++++++ .../blueprints/src/lib/steps/handlers.ts | 2 +- ...p-content.ts => import-wordpress-files.ts} | 11 +++++++++ .../blueprints/src/lib/steps/index.ts | 2 +- .../src/lib/steps/install-plugin.ts | 24 +------------------ 5 files changed, 37 insertions(+), 25 deletions(-) rename packages/playground/blueprints/src/lib/steps/{import-wp-content.ts => import-wordpress-files.ts} (92%) 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 7053145c9c..36bee6495c 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 @@ -197,6 +197,29 @@ function randomString(length: number) { return result; } +export async function applyGutenbergPatchOnce(playground: UniversalPHP) { + /** + * Ensures the block editor iframe is controlled by the playground + * service worker. Tl;dr it must use a HTTP URL as its src, not a + * data URL, blob URL, or a srcDoc like it does by default. + * + * @see https://github.com/WordPress/wordpress-playground/pull/668 + */ + const documentRoot = await playground.documentRoot; + if ( + (await playground.isDir( + documentRoot + '/wp-content/plugins/gutenberg' + )) && + !(await playground.fileExists(documentRoot + '/.gutenberg-patched')) + ) { + await playground.writeFile(documentRoot + '/.gutenberg-patched', '1'); + await makeEditorFrameControlled(playground, documentRoot, [ + `${documentRoot}/wp-content/plugins/gutenberg/build/block-editor/index.js`, + `${documentRoot}/wp-content/plugins/gutenberg/build/block-editor/index.min.js`, + ]); + } +} + /** * * Pair the site editor's nested iframe to the Service Worker. diff --git a/packages/playground/blueprints/src/lib/steps/handlers.ts b/packages/playground/blueprints/src/lib/steps/handlers.ts index e1b889a3cc..f5d09afdd2 100644 --- a/packages/playground/blueprints/src/lib/steps/handlers.ts +++ b/packages/playground/blueprints/src/lib/steps/handlers.ts @@ -14,7 +14,7 @@ export { rmdir } from './rmdir'; export { writeFile } from './write-file'; export { defineSiteUrl } from './define-site-url'; export { importFile } from './import-file'; -export { importWordPressFiles } from './import-wp-content'; +export { importWordPressFiles } from './import-wordpress-files'; export { exportWXR } from './export-wxr'; export { exportWXZ } from './export-wxz'; export { unzip } from './unzip'; diff --git a/packages/playground/blueprints/src/lib/steps/import-wp-content.ts b/packages/playground/blueprints/src/lib/steps/import-wordpress-files.ts similarity index 92% rename from packages/playground/blueprints/src/lib/steps/import-wp-content.ts rename to packages/playground/blueprints/src/lib/steps/import-wordpress-files.ts index 42ac7b8f69..3753c84b2a 100644 --- a/packages/playground/blueprints/src/lib/steps/import-wp-content.ts +++ b/packages/playground/blueprints/src/lib/steps/import-wordpress-files.ts @@ -3,6 +3,10 @@ import { unzip } from './unzip'; import { dirname, joinPaths, phpVar } from '@php-wasm/util'; import { UniversalPHP } from '@php-wasm/universal'; import { wpContentFilesExcludedFromExport } from '../utils/wp-content-files-excluded-from-exports'; +import { + applyGutenbergPatchOnce, + applyWordPressPatches, +} from './apply-wordpress-patches'; /** * @inheritDoc importWordPressFiles @@ -122,6 +126,13 @@ export const importWordPressFiles: StepHandler< require ${upgradePhp}; `, }); + + // Ensure the editor frame is controlled, see the + // applyGutenbergPatchOnce() function for details. + await applyWordPressPatches(playground, { + makeEditorFrameControlled: true, + }); + await applyGutenbergPatchOnce(playground); }; async function removePath(playground: UniversalPHP, path: string) { diff --git a/packages/playground/blueprints/src/lib/steps/index.ts b/packages/playground/blueprints/src/lib/steps/index.ts index fdd5c5e45e..17d431cc83 100644 --- a/packages/playground/blueprints/src/lib/steps/index.ts +++ b/packages/playground/blueprints/src/lib/steps/index.ts @@ -26,7 +26,7 @@ import { WriteFileStep } from './write-file'; import { DefineWpConfigConstsStep } from './define-wp-config-consts'; import { ActivateThemeStep } from './activate-theme'; import { UnzipStep } from './unzip'; -import { ImportWordPressFilesStep } from './import-wp-content'; +import { ImportWordPressFilesStep } from './import-wordpress-files'; import { ImportFileStep } from './import-file'; export type Step = GenericStep; diff --git a/packages/playground/blueprints/src/lib/steps/install-plugin.ts b/packages/playground/blueprints/src/lib/steps/install-plugin.ts index cd51ed763f..cb130fc97e 100644 --- a/packages/playground/blueprints/src/lib/steps/install-plugin.ts +++ b/packages/playground/blueprints/src/lib/steps/install-plugin.ts @@ -1,8 +1,7 @@ -import { UniversalPHP } from '@php-wasm/universal'; import { StepHandler } from '.'; import { installAsset } from './install-asset'; import { activatePlugin } from './activate-plugin'; -import { makeEditorFrameControlled } from './apply-wordpress-patches'; +import { applyGutenbergPatchOnce } from './apply-wordpress-patches'; import { zipNameToHumanName } from '../utils/zip-name-to-human-name'; /** @@ -93,24 +92,3 @@ export const installPlugin: StepHandler> = async ( console.error(error); } }; - -async function applyGutenbergPatchOnce(playground: UniversalPHP) { - /** - * Ensures the block editor iframe is controlled by the playground - * service worker. Tl;dr it must use a HTTP URL as its src, not a - * data URL, blob URL, or a srcDoc like it does by default. - * - * @see https://github.com/WordPress/wordpress-playground/pull/668 - */ - - if ( - (await playground.isDir('/wordpress/wp-content/plugins/gutenberg')) && - !(await playground.fileExists('/wordpress/.gutenberg-patched')) - ) { - await playground.writeFile('/wordpress/.gutenberg-patched', '1'); - await makeEditorFrameControlled(playground, '/wordpress', [ - `/wordpress/wp-content/plugins/gutenberg/build/block-editor/index.js`, - `/wordpress/wp-content/plugins/gutenberg/build/block-editor/index.min.js`, - ]); - } -}