wp-plugin: rebrand to Unbounded, fix fresh-install warning, add a demo that cannot rot (#419)

* wp-plugin: rebrand to Unbounded, fix fresh-install warning

The product is just "Unbounded" now, so update the nine user-facing
strings: plugin name, admin menu, settings page, meta box, and field
descriptions.

The <browsers-unbounded> element name deliberately stays. It is the
widget's public API -- ui/src/index.tsx only matches "lantern-network"
(legacy) or "browsers-unbounded", so renaming the tag would silently
render nothing. The option key and admin slug stay for the same reason.

Also stop interpolating $options['layout'] and ['theme'] unguarded. On a
fresh install nobody has saved settings yet, get_option() returns false,
and PHP 8 prints "Trying to access array offset on false" into the page
while emitting empty data attributes. Fall back to banner/dark and pass
both through esc_attr(), since the registered sanitizer is still a
no-op @todo and these land in HTML attributes.

Verified against WordPress 6.x + PHP 8.2 with WP_DEBUG on: the old
version warns and emits data-layout='', the new one is clean and
defaults correctly.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Lh3TcyWL8MMtTYPo7H2buS

* wp-plugin: add a Playground-based demo site

Every previous demo of this plugin has rotted. The Heroku instance 404s, the
wordpress.com trial expired, and the S3 zip that try.wpdemo.net installs has
served the February 2024 build ever since -- a version whose front-end hook
predates the homepage and posts settings, so a demo created from it today
installs a plugin that silently ignores half the options its own settings
screen offers.

WordPress Playground removes the server from the equation: WordPress compiled
to WebAssembly, booted in the visitor's browser, plugin installed and activated
from a blueprint. Nothing to host, nothing to expire, nothing to keep patched.
Verified end to end -- the widget renders inside it, globe canvas and connect
switch included.

build.sh generates wp-plugin.zip from the plugin source rather than committing
an archive, so the demo cannot drift from the tree the way the S3 object did.
index.html derives the zip URL from location.origin, so the same files work on
a preview deployment, production, or a custom domain with no edits.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Lh3TcyWL8MMtTYPo7H2buS

* wp-plugin: build the demo zip with python, not zip(1)

Cloudflare's Pages build image has no zip binary, so the first preview
deployment failed at the preflight check. python3 is present in both that
image and locally, so zipfile keeps CI and local builds on one code path
rather than adding a dependency to the build environment.

Archive layout is unchanged -- same top-level wp-plugin/ directory entry and
the same two files -- and the result still installs and activates cleanly in
WordPress with the widget rendering.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Lh3TcyWL8MMtTYPo7H2buS

* wp-plugin: address PR review feedback

Build the zip link with DOM APIs instead of innerHTML. The reported XSS path
does not actually open -- location.pathname normalises " < > to %22 %3C %3E, so
it cannot carry raw HTML metacharacters -- but concatenating a URL into
innerHTML is a fragile pattern with no upside here, and createElement plus
textContent renders identically.

Fix three stale docs while here:
  - the meta box is its own box in the editor sidebar, not a field inside Page
    Attributes, so the setup steps pointed readers somewhere that does not exist
  - the plugin header still described the widget as applying "to selected
    pages", predating the homepage and posts settings it now also supports
  - a sentence missing its verb, and a fence missing its language (MD040)

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Lh3TcyWL8MMtTYPo7H2buS

* wp-plugin: put the demo widget above the fold

The blueprint set location=footer, which hooks wp_footer and renders the widget
below the whole theme -- header, title, content, footer -- so a visitor landed
on the demo and saw stock WordPress with the thing they came to look at off
screen.

location=header hooks wp_head instead. The element is not valid head content,
so the browser closes head and hoists it, landing it as the first child of
body: measured at 32px from the top, 630px tall, in an 818px viewport.

This is also the plugin's own default. The blueprint was overriding it for no
reason.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Lh3TcyWL8MMtTYPo7H2buS

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: myleshorton

ui/wp-plugin/README.md

@@ -1,6 +1,6 @@
-# Browsers Unbounded WordPress Plugin
+# Unbounded WordPress Plugin
 
-Quick guide to get the Browsers Unbounded plugin running with Docker
+Quick guide to get the Unbounded plugin running with Docker
 
 ## Setup
 
@@ -21,11 +21,11 @@ Quick guide to get the Browsers Unbounded plugin running with Docker
 
 4. **Activate Plugin:**
     - Go to `http://localhost:8000/wp-admin/plugins.php`
-    - Find the `Browsers Unbounded` plugin and click `Activate`
+    - Find the `Unbounded` plugin and click `Activate`
 
 5. **Test Plugin:**
     - Go to `http://localhost:8000/wp-admin/admin.php?page=browsers-unbounded-settings`
     - You should see the plugin settings page
     - Configure the plugin settings as needed
-    - Create a new page and check the `Enable Browsers Unbounded` box in the `Page Attributes` section
+    - Create a new page and tick `Enable Unbounded on this page` in the editor sidebar
     - View the page and you should see the widget in action

ui/wp-plugin/browsers-unbounded-plugin.php

@@ -1,9 +1,9 @@
 <?php
 /**
- * Plugin Name: Browsers Unbounded
- * Description: Browsers Unbounded widget to selected pages with editable theme, layout and location.
- * Version: 1.0
- * Author: Echo
+ * Plugin Name: Unbounded
+ * Description: Unbounded widget with editable theme, layout and location. Enable it per page, on all posts, or on the homepage.
+ * Version: 1.1
+ * Author: Lantern
  */
 
 // hooks for the admin ui
@@ -27,7 +27,7 @@ function browsers_unbounded_add_hooks_based_on_location() {
 
  // menu item for settings page
 function browsers_unbounded_plugin_menu() {
-    add_menu_page('Browsers Unbounded Settings', 'Browsers Unbounded', 'manage_options', 'browsers-unbounded-settings', 'browsers_unbounded_plugin_settings_page');
+    add_menu_page('Unbounded Settings', 'Unbounded', 'manage_options', 'browsers-unbounded-settings', 'browsers_unbounded_plugin_settings_page');
 }
 
 // settings for storing plugin options
@@ -51,7 +51,7 @@ function browsers_unbounded_options_sanitize($options) {
 function browsers_unbounded_plugin_settings_page() {
     ?>
     <div class="wrap">
-        <h2>Browsers Unbounded Settings</h2>
+        <h2>Unbounded Settings</h2>
         <form method="post" action="options.php">
             <?php settings_fields('browsers_unbounded_options_group'); ?>
             <?php do_settings_sections('browsers-unbounded-settings'); ?>
@@ -71,7 +71,7 @@ function browsers_unbounded_layout_callback() {
         <option value='panel' <?php selected($layout, 'panel'); ?>>Panel</option>
         <option value='floating' <?php selected($layout, 'floating'); ?>>Floating</option>
     </select>
-    <p class="description">Select Browsers Unbounded layout.</p>
+    <p class="description">Select Unbounded layout.</p>
     <?php
 }
 
@@ -85,7 +85,7 @@ function browsers_unbounded_theme_callback() {
         <option value='dark' <?php selected($theme, 'dark'); ?>>Dark</option>
         <option value='auto' <?php selected($theme, 'auto'); ?>>Auto</option>
     </select>
-    <p class="description">Select Browsers Unbounded theme.</p>
+    <p class="description">Select Unbounded theme.</p>
     <?php
 }
 
@@ -97,7 +97,7 @@ function browsers_unbounded_location_callback() {
         <option value='header' <?php selected($location, 'header'); ?>>Header</option>
         <option value='footer' <?php selected($location, 'footer'); ?>>Footer</option>
     </select>
-    <p class="description">Select where to add Browsers Unbounded.</p>
+    <p class="description">Select where to add Unbounded.</p>
     <?php
 }
 
@@ -122,7 +122,7 @@ function browsers_unbounded_posts_callback() {
 
 // meta box to the page editor to enable the unbounded widget
 function browsers_unbounded_add_meta_box() {
-    add_meta_box('browsers-unbounded-enable', 'Enable Browsers Unbounded', 'browsers_unbounded_meta_box_callback', 'page', 'side');
+    add_meta_box('browsers-unbounded-enable', 'Enable Unbounded', 'browsers_unbounded_meta_box_callback', 'page', 'side');
 }
 
 // renders meta box in the page editor
@@ -131,7 +131,7 @@ function browsers_unbounded_meta_box_callback($post) {
     $value = get_post_meta($post->ID, '_browsers_unbounded_enable', true);
     echo '<label for="browsers_unbounded_field">';
     echo '<input type="checkbox" id="browsers_unbounded_field" name="browsers_unbounded_field" value="1"' . checked($value, 1, false) . ' />';
-    echo ' Enable Browsers Unbounded on this page';
+    echo ' Enable Unbounded on this page';
     echo '</label> ';
 }
 
@@ -159,7 +159,13 @@ function browsers_unbounded_add_element_and_script() {
         // script
         echo '<script defer="defer" src="https://embed.lantern.io/static/js/main.js"></script>';
 
-        // element
-        echo "<browsers-unbounded data-layout='{$options['layout']}' data-theme='{$options['theme']}' style='width: 100%;'></browsers-unbounded>";
+        // element — tag name is the widget's public API, so it stays "browsers-unbounded"
+        $layout = isset($options['layout']) ? $options['layout'] : 'banner';
+        $theme = isset($options['theme']) ? $options['theme'] : 'dark';
+        printf(
+            "<browsers-unbounded data-layout='%s' data-theme='%s' style='width: 100%%;'></browsers-unbounded>",
+            esc_attr($layout),
+            esc_attr($theme)
+        );
     }
 }

ui/wp-plugin/demo-site/.gitignore

@@ -0,0 +1 @@
+dist/

ui/wp-plugin/demo-site/README.md

@@ -0,0 +1,51 @@
+# Unbounded WordPress plugin — demo site
+
+A one-click live demo of the plugin. No server runs WordPress: the landing page
+links to [WordPress Playground](https://playground.wordpress.net), which boots
+WordPress compiled to WebAssembly inside the visitor's browser, installs
+`wp-plugin.zip`, activates it, and lands on a page with the widget embedded.
+
+## Layout
+
+| File | Role |
+|---|---|
+| `index.html` | Landing page. Builds the Playground link at runtime from `location.origin`, so it works on any domain with no edits. |
+| `blueprint.json` | Playground setup steps. `PLUGIN_ZIP_URL` is substituted by `index.html`. |
+| `_headers` | Permissive CORS. Belt-and-braces: Playground fetches plugin zips through its own proxy, so this is not currently load-bearing. |
+| `build.sh` | Assembles `dist/`, generating `wp-plugin.zip` from the plugin source. |
+
+`dist/` is generated and gitignored.
+
+## Cloudflare Pages settings
+
+The project is connected to this repo, so a push to `main` publishes and every PR
+gets a preview URL.
+
+```text
+Build command:            bash ui/wp-plugin/demo-site/build.sh
+Build output directory:   ui/wp-plugin/demo-site/dist
+Root directory:           /
+```
+
+Optionally set *Build watch paths* to `ui/wp-plugin/*` so unrelated pushes do not
+trigger a rebuild.
+
+## Why the zip is built, not committed
+
+The previously published archive lived at `unbounded.s3.amazonaws.com/wp-plugin.zip`
+and was uploaded by hand in February 2024. The plugin source kept changing; that
+object did not. By 2026 it still shipped the pre-rebrand build whose front-end hook
+predated the homepage and posts settings entirely — so a demo created from it
+installed a plugin that silently ignored half the options the settings screen
+offered. `build.sh` regenerates the zip on every deploy so the demo can only ship
+what is actually in the tree.
+
+## Testing locally
+
+Run `build.sh`, then serve `dist/` over **HTTPS** — Playground is an HTTPS origin, and a
+plugin zip on `http://localhost` is blocked as mixed content, which surfaces only as
+a Playground that hangs on "Loading Playgrounds". A preview deployment is usually the
+faster way to check a change.
+
+For testing the plugin against real WordPress and MySQL instead, see the
+`docker-compose.yml` one directory up.

ui/wp-plugin/demo-site/_headers

@@ -0,0 +1,2 @@
+/*
+  Access-Control-Allow-Origin: *

ui/wp-plugin/demo-site/blueprint.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
+  "landingPage": "/",
+  "preferredVersions": { "php": "8.3", "wp": "latest" },
+  "login": true,
+  "steps": [
+    {
+      "step": "installPlugin",
+      "pluginData": { "resource": "url", "url": "PLUGIN_ZIP_URL" },
+      "options": { "activate": true }
+    },
+    {
+      "step": "runPHP",
+      "code": "<?php require_once '/wordpress/wp-load.php'; $id = wp_insert_post(array('post_type'=>'page','post_title'=>'Unbounded Demo','post_status'=>'publish','post_content'=>'<p>This page is running the Unbounded WordPress plugin. The widget below turns this browser into a volunteer proxy that helps people reach the open internet.</p>')); update_post_meta($id,'_browsers_unbounded_enable','1'); update_option('browsers_unbounded_options', array('layout'=>'banner','theme'=>'dark','location'=>'header','homepage'=>'on')); update_option('show_on_front','page'); update_option('page_on_front',$id); update_option('blogname','Unbounded Demo');"
+    }
+  ]
+}

ui/wp-plugin/demo-site/build.sh

@@ -0,0 +1,49 @@
+#!/usr/bin/env bash
+# Assemble the deployable demo site into ./dist.
+#
+# wp-plugin.zip is built from the plugin source next door rather than committed.
+# The hand-uploaded copy on S3 sat at the Feb 2024 build for two and a half years
+# while the source moved on, so a demo created from it installed a plugin that
+# silently ignored half its own settings. Generating the zip here means the demo
+# can only ever ship what is actually in the tree.
+set -euo pipefail
+
+here="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+plugin_dir="$(dirname "$here")"
+out="$here/dist"
+
+command -v python3 >/dev/null || {
+  echo "build.sh needs python3, which is not on PATH in this build image" >&2
+  exit 1
+}
+
+rm -rf "$out"
+mkdir -p "$out/stage/wp-plugin"
+
+# Mirror the layout of the published archive: a single top-level wp-plugin/ dir.
+for f in browsers-unbounded-plugin.php README.md; do
+  cp "$plugin_dir/$f" "$out/stage/wp-plugin/$f"
+done
+
+# zipfile rather than the zip(1) binary: Cloudflare's Pages build image ships
+# python3 but not zip, and this keeps the local and CI builds on one code path.
+python3 - "$out/stage" "$out/wp-plugin.zip" <<'PY'
+import os, sys, zipfile
+
+stage, target = sys.argv[1], sys.argv[2]
+with zipfile.ZipFile(target, "w", zipfile.ZIP_DEFLATED) as z:
+    for root, dirs, files in sorted(os.walk(stage)):
+        dirs.sort()
+        rel = os.path.relpath(root, stage)
+        if rel != ".":
+            z.writestr(rel + "/", "")
+        for name in sorted(files):
+            path = os.path.join(root, name)
+            z.write(path, os.path.relpath(path, stage))
+PY
+rm -rf "$out/stage"
+
+cp "$here/index.html" "$here/blueprint.json" "$here/_headers" "$out/"
+
+version=$(sed -n 's/^ \* Version: *//p' "$plugin_dir/browsers-unbounded-plugin.php" | head -1)
+echo "built demo site -> $out (plugin v${version:-unknown}, zip $(wc -c < "$out/wp-plugin.zip") bytes)"