Add WordPress Playground plugin

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,52 @@
+(function () {
+	const query = new URLSearchParams(window.location.search);
+	const defaultBlueprint = {
+		steps: [
+			{
+				step: 'login',
+			},
+		],
+	};
+
+	(async () => {
+		const { startPlaygroundWeb } = await import(
+			playground.playgroundPackageUrl
+		);
+		const blueprint = playground.blueprint || defaultBlueprint;
+
+		blueprint.steps = blueprint.steps || [];
+		blueprint.steps = [
+			{
+				step: 'unzip',
+				zipFile: {
+					resource: 'url',
+					url: playground.zipUrl,
+				},
+				extractToPath: '/wordpress',
+			},
+			{
+				step: 'runSql',
+				sql: {
+					resource: 'vfs',
+					path: '/wordpress/schema/_Schema.sql',
+				},
+			},
+			...blueprint.steps,
+		];
+
+		blueprint.preferredVersions = {
+			wp: playground.wpVersion,
+			php: playground.phpVersion,
+		};
+
+		const client = await startPlaygroundWeb({
+			iframe: document.getElementById('wp-playground'),
+			remoteUrl: playground.playgroundRemoteUrl,
+			blueprint,
+		});
+
+		await client.isReady();
+
+		client.goTo('/wp-admin/plugins.php');
+	})();
+})();

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"
+	}
+}