refactor(examples): Use production WordPress URL pattern with modular plugins

Updates toolbar demo examples to use production-ready configuration:

- WP_HOME points to WordPress instance (not frontend)
- HEADLESS_FRONTEND_URL configured separately for frontend application
- Replaces mu-plugin template approach with modular plugin references
- Updates PHP version to 8.3
- Removes mu-plugin mapping in favor of standard plugin loading

This allows WordPress to remain fully functional while supporting headless architecture, and enables composable plugin usage across different projects.

Author: josephfusco

examples/next/toolbar-demo/scripts/setup-env.js

@@ -29,20 +29,24 @@ console.log(`  WP Test: ${ports.WP_TEST_PORT}`);
 
 // Update .wp-env.json
 const wpEnvConfig = {
-  phpVersion: '8.0',
+  phpVersion: '8.3',
   plugins: [
-    'https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip'
+    'https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip',
+    '../../../../plugins/hwp-cors-local',
+    '../../../../plugins/hwp-frontend-links',
+    '../../../../plugins/hwp-wp-env-helpers'
   ],
   config: {
     WP_DEBUG: true,
     WP_DEBUG_LOG: true,
-    GRAPHQL_DEBUG: true
+    GRAPHQL_DEBUG: true,
+    WP_HOME: `http://localhost:${ports.WP_PORT}`,
+    HEADLESS_FRONTEND_URL: `http://localhost:${ports.FRONTEND_PORT}`
   },
   port: ports.WP_PORT,
   testsPort: ports.WP_TEST_PORT,
   mappings: {
     db: './wp-env/db',
-    'wp-content/mu-plugins': './mu-plugin.php',
     '.htaccess': './.htaccess'
   },
   lifecycleScripts: {

examples/vanilla/toolbar-demo/.wp-env.json

@@ -1,12 +1,14 @@
 {
-  "phpVersion": "8.0",
+  "phpVersion": "8.3",
   "plugins": [
     "https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip"
   ],
   "config": {
     "WP_DEBUG": true,
     "WP_DEBUG_LOG": true,
-    "GRAPHQL_DEBUG": true
+    "GRAPHQL_DEBUG": true,
+    "WP_HOME": "http://localhost:8644",
+    "HEADLESS_FRONTEND_URL": "http://localhost:3644"
   },
   "port": 8644,
   "testsPort": 8645,

examples/vanilla/toolbar-demo/scripts/setup-env.js

@@ -29,20 +29,24 @@ console.log(`  WP Test: ${ports.WP_TEST_PORT}`);
 
 // Update .wp-env.json
 const wpEnvConfig = {
-  phpVersion: '8.0',
+  phpVersion: '8.3',
   plugins: [
-    'https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip'
+    'https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip',
+    '../../../../plugins/hwp-cors-local',
+    '../../../../plugins/hwp-frontend-links',
+    '../../../../plugins/hwp-wp-env-helpers'
   ],
   config: {
     WP_DEBUG: true,
     WP_DEBUG_LOG: true,
-    GRAPHQL_DEBUG: true
+    GRAPHQL_DEBUG: true,
+    WP_HOME: `http://localhost:${ports.WP_PORT}`,
+    HEADLESS_FRONTEND_URL: `http://localhost:${ports.FRONTEND_PORT}`
   },
   port: ports.WP_PORT,
   testsPort: ports.WP_TEST_PORT,
   mappings: {
     db: './wp-env/db',
-    'wp-content/mu-plugins': './mu-plugin.php',
     '.htaccess': './.htaccess'
   },
   lifecycleScripts: {

scripts/templates/mu-plugin.php

@@ -1,7 +1,7 @@
 <?php
 /**
- * Plugin Name: Toolbar Demo CORS
- * Description: Enable CORS for dev server
+ * Plugin Name: Toolbar Demo CORS & Frontend Links
+ * Description: Enable CORS for dev server and add frontend preview links
  */
 
 add_action('rest_api_init', function() {
@@ -26,3 +26,27 @@
     $url = remove_query_arg('rest_route', $url);
     return add_query_arg('rest_route', trim(parse_url($url, PHP_URL_PATH), '/'), home_url('/'));
 }, 10, 1);
+
+// Add "View on Frontend" link in admin bar
+add_action('admin_bar_menu', function($wp_admin_bar) {
+    if (!defined('HEADLESS_FRONTEND_URL')) {
+        return;
+    }
+
+    // Only show for singular posts/pages
+    if (!is_singular()) {
+        return;
+    }
+
+    global $post;
+    $frontend_url = HEADLESS_FRONTEND_URL . '/' . $post->post_name;
+
+    $wp_admin_bar->add_node([
+        'id' => 'view-on-frontend',
+        'title' => 'View on Frontend',
+        'href' => $frontend_url,
+        'meta' => [
+            'target' => '_blank'
+        ]
+    ]);
+}, 100);