Support previewing Gutenberg Pull Requests

[adamziel]

Description

Adds support for previewing Gutenberg Pull Requests via the a gutenberg-pr query parameter:

https://playground.wordpress.net/wordpress.html?gutenberg-pr=47739&url=/wp-admin/plugins.php?test=test

My test PR: WordPress/gutenberg#47739

Implementation

The plugin bundle is downloaded from GitHub CI and installed by applying the following Blueprint:

function applyGutenbergPRSteps(prNumber: number): StepDefinition[] {
	return [
		{
			step: 'mkdir',
			path: '/wordpress/pr',
		},
		{
			step: 'writeFile',
			path: '/wordpress/pr/pr.zip',
			data: {
				resource: 'url',
				url: `/plugin-proxy?org=WordPress&repo=gutenberg&workflow=Build%20Gutenberg%20Plugin%20Zip&artifact=gutenberg-plugin&pr=${prNumber}`,
				caption: `Downloading Gutenberg PR ${prNumber}`,
			},
			progress: {
				weight: 2,
				caption: `Applying Gutenberg PR ${prNumber}`,
			},
		},
		{
			step: 'unzip',
			zipPath: '/wordpress/pr/pr.zip',
			extractToPath: '/wordpress/pr',
		},
		{
			step: 'installPlugin',
			pluginZipFile: {
				resource: 'vfs',
				path: '/wordpress/pr/gutenberg.zip',
			},
		},
	];
}

Gutenberg PR preview from playground.wordpress.net can be embedded in other apps via an iframe.

To implement your own PR previewer that pulls data from another repo, you'll need to expose an API endpoint to download the ZIP bundle and then plug it in the writeFile step above. Once you have that, here's how you'd apply a custom blueprint:

import { startPlaygroundWeb } from "https://unpkg.com/@wp-playground/client@0.1.32/index.js";
startPlaygroundWeb({
	iframe,
	remoteUrl: `https://playground.wordpress.net/remote.html`,
	blueprint: {
		steps: applyPR( 47339 )
	}
})

function applyPR( prNumber ) {
	return [
		{
			step: 'mkdir',
			path: '/wordpress/pr',
		},
		// ...
	];
}

[adamziel]

With Playground Blueprints, a PR bundle could be just another Resource.

[adamziel]

I redid this PR with Blueprints and, other than the PHP Proxy, it's took about 60 lines of code (vs 1000+ before we had Blueprints). Not bad!