Update examples and demos in the docs (#1107)

- 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](WordPress/developer-blog-content#198 (comment)). --------- Co-authored-by: Adam Zieliński <[email protected]>
WordPress · Mar 19, 2024 · efa487f · efa487f
1 parent 80201b4
commit efa487f
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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