Fix Hello Dolly plugin installation in WordPress Playground blueprints

.wiki/Playground-Testing.md

@@ -15,9 +15,9 @@ This document explains how to use WordPress Playground for testing our plugin.
 
 The easiest way to test our plugin with WordPress Playground is to use the online version:
 
-1. Single site testing: [Open in WordPress Playground](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/blueprint.json&_t=7)
+1. Single site testing: [Open in WordPress Playground](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/blueprint.json&_t=8)
 
-2. Multisite testing: [Open in WordPress Playground](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/multisite-blueprint.json&_t=20)
+2. Multisite testing: [Open in WordPress Playground](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/multisite-blueprint.json&_t=21)
 
 These links will automatically set up WordPress with multisite enabled, WP_DEBUG enabled, and both the Plugin Toggle and Hello Dolly plugins activated.
 
@@ -111,8 +111,8 @@ We have two blueprints for testing:
 To run tests with WordPress Playground:
 
 1. Open the appropriate WordPress Playground link:
-   - [Single site](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/blueprint.json&_t=7)
+   - [Single site](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/blueprint.json&_t=8)
-   - [Multisite](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/multisite-blueprint.json&_t=20)
+   - [Multisite](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/multisite-blueprint.json&_t=21)
 
 2. Test the plugin manually in the browser
 
@@ -182,7 +182,8 @@ await playground.run({
     { step: 'enableMultisite' },
     { step: 'wp-cli', command: 'wp site create --slug=testsite' },
     { step: 'wp-cli', command: 'wp plugin install plugin-toggle --activate-network' },
-    { step: 'wp-cli', command: 'wp plugin install hello-dolly --activate-network' }
+    { step: 'installPlugin', pluginData: { resource: 'wordpress.org/plugins', slug: 'hello-dolly' } },
+    { step: 'wp-cli', command: 'wp plugin activate hello-dolly --network' }
   ]
 });
 
@@ -217,7 +218,8 @@ describe('Plugin Tests', () => {
         { step: 'enableMultisite' },
         { step: 'wp-cli', command: 'wp site create --slug=testsite' },
         { step: 'wp-cli', command: 'wp plugin install plugin-toggle --activate-network' },
-        { step: 'wp-cli', command: 'wp plugin install hello-dolly --activate-network' }
+        { step: 'installPlugin', pluginData: { resource: 'wordpress.org/plugins', slug: 'hello-dolly' } },
+        { step: 'wp-cli', command: 'wp plugin activate hello-dolly --network' }
       ]
     });
   });

.wiki/Testing.md

@@ -104,9 +104,9 @@ WordPress Playground runs WordPress entirely in the browser using WebAssembly. T
 
 The easiest way to test our plugin with WordPress Playground is to use the online version:
 
-1. Single site testing: [Open in WordPress Playground](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/blueprint.json&_t=7)
+1. Single site testing: [Open in WordPress Playground](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/blueprint.json&_t=8)
 
-2. Multisite testing: [Open in WordPress Playground](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/multisite-blueprint.json&_t=20)
+2. Multisite testing: [Open in WordPress Playground](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/multisite-blueprint.json&_t=21)
 
 These links will automatically set up WordPress with multisite enabled, WP_DEBUG enabled, and both the Plugin Toggle and Hello Dolly plugins activated.
 

playground/blueprint.json

@@ -16,9 +16,16 @@
         "slug": "plugin-toggle"
       }
     },
+    {
+      "step": "installPlugin",
+      "pluginData": {
+        "resource": "wordpress.org/plugins",
+        "slug": "hello-dolly"
+      }
+    },
     {
       "step": "wp-cli",
-      "command": "wp plugin install hello-dolly --activate"
+      "command": "wp plugin activate hello-dolly"
     }
   ]
 }

playground/hello-dolly-test.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hello Dolly Test</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            overflow: hidden;
+        }
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    </style>
+</head>
+<body>
+    <iframe id="playground" src="about:blank"></iframe>
+
+    <script>
+        // Simple blueprint that only installs Hello Dolly
+        const blueprint = {
+            "$schema": "https://playground.wordpress.net/blueprint-schema.json",
+            "landingPage": "/wp-admin/plugins.php",
+            "login": true,
+            "steps": [
+                {
+                    "step": "wp-cli",
+                    "command": "wp plugin install hello-dolly"
+                },
+                {
+                    "step": "wp-cli",
+                    "command": "wp plugin activate hello-dolly"
+                }
+            ]
+        };
+
+        // Load the blueprint
+        document.getElementById('playground').src = "https://playground.wordpress.net/?blueprint=" + encodeURIComponent(JSON.stringify(blueprint));
+    </script>
+</body>
+</html>

playground/index.html

@@ -20,6 +20,6 @@
     </style>
 </head>
 <body>
-    <iframe src="https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/blueprint.json&_t=7"></iframe>
+    <iframe src="https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wpallstars/wp-plugin-starter-template-for-ai-coding/feature/testing-framework/playground/blueprint.json&_t=8"></iframe>
 </body>
 </html>

playground/multisite-blueprint.json

@@ -23,9 +23,16 @@
       "step": "wp-cli",
       "command": "wp plugin install plugin-toggle --activate-network"
     },
+    {
+      "step": "installPlugin",
+      "pluginData": {
+        "resource": "wordpress.org/plugins",
+        "slug": "hello-dolly"
+      }
+    },
     {
       "step": "wp-cli",
-      "command": "wp plugin install hello-dolly --activate-network"
+      "command": "wp plugin activate hello-dolly --network"
     }
   ]
 }

playground/test.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WordPress Playground Test</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            overflow: hidden;
+        }
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+        .buttons {
+            position: fixed;
+            top: 10px;
+            left: 10px;
+            z-index: 1000;
+        }
+        button {
+            padding: 10px;
+            margin-right: 10px;
+            background-color: #0073aa;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #005177;
+        }
+    </style>
+</head>
+<body>
+    <div class="buttons">
+        <button onclick="loadSingleSite()">Single Site</button>
+        <button onclick="loadMultisite()">Multisite</button>
+    </div>
+    <iframe id="playground" src="about:blank"></iframe>
+
+    <script>
+        function loadSingleSite() {
+            document.getElementById('playground').src = "https://playground.wordpress.net/?blueprint=" + encodeURIComponent(JSON.stringify(singleSiteBlueprint));
+        }
+
+        function loadMultisite() {
+            document.getElementById('playground').src = "https://playground.wordpress.net/?blueprint=" + encodeURIComponent(JSON.stringify(multisiteBlueprint));
+        }
+
+        // Single site blueprint
+        const singleSiteBlueprint = {
+            "$schema": "https://playground.wordpress.net/blueprint-schema.json",
+            "landingPage": "/wp-admin/",
+            "login": true,
+            "steps": [
+                {
+                    "step": "defineWpConfigConsts",
+                    "consts": {
+                        "WP_DEBUG": true
+                    }
+                },
+                {
+                    "step": "installPlugin",
+                    "pluginData": {
+                        "resource": "wordpress.org/plugins",
+                        "slug": "plugin-toggle"
+                    }
+                },
+                {
+                    "step": "installPlugin",
+                    "pluginData": {
+                        "resource": "wordpress.org/plugins",
+                        "slug": "hello-dolly"
+                    }
+                },
+                {
+                    "step": "wp-cli",
+                    "command": "wp plugin activate hello-dolly"
+                }
+            ]
+        };
+
+        // Multisite blueprint
+        const multisiteBlueprint = {
+            "$schema": "https://playground.wordpress.net/blueprint-schema.json",
+            "landingPage": "/wp-admin/network/",
+            "login": true,
+            "features": {
+                "networking": true
+            },
+            "steps": [
+                {
+                    "step": "defineWpConfigConsts",
+                    "consts": {
+                        "WP_DEBUG": true
+                    }
+                },
+                {
+                    "step": "enableMultisite"
+                },
+                {
+                    "step": "wp-cli",
+                    "command": "wp site create --slug=testsite"
+                },
+                {
+                    "step": "wp-cli",
+                    "command": "wp plugin install plugin-toggle --activate-network"
+                },
+                {
+                    "step": "installPlugin",
+                    "pluginData": {
+                        "resource": "wordpress.org/plugins",
+                        "slug": "hello-dolly"
+                    }
+                },
+                {
+                    "step": "wp-cli",
+                    "command": "wp plugin activate hello-dolly --network"
+                }
+            ]
+        };
+
+        // Load single site by default
+        loadSingleSite();
+    </script>
+</body>
+</html>