Browser: Patch Gutenberg on site import (#938)

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: annezazu/playground#2

## Testing instructions

Go to
http://localhost:5400/website-server/?import-site=https%3A%2F%2Fraw.neting.cc%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

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.

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';

packages/playground/blueprints/src/lib/steps/import-wp-content.ts → 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) {

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<FileReference>;

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<InstallPluginStep<File>> = 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`,
-		]);
-	}
-}