Add WordPress Playground plugin (#154)

Adds a `playground` plugin for plugin-preview functionality and
renames the plugin to WordPress Playground.

Requires:
WordPress/wordpress-playground#745 .
https://github.com/WordPress/wordpress-playground/issues/419

## Why?

Users want to be able to preview plugins on their own sites before
actually committing to installing them live.

## Testing Instructions

- Checkout the project and copy the plugin to your local WordPress
install:
```bash
git checkout sm-collector-plugin
cp packages/collector/ [PATH_TO_YOUR_WORDPRESS]/wp-content/plugins/
```
- Open your local WordPress install and activate the WordPress
Playground plugin
- Start Playground by clicking on Tools > Sandbox Site in wp-admin
- After the site loads it should have the same content as your site
(files and database)

### Testing Previews
- Install this plugin on a site
- Navigate to `plugins` > `add new`
- Search for "Akismet"
- You should now see a `Preview Now` button next to the `Install Now`
button.
- Click `Preview now`, and you should see Playground boot your site with
the plugin activated.

---------

Co-authored-by: Sean Morris <[email protected]>
Co-authored-by: Adam Zielinski <[email protected]>

packages/playground/.editorconfig

@@ -0,0 +1,7 @@
+[*]
+trim_trailing_whitespace = true
+insert_final_newline     = true
+indent_style             = tab
+indent_size              = 4
+end_of_line              = lf
+charset                  = utf-8

packages/playground/NOTICE

@@ -0,0 +1,10 @@
+WordPress Playground
+Copyright 2023 "The Contributors"
+
+Licensed under the GNU GENERAL PUBLIC LICENSE, Version 2.0, June 1991
+(the "License"); you may not use this file except in compliance with
+the License.
+
+You may obtain a copy of the License at:
+
+https://www.gnu.org/licenses/old-licenses/gpl-2.0.txt

packages/playground/README.md

@@ -0,0 +1,13 @@
+# WordPress Playground
+
+_v0.0.0_
+
+A WordPress plugin for collecting the content of a site and spinning up WordPress Playground with a copy of the site content.
+
+The current version of the plugin allows you to preview a plugin installation from the WordPress.org repository in a WordPress Playground instance.
+
+## Testing
+
+- Install and activate the plugin in your WordPress install
+- On your site open the _Add Plugins_ page and click the _Preview Now_ button
+- Click on _Sandbox Site_ in the _Tools_ menu to load the WordPress Playground with the plugin installed

packages/playground/assets/css/playground.css

@@ -0,0 +1,68 @@
+.tools_page_playground #wpbody-content,
+.tools_page_playground #wpcontent {
+	padding-left: 0px !important;
+}
+
+.tools_page_playground #wpwrap,
+.tools_page_playground #wpbody,
+.tools_page_playground #wpbody-content {
+	padding-bottom: 0px;
+	height: 100%;
+}
+
+.tools_page_playground #wpwrap,
+.tools_page_playground #wpbody {
+	position: initial;
+}
+
+#wp-playground-toolbar {
+	background-color: #eaaa00;
+	font-weight: bold;
+	text-align: center;
+	font-size: 1rem;
+	padding: 0.75em;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+	position: relative;
+	z-index: 1999999;
+	animation: playground-fade-in 0.25s 0.65s
+		cubic-bezier(0.175, 0.885, 0.5, 1.85) 1 forwards;
+	transform: translateY(-100%);
+}
+
+#wp-playground-toolbar > a {
+	text-transform: capitalize;
+	padding: 0 0.5rem;
+}
+
+#wp-playground-main-area {
+	position: relative;
+	display: flex;
+	flex: 1;
+}
+
+#wp-playground,
+#wp-playground-wrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 999999;
+	background-color: #fff;
+	display: flex;
+	flex-direction: column;
+}
+
+@keyframes playground-fade-in {
+	from {
+		transform: translateY(-100%);
+	}
+
+	to {
+		transform: translateY(0);
+	}
+}

packages/playground/assets/js/playground.js

@@ -0,0 +1,61 @@
+(async () => {
+	const { startPlaygroundWeb } = await import(
+		playground.playgroundPackageUrl
+	);
+	const blueprint = {
+		features: {
+			networking: true,
+		},
+		preferredVersions: {
+			wp: playground.wpVersion,
+			php: playground.phpVersion,
+		},
+		steps: [
+			{
+				step: 'unzip',
+				zipFile: {
+					resource: 'url',
+					url: playground.zipUrl,
+				},
+				extractToPath: '/wordpress',
+			},
+			{
+				step: 'runSql',
+				sql: {
+					resource: 'vfs',
+					path: '/wordpress/schema/_Schema.sql',
+				},
+			},
+			{
+				step: 'login',
+			},
+		],
+	};
+
+	if (playground.pluginSlug) {
+		blueprint.steps.push({
+			"step": "installPlugin",
+			"pluginZipFile": {
+				"resource": "wordpress.org/plugins",
+				"slug": playground.pluginSlug
+			},
+			"options": {
+				"activate": true
+			}
+		});
+	}
+
+	const client = await startPlaygroundWeb({
+		iframe: document.getElementById('wp-playground'),
+		remoteUrl: playground.playgroundRemoteUrl,
+		blueprint,
+	});
+
+	await client.isReady();
+
+	if ( playground.pluginSlug ) {
+		client.goTo('/wp-admin/plugins.php');
+	} else {
+		client.goTo('/wp-admin');
+	}
+})();

packages/playground/composer.json

@@ -0,0 +1,7 @@
+{
+	"name": "wordpress/playground",
+	"description": "A WordPress plugin for collecting the content of a site and spinning up WordPress Playground with a copy of the site content.",
+	"require": {
+		"maennchen/zipstream-php": "^2.2"
+	}
+}