From efa487f3eeae5cb610aa8f4a3b04f0b451ba57ed Mon Sep 17 00:00:00 2001
From: Ronny Shani <63248335+ironnysh@users.noreply.github.com>
Date: Tue, 19 Mar 2024 23:24:25 +0100
Subject: [PATCH] Update examples and demos in the docs (#1107)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Adding the Blueprint recipes from the
[wiki](https://github.com/WordPress/wordpress-playground/wiki/Blueprint-examples#load-php-code-on-every-request-mu-plugin)
to the
[examples](https://wordpress.github.io/wordpress-playground/blueprints-api/examples)
page in the official docs.
- Copying the [demos from the standalone
page](https://playground.wordpress.net/demos/) to the [apps/demos
page](https://wordpress.github.io/wordpress-playground/links-and-resources/#apps-built-with-wordpress-playground).

## What problem is it solving?

Consolidate the examples and demos on the official docs site.

[See the discussion
here](https://github.com/WordPress/developer-blog-content/issues/198#issuecomment-1991775789).

---------

Co-authored-by: Adam Zieliński <adam@adamziel.com>
---
 .../docs/09-blueprints-api/08-examples.md     | 77 +++++++++++++++++--
 packages/docs/site/docs/15-resources.md       |  5 ++
 .../Blueprints/BlueprintExample.mdx           |  4 +-
 .../Blueprints/BlueprintRunButton.tsx         |  4 +-
 4 files changed, 81 insertions(+), 9 deletions(-)

diff --git a/packages/docs/site/docs/09-blueprints-api/08-examples.md b/packages/docs/site/docs/09-blueprints-api/08-examples.md
index ecf4177c72..660a7e0f45 100644
--- a/packages/docs/site/docs/09-blueprints-api/08-examples.md
+++ b/packages/docs/site/docs/09-blueprints-api/08-examples.md
@@ -9,7 +9,7 @@ import BlueprintExample from '@site/src/components/Blueprints/BlueprintExample.m
 
 Let's see some cool things you can do with Blueprints.
 
-### Install a Theme and a Plugin
+## Install a Theme and a Plugin
 
 <BlueprintExample blueprint={{
 	"steps": [
@@ -30,7 +30,7 @@ Let's see some cool things you can do with Blueprints.
 	]
 }} />
 
-### Run custom PHP code
+## Run custom PHP code
 
 <BlueprintExample
 display={`{
@@ -58,7 +58,7 @@ wp_insert_post(array(
 ]
 }} />
 
-#### Enable an option on the Gutenberg Experiments page
+## Enable an option on the Gutenberg Experiments page
 
 Here: Switch on the "new admin views" feature.
 
@@ -80,9 +80,9 @@ blueprint={{
 		]
 }} />
 
-### Showcase a product demo
+## Showcase a product demo
 
-<BlueprintExample blueprint={{
+<BlueprintExample noButton blueprint={{
 	"steps": [
 		{
 			"step": "installPlugin",
@@ -114,3 +114,70 @@ blueprint={{
 		}
 	]
 }} />
+
+## Enable PHP extensions and networking
+
+<BlueprintExample blueprint={{
+	"landingPage": "/wp-admin/plugin-install.php",
+	"phpExtensionBundles": [
+		"kitchen-sink"
+	],
+	"features": {
+		"networking": true
+	},
+	"steps": [
+		{
+			"step": "login"
+		}
+	]
+}} />
+
+## Load PHP code on every request (mu-plugin)
+
+Use the `writeFile` step to add code to a mu-plugin that runs on every request.
+
+<BlueprintExample blueprint={{
+	"landingPage": "/category/uncategorized/",
+	"phpExtensionBundles": [
+		"kitchen-sink"
+	],
+	"features": {
+		"networking": true
+	},
+	"steps": [
+		{
+			"step": "login"
+		},
+		{
+			"step": "writeFile",
+			"path": "/wordpress/wp-content/mu-plugins/rewrite.php",
+			"data": "<?php add_action( 'after_setup_theme', function() { global $wp_rewrite; $wp_rewrite->set_permalink_structure('/%postname%/'); $wp_rewrite->flush_rules(); } );"
+		}
+	]
+}} />
+
+## Code editor (as a Gutenberg block)
+
+<BlueprintExample blueprint={{
+  "landingPage": "/wp-admin/post.php?post=4&action=edit",
+  "steps": [
+    {
+      "step": "login",
+      "username": "admin",
+      "password": "password"
+    },
+    {
+      "step": "installPlugin",
+      "pluginZipFile": {
+        "resource": "wordpress.org/plugins",
+        "slug": "interactive-code-block"
+      }
+    },
+    {
+      "step": "runPHP",
+      "code": "<?php require '/wordpress/wp-load.php'; wp_insert_post(['post_title' => 'WordPress Playground block demo!','post_content' => '<!-- wp:wordpress-playground/playground /-->', 'post_status' => 'publish', 'post_type' => 'post',]);"
+    }
+  ]
+}} />
+
+You can share your own Blueprint examples in [this dedicated wiki](https://github.com/WordPress/wordpress-playground/wiki/Blueprint-examples).
diff --git a/packages/docs/site/docs/15-resources.md b/packages/docs/site/docs/15-resources.md
index 238b80c177..c2cf12524b 100644
--- a/packages/docs/site/docs/15-resources.md
+++ b/packages/docs/site/docs/15-resources.md
@@ -25,6 +25,11 @@ slug: /links-and-resources
 -   [Blocknotes](https://twitter.com/adamzielin/status/1669478239771799552) – the first ever iOS app running WordPress on your phone
 -   [Playground embedder](https://joost.blog/embedded-playground/) to embed Playground examples in WordPress.org documentation using shortcodes
 -   [Plugin demos on wp.org](https://gist.github.com/adamziel/0fe3ffc1fb5202a907a87d055ee37135) – a user script that adds a "demo" tab to plugin pages on WordPress.org
+-   [WordPress Pull Request previewer](https://playground.wordpress.net/wordpress.html)
+-   [Synchronization between two Playgrounds](https://playground.wordpress.net/demos/sync.html)
+-   [Time Travel](https://playground.wordpress.net/demos/time-traveling.html)
+-   [WP-CLI](https://playground.wordpress.net/demos/wp-cli.html)
+-   [PHP implementation of Blueprints](https://playground.wordpress.net/demos/php-blueprints.html)
 
 ## Reading materials
 
diff --git a/packages/docs/site/src/components/Blueprints/BlueprintExample.mdx b/packages/docs/site/src/components/Blueprints/BlueprintExample.mdx
index 04fc002c9a..ce7f5e6cab 100644
--- a/packages/docs/site/src/components/Blueprints/BlueprintExample.mdx
+++ b/packages/docs/site/src/components/Blueprints/BlueprintExample.mdx
@@ -4,8 +4,8 @@ import CodeBlock from '@theme/CodeBlock';
 <div className="margin-vert--sm">
 	{!props.justButton && (
 		<CodeBlock title={props.title} language="json">
-			{props.display || JSON.stringify(props.blueprint, null, 4)}
+			{props.display || JSON.stringify(props.blueprint, null, '\t')}
 		</CodeBlock>
 	)}
-	<BlueprintRunButton blueprint={props.blueprint} />
+	{!props.noButton && <BlueprintRunButton blueprint={props.blueprint} />}
 </div>
diff --git a/packages/docs/site/src/components/Blueprints/BlueprintRunButton.tsx b/packages/docs/site/src/components/Blueprints/BlueprintRunButton.tsx
index 458909be09..7ae48eca4f 100644
--- a/packages/docs/site/src/components/Blueprints/BlueprintRunButton.tsx
+++ b/packages/docs/site/src/components/Blueprints/BlueprintRunButton.tsx
@@ -17,8 +17,8 @@ export function BlueprintRunButton({ blueprint }) {
 			</button>
 		);
 	}
-	const url = `https://playground.wordpress.net/?mode=seamless#${JSON.stringify(
-		blueprint
+	const url = `https://playground.wordpress.net/?mode=seamless#${btoa(
+		JSON.stringify(blueprint)
 	)}`;
 	return (
 		<iframe