Blueprints: Rename importFile to importWxr, switch to humanmade/WordPress importer (#1192)

The importFile step works by interacting with HTML form like a user
would. Problem is, the WXR importer requires some interactions with the
forms which we fake by adjusting the POST data before submitting the
form. This approach causes a number of issues listed below.

More context:
#1183.

## Implementation

Refactors the importFile Blueprint step to:

* Be named importWxz. The old name continues to work, though.
* Use the humanmade/WordPress-Importer for importing content – it is
  more reliable than the official wordpress-importer and has a
  convenient PHP API.
* Drop WXZ support – it's a maintenance burden and doesn't add clear
  value.
* Remove dependency on DOMParser – this step should now work in `wp-now`

## Testing instructions

1. Go to
http://localhost:5400/website-server/?import-wxr=https://raw.githubusercontent.com/helgatheviking/Simple-User-Listing/3e38ea3eb3a057424fbae4305cba2fd9f73d896b/demo-content/demo-content.xml&php=8.0&wp=6.5&storage=none&php-extension-bundle=kitchen-sink
2. Confirm the "Simple User Listing Block" page was created
3. Confirm in wp-admin a bunch of user accounts were created
4. Confirm in wp-admin the WordPress Importer plugin was installed

Closes #1183
Closes #379
Closes #1158
Closes #1161

cc @dmsnell

Author: adamziel

packages/docs/site/docs/02-start-using/01-index.md

@@ -101,13 +101,13 @@ You can specify major versions like `wp=6.2` or `php=8.1` and expect the most re
 
 :::
 
-## Import a WXZ or a WXR file
+## Import a WXR file
 
-You can import a WordPress export file by uploading a WXZ, or WXR file in [/wp-admin/](https://playground.wordpress.net/wp-admin/).
+You can import a WordPress export file by uploading a WXR file in [/wp-admin/](https://playground.wordpress.net/wp-admin/).
 
 You can also use [JSON Blueprints](../09-blueprints-api/01-index.md). See [getting started with Blueprints](../09-blueprints-api/01-index.md) to learn more.
 
-This is different from the import feature described above. The import feature exports the entire site, including the database. This import feature imports a WXR or WXZ file into an existing site.
+This is different from the import feature described above. The import feature exports the entire site, including the database. This import feature imports a WXR file into an existing site.
 
 ## Build apps with WordPress Playground
 

packages/docs/site/docs/03-build-an-app/01-index.md

@@ -71,10 +71,10 @@ You can still showcase it on Playground by using [JSON Blueprints](../09-bluepri
 			}
 		},
 		{
-			"step": "importFile",
+			"step": "importWxr",
 			"pluginZipFile": {
 				"resource": "url",
-				"url": "https://your-site.com/starter-content.wxz"
+				"url": "https://your-site.com/starter-content.wxr"
 			}
 		}
 	]

packages/docs/site/docs/08-query-api/01-index.md

@@ -37,7 +37,7 @@ You can go ahead and try it out. The Playground will automatically install the t
 | `multisite`            | `no`                                            | Enables the WordPress multisite mode.                                                                                                                                                                                                                                                                                                                          |
 | `storage`              |                                                 | Selects the storage for Playground: `none` gets erased on page refresh, `browser` is stored in the browser, and `device` is stored in the selected directory on a device. The last two protect the user from accidentally losing their work upon page refresh.                                                                                                 |
 | `import-site`          |                                                 | Imports site files and database from a zip file specified by URL.                                                                                                                                                                                                                                                                                              |
-| `import-content`       |                                                 | Imports site content from a WXR or WXZ file specified by URL. It uses the WordPress Importer, so the default admin user must be logged in.                                                                                                                                                                                                                     |
+| `import-wxr`           |                                                 | Imports site content from a WXR file specified by URL. It uses the WordPress Importer, so the default admin user must be logged in.                                                                                                                                                                                                                            |
 
 For example, the following code embeds a Playground with a preinstalled Gutenberg plugin, and opens the post editor:
 

packages/docs/site/docs/09-blueprints-api/08-examples.md

@@ -99,10 +99,10 @@ blueprint={{
 			}
 		},
 		{
-			"step": "importFile",
+			"step": "importWxr",
 			"file": {
 				"resource": "url",
-				"url": "https://your-site.com/starter-content.wxz"
+				"url": "https://your-site.com/starter-content.wxr"
 			}
 		},
 		{

packages/playground/blueprints/public/blueprint-schema.json

@@ -519,6 +519,33 @@
 					},
 					"required": ["step"]
 				},
+				{
+					"type": "object",
+					"additionalProperties": false,
+					"properties": {
+						"progress": {
+							"type": "object",
+							"properties": {
+								"weight": {
+									"type": "number"
+								},
+								"caption": {
+									"type": "string"
+								}
+							},
+							"additionalProperties": false
+						},
+						"step": {
+							"type": "string",
+							"const": "importWxr"
+						},
+						"file": {
+							"$ref": "#/definitions/FileReference",
+							"description": "The file to import"
+						}
+					},
+					"required": ["file", "step"]
+				},
 				{
 					"type": "object",
 					"additionalProperties": false,

packages/playground/blueprints/src/lib/compile.ts

@@ -20,6 +20,7 @@ const { wpCLI, ...otherStepHandlers } = allStepHandlers;
 const keyedStepHandlers = {
 	...otherStepHandlers,
 	'wp-cli': wpCLI,
+	importFile: otherStepHandlers.importWxr,
 };
 
 import Ajv from 'ajv';
@@ -86,6 +87,16 @@ export function compileBlueprint(
 		...blueprint,
 		steps: (blueprint.steps || []).filter(isStepDefinition),
 	};
+	// Convert legacy importFile steps to importWxr
+	for (const step of blueprint.steps!) {
+		if (typeof step === 'object' && (step as any).step === 'importFile') {
+			(step as any).step = 'importWxr';
+			console.warn(
+				`The "importFile" step is deprecated. Use "importWxr" instead.`
+			);
+		}
+	}
+
 	// Experimental declarative syntax {{{
 	if (blueprint.constants) {
 		blueprint.steps!.unshift({
@@ -133,6 +144,9 @@ export function compileBlueprint(
 				: blueprint.login),
 		});
 	}
+	if (!blueprint.phpExtensionBundles) {
+		blueprint.phpExtensionBundles = [];
+	}
 
 	if (!blueprint.phpExtensionBundles) {
 		blueprint.phpExtensionBundles = [];
@@ -145,7 +159,7 @@ export function compileBlueprint(
 
 	/**
 	 * Download WP-CLI. {{{
-	 * Hardcoding this in the compilt() function is a temporary solution
+	 * Hardcoding this in the compile() function is a temporary solution
 	 * to provide the wpCLI step with the wp-cli.phar file it needs. Eventually,
 	 * each Blueprint step may be able to specify any pre-requisite resources.
 	 * Also, wp-cli should only be downloaded if it's not already present.
@@ -154,10 +168,13 @@ export function compileBlueprint(
 		(step) => typeof step === 'object' && step?.step === 'wp-cli'
 	);
 	if (wpCliStepIndex !== undefined && wpCliStepIndex > -1) {
-		if (!blueprint.phpExtensionBundles.includes('kitchen-sink')) {
-			blueprint.phpExtensionBundles.push('kitchen-sink');
+		if (blueprint.phpExtensionBundles.includes('light')) {
+			blueprint.phpExtensionBundles =
+				blueprint.phpExtensionBundles.filter(
+					(bundle) => bundle !== 'light'
+				);
 			console.warn(
-				`The WP-CLI step used in your Blueprint requires the iconv and mbstring PHP extensions. ` +
+				`The wpCli step used in your Blueprint requires the iconv and mbstring PHP extensions. ` +
 					`However, you did not specify the kitchen-sink extension bundle. Playground will override your ` +
 					`choice and load the kitchen-sink PHP extensions bundle to prevent the WP-CLI step from failing. `
 			);
@@ -183,6 +200,35 @@ export function compileBlueprint(
 	}
 	// }}}
 
+	/**
+	 * Download the WordPress-importer plugin. {{{
+	 * Hardcoding this in the compile() function is a temporary solution
+	 */
+	const importWxrStepIndex = blueprint.steps?.findIndex(
+		(step) => typeof step === 'object' && step?.step === 'importWxr'
+	);
+	if (importWxrStepIndex !== undefined && importWxrStepIndex > -1) {
+		if (blueprint.phpExtensionBundles.includes('light')) {
+			blueprint.phpExtensionBundles =
+				blueprint.phpExtensionBundles.filter(
+					(bundle) => bundle !== 'light'
+				);
+			console.warn(
+				`The importWxr step used in your Blueprint requires the iconv and mbstring PHP extensions. ` +
+					`However, you did not specify the kitchen-sink extension bundle. Playground will override your ` +
+					`choice and load the kitchen-sink PHP extensions bundle to prevent the WP-CLI step from failing. `
+			);
+		}
+		blueprint.steps?.splice(importWxrStepIndex, 0, {
+			step: 'installPlugin',
+			pluginZipFile: {
+				resource: 'url',
+				url: 'https://playground.wordpress.net/wordpress-importer.zip',
+				caption: 'Downloading the WordPress Importer plugin',
+			},
+		});
+	}
+
 	const { valid, errors } = validateBlueprint(blueprint);
 	if (!valid) {
 		const e = new Error(

packages/playground/blueprints/src/lib/steps/export-wxz.ts

@@ -13,10 +13,9 @@ export { mkdir } from './mkdir';
 export { rmdir } from './rmdir';
 export { writeFile } from './write-file';
 export { defineSiteUrl } from './define-site-url';
-export { importFile } from './import-file';
+export { importWxr as importWxr } from './import-wxr';
 export { importWordPressFiles } from './import-wordpress-files';
 export { exportWXR } from './export-wxr';
-export { exportWXZ } from './export-wxz';
 export { unzip } from './unzip';
 export { installPlugin } from './install-plugin';
 export { installTheme } from './install-theme';

packages/playground/blueprints/src/lib/steps/handlers.ts

@@ -0,0 +1,55 @@
+import { StepHandler } from '.';
+import { writeFile } from './write-file';
+import { phpVar } from '@php-wasm/util';
+
+/**
+ * @inheritDoc importWxr
+ * @example
+ *
+ * <code>
+ * {
+ * 		"step": "importWxr",
+ * 		"file": {
+ * 			"resource": "url",
+ * 			"url": "https://your-site.com/starter-content.wxr"
+ * 		}
+ * }
+ * </code>
+ */
+export interface ImportWxrStep<ResourceType> {
+	step: 'importWxr';
+	/** The file to import */
+	file: ResourceType;
+}
+
+/**
+ * Imports a WXR file into WordPress.
+ *
+ * @param playground Playground client.
+ * @param file The file to import.
+ */
+export const importWxr: StepHandler<ImportWxrStep<File>> = async (
+	playground,
+	{ file },
+	progress?
+) => {
+	progress?.tracker?.setCaption('Importing content');
+	await writeFile(playground, {
+		path: '/tmp/import.wxr',
+		data: file,
+	});
+	const docroot = await playground.documentRoot;
+	await playground.run({
+		code: `<?php
+		require ${phpVar(docroot)} . '/wp-load.php';
+		$admin_id = get_users(array('role' => 'Administrator') )[0];
+		$importer = new WXR_Importer( array(
+			'fetch_attachments' => true,
+			'default_author' => $admin_id
+		) );
+		$logger = new WP_Importer_Logger_CLI();
+		$importer->set_logger( $logger );
+		$result = $importer->import( '/tmp/import.wxr' );
+		`,
+	});
+};