feat(toolbar): Add real WordPress integration to demo

josephfusco · claude · josephfusco · commit a5e31e3e4f20 · 2025-10-08T11:39:46.000-04:00
Integrate toolbar demo with real WordPress instance using wp-env: - Add CORS headers via mu-plugin for localhost:3000 - Fetch real WordPress user via REST API - Fetch posts using WPGraphQL - Update demo UI with real data workflow - Document WordPress integration in README Updates: - Use query parameter format for REST API (/?rest_route=) - Use query parameter format for GraphQL (/?graphql) - Add lifecycle script for permalink setup - Update demo instructions for real WordPress workflow 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/examples/vanilla/toolbar-demo/.wp-env.json b/examples/vanilla/toolbar-demo/.wp-env.json
@@ -10,7 +10,8 @@
   },
   "port": 8888,
   "mappings": {
-    "db": "./wp-env/db"
+    "db": "./wp-env/db",
+    "wp-content/mu-plugins": "./mu-plugin.php"
   },
   "lifecycleScripts": {
     "afterStart": "wp-env run cli -- wp rewrite structure '/%postname%/' && wp-env run cli -- wp rewrite flush"
diff --git a/examples/vanilla/toolbar-demo/README.md b/examples/vanilla/toolbar-demo/README.md
@@ -26,16 +26,18 @@ This example demonstrates how to integrate the Headless WordPress Toolbar into a
 From the example directory:
 
 ```bash
-# Install dependencies and start
+# Install dependencies and start WordPress + Vite
 npm run example:build
 
 # Or, if already set up:
 npm run example:start
 ```
 
 The example will be available at:
-- Frontend: http://localhost:3000
-- WordPress Admin: http://localhost:8888/wp-admin (admin / password)
+- **Frontend**: http://localhost:3000
+- **WordPress**: http://localhost:8888
+- **WordPress Admin**: http://localhost:8888/wp-admin (`admin` / `password`)
+- **GraphQL**: http://localhost:8888/?graphql
 
 ## Project Structure
 
@@ -72,34 +74,65 @@ const toolbar = new Toolbar({
 const renderer = new VanillaRenderer(toolbar, 'toolbar');
 ```
 
-### 2. WordPress Context
+### 2. Real WordPress Integration
+
+The example fetches real data from WordPress:
 
 ```javascript
+// Fetch WordPress user via REST API
+const response = await fetch('http://localhost:8888/?rest_route=/wp/v2/users/1');
+const user = await response.json();
+
 toolbar.setState({
-  user: { id: 1, name: 'Admin' },
+  user: {
+    id: user.id,
+    name: user.name,
+    email: user.email
+  },
   site: {
     url: 'http://localhost:8888',
     adminUrl: 'http://localhost:8888/wp-admin'
-  },
-  post: {
-    id: 123,
-    title: 'Hello World',
-    type: 'post',
-    status: 'draft',
-    slug: 'hello-world'
   }
 });
 ```
 
-### 3. Custom Nodes
+### 3. GraphQL Posts
+
+Fetch posts using WPGraphQL:
+
+```javascript
+const response = await fetch('http://localhost:8888/?graphql', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({
+    query: `
+      query GetPosts {
+        posts(first: 5) {
+          nodes {
+            databaseId
+            title
+            slug
+            status
+          }
+        }
+      }
+    `
+  })
+});
+
+const { data } = await response.json();
+// Use posts to populate toolbar
+```
+
+### 4. Custom Nodes
 
 ```javascript
 toolbar.register('home', 'Home', () => {
   window.location.href = '/';
 });
 ```
 
-### 4. State Subscription
+### 5. State Subscription
 
 ```javascript
 toolbar.subscribe((nodes, state) => {
@@ -134,8 +167,10 @@ The wp-env configuration includes:
 
 - WordPress with WPGraphQL plugin
 - Admin credentials: `admin` / `password`
-- GraphQL endpoint: http://localhost:8888/graphql
+- GraphQL endpoint: `http://localhost:8888/?graphql`
+- REST API endpoint: `http://localhost:8888/?rest_route=/wp/v2/...`
 - Pretty permalinks enabled
+- CORS headers enabled for localhost:3000
 
 ## Using with Vite
 
diff --git a/examples/vanilla/toolbar-demo/example-app/index.html b/examples/vanilla/toolbar-demo/example-app/index.html
@@ -18,9 +18,11 @@ <h2>User Context</h2>
 
     <section class="controls">
       <h2>Post Context</h2>
-      <button onclick="addPost()">Add Post</button>
-      <button onclick="addPage()">Add Page</button>
+      <button onclick="fetchPosts()">Fetch Posts</button>
+      <button onclick="addPost()">Add Mock Post</button>
+      <button onclick="addPage()">Add Mock Page</button>
       <button onclick="clearPost()">Clear Post</button>
+      <div id="wordpress-posts"></div>
     </section>
 
     <section class="controls">
@@ -37,12 +39,12 @@ <h2>Current State:</h2>
     <section class="info">
       <h2>Try This:</h2>
       <ol>
-        <li>Click "Login" to authenticate</li>
-        <li>Click "Add Post" to load content</li>
-        <li>See WordPress controls appear in the toolbar at the bottom</li>
+        <li>Click "Login" to fetch real WP user</li>
+        <li>Click "Fetch Posts" to load real posts</li>
+        <li>Click a post to add it to toolbar</li>
+        <li>See WordPress controls appear in toolbar</li>
         <li>Click "Preview" to toggle preview mode</li>
         <li>Click "Edit post" to open in WordPress (opens new tab)</li>
-        <li>Click "WP Admin" to open WordPress dashboard</li>
       </ol>
     </section>
 
diff --git a/examples/vanilla/toolbar-demo/example-app/src/main.js b/examples/vanilla/toolbar-demo/example-app/src/main.js
@@ -2,6 +2,8 @@ import { Toolbar, VanillaRenderer } from '@wpengine/hwp-toolbar';
 import '@wpengine/hwp-toolbar/styles';
 import './style.css';
 
+const WP_URL = 'http://localhost:8888';
+
 // Create toolbar instance
 const toolbar = new Toolbar({
   onPreviewChange: (enabled) => {
@@ -18,20 +20,35 @@ toolbar.subscribe((nodes, state) => {
   document.getElementById('state').textContent = JSON.stringify(state, null, 2);
 });
 
-// Control functions
-window.login = () => {
-  toolbar.setState({
-    user: {
-      id: 1,
-      name: 'Admin',
-      email: 'admin@example.com'
-    },
-    site: {
-      adminUrl: 'http://localhost:8888/wp-admin',
-      url: 'http://localhost:8888'
+// Fetch real WordPress user
+window.login = async () => {
+  try {
+    // For demo: just set mock authenticated user
+    // In production, you'd authenticate first via WordPress login
+    const response = await fetch(`${WP_URL}/?rest_route=/wp/v2/users/1`);
+
+    if (response.ok) {
+      const user = await response.json();
+      toolbar.setState({
+        user: {
+          id: user.id,
+          name: user.name,
+          email: user.email || 'admin@example.com'
+        },
+        site: {
+          adminUrl: `${WP_URL}/wp-admin`,
+          url: WP_URL
+        }
+      });
+      console.log('User logged in:', user.name);
+    } else {
+      console.error('WordPress not available');
+      alert('WordPress is not running at ' + WP_URL);
     }
-  });
-  console.log('User logged in');
+  } catch (error) {
+    console.error('Error connecting to WordPress:', error);
+    alert('Error: Make sure WordPress is running (npm run wp:start)');
+  }
 };
 
 window.logout = () => {
@@ -45,6 +62,66 @@ window.logout = () => {
   console.log('User logged out');
 };
 
+// Fetch real posts from WordPress GraphQL
+window.fetchPosts = async () => {
+  try {
+    const response = await fetch(`${WP_URL}/?graphql`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        query: `
+          query GetPosts {
+            posts(first: 5) {
+              nodes {
+                databaseId
+                title
+                slug
+                status
+              }
+            }
+          }
+        `
+      })
+    });
+
+    const { data } = await response.json();
+
+    if (data?.posts?.nodes?.length > 0) {
+      const posts = data.posts.nodes;
+      console.log('Fetched posts:', posts);
+
+      // Display posts in UI
+      const postsDiv = document.getElementById('wordpress-posts');
+      postsDiv.innerHTML = '<h3>WordPress Posts:</h3>';
+      posts.forEach(post => {
+        const btn = document.createElement('button');
+        btn.textContent = post.title;
+        btn.onclick = () => loadPost(post);
+        postsDiv.appendChild(btn);
+      });
+    }
+  } catch (error) {
+    console.error('Error fetching posts:', error);
+    alert('Error fetching posts. Make sure WPGraphQL is installed.');
+  }
+};
+
+function loadPost(post) {
+  toolbar.setState({
+    post: {
+      id: post.databaseId,
+      title: post.title,
+      type: 'post',
+      status: post.status,
+      slug: post.slug
+    }
+  });
+  console.log('Post loaded:', post.title);
+}
+
+// Mock data functions (for when WordPress isn't running)
 window.addPost = () => {
   toolbar.setState({
     post: {
@@ -55,7 +132,7 @@ window.addPost = () => {
       slug: 'hello-world'
     }
   });
-  console.log('Post context added');
+  console.log('Mock post added');
 };
 
 window.addPage = () => {
@@ -68,7 +145,7 @@ window.addPage = () => {
       slug: 'about'
     }
   });
-  console.log('Page context added');
+  console.log('Mock page added');
 };
 
 window.clearPost = () => {
@@ -104,14 +181,15 @@ window.clearAll = () => {
 // Initialize with home button
 toolbar.register('home', 'Home', () => {
   console.log('Navigate to home');
-  alert('Navigate to Homepage');
+  window.location.href = '/';
 });
 
 // Console greeting
 console.log('%cHeadless WordPress Toolbar', 'font-size: 18px; font-weight: bold; color: #0073aa;');
-console.log('For headless WordPress implementations');
+console.log('WordPress at:', WP_URL);
 console.log('');
 console.log('Try this flow:');
-console.log('1. Click "Login" to authenticate');
-console.log('2. Click "Add Post" to load content');
-console.log('3. See WordPress controls appear in toolbar');
+console.log('1. Click "Login" to fetch real WP user');
+console.log('2. Click "Fetch Posts" to load real posts');
+console.log('3. Click a post to add it to toolbar');
+console.log('4. See WordPress controls appear in toolbar');
diff --git a/examples/vanilla/toolbar-demo/mu-plugin.php b/examples/vanilla/toolbar-demo/mu-plugin.php
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Plugin Name: Toolbar Demo CORS
+ * Description: Enable CORS for Vite dev server
+ */
+
+add_action('rest_api_init', function() {
+    remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
+    add_filter('rest_pre_serve_request', function($value) {
+        header('Access-Control-Allow-Origin: http://localhost:3000');
+        header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
+        header('Access-Control-Allow-Credentials: true');
+        header('Access-Control-Allow-Headers: Content-Type, Authorization');
+
+        if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+            status_header(200);
+            exit();
+        }
+
+        return $value;
+    });
+});
