| 1 |
# WP Desktop Mode |
| 2 |
|
| 3 |
A WordPress plugin that reimagines `/wp-admin` as a desktop operating system. Admin screens open as draggable, resizable, minimizable **windows** on a **desktop**, with a left-edge **dock** built from the admin menu. Purely opt-in per user — the classic admin stays untouched for everyone else, and deactivating the plugin restores vanilla Core exactly. |
| 4 |
|
| 5 |
Zero Core patches. Every feature is wired through public WordPress hooks. |
| 6 |
|
| 7 |
[](https://wordpress.org/plugins/desktop-mode/](https://wordpress.org/plugins/desktop-mode/](https://wordpress.org/plugins/desktop-mode/) [](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/desktop-mode/refs/heads/trunk/.wordpress-org/blueprints/blueprint.json](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/desktop-mode/refs/heads/trunk/.wordpress-org/blueprints/blueprint.json](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/desktop-mode/refs/heads/trunk/.wordpress-org/blueprints/blueprint.json) [](https://wp.com/open?deep_link=add-site%3Fblueprint_url%3Dhttps%253A%252F%252Fraw.githubusercontent.com%252FWordPress%252Fdesktop-mode%252Frefs%252Fheads%252Ftrunk%252F.wordpress-org%252Fblueprints%252Fblueprint.json](https://wp.com/open?deep_link=add-site%3Fblueprint_url%3Dhttps%253A%252F%252Fraw.githubusercontent.com%252FWordPress%252Fdesktop-mode%252Frefs%252Fheads%252Ftrunk%252F.wordpress-org%252Fblueprints%252Fblueprint.json](https://wp.com/open?deep_link=add-site%3Fblueprint_url%3Dhttps%253A%252F%252Fraw.githubusercontent.com%252FWordPress%252Fdesktop-mode%252Frefs%252Fheads%252Ftrunk%252F.wordpress-org%252Fblueprints%252Fblueprint.json) |
| 8 |
|
| 9 |
## Demo |
| 10 |
|
| 11 |
<video src="https://github.com/user-attachments/assets/590aacc2-e9d7-4213-889e-b91e060e1bd8" controls width="720"></video> |
| 12 |
|
| 13 |
--- |
| 14 |
|
| 15 |
## Contents |
| 16 |
|
| 17 |
- [](#demoDemo](#demo](#demo) |
| 18 |
- [](#current-stateCurrent State](#current-state](#current-state) |
| 19 |
- [](#still-aheadStill ahead](#still-ahead](#still-ahead) |
| 20 |
- [](#repository-layoutRepository layout](#repository-layout](#repository-layout) |
| 21 |
- [](#bundled-extensionsBundled extensions](#bundled-extensions](#bundled-extensions) |
| 22 |
- [](#how-to-run-itHow to run it](#how-to-run-it](#how-to-run-it) |
| 23 |
- [](#quick-installQuick install](#quick-install](#quick-install) |
| 24 |
- [](#development-setupDevelopment setup](#development-setup](#development-setup) |
| 25 |
- [](#requirementsRequirements](#requirements](#requirements) |
| 26 |
- [](#for-plugin-authorsFor plugin authors](#for-plugin-authors](#for-plugin-authors) |
| 27 |
- [](#licenseLicense](#license](#license) |
| 28 |
|
| 29 |
--- |
| 30 |
|
| 31 |
## Current State |
| 32 |
|
| 33 |
- **Per-user opt-in** |
| 34 |
Admin-bar toggle sets the `desktop_mode_mode` user meta. A dedicated `/desktop-mode/` portal URL auto-enables desktop mode for first-time visitors (gated by `desktop_mode_portal_auto_enable`) and the `admin_init` redirect sends opted-in users from `/wp-admin/` to the portal (`desktop_mode_admin_redirect_to_portal`). |
| 35 |
|
| 36 |
- **Desktop shell** |
| 37 |
Fixed-viewport desktop that overlays `/wp-admin`: wallpaper area, unified dock (placement picked in OS Settings — left / right / bottom, default bottom), right-column widget layer, and full windowing system. `desktop_mode_mode_init`, `desktop_mode_shell_before` / `_after`, and the `desktop_mode_shell_config` filter are the main extension points. |
| 38 |
|
| 39 |
- **Window system — iframe + native** |
| 40 |
Iframe windows load admin pages with `?wp_desktop=1` (chromeless mode). Native windows render directly in the parent DOM via `desktop_mode_register_window()` / `wp.desktop.registerWindow()` — multi-tab native windows are supported through `desktop_mode_register_window_tab()`. Both types share drag, resize, minimize, maximize, close, fullscreen, and detach-to-new-tab. |
| 41 |
|
| 42 |
- **Dock** |
| 43 |
One unified rail hosting every admin menu — core and plugin alike — plus shell-level system tiles. Placement (left / right / bottom) is the user's OS Settings preference. Core menus are ordered before plugin menus; per-item hiding via `desktop_mode_dock_placement` (`'hidden'`). Per-item multi-window support via `desktop_mode_dock_item_multi`. Letter-badge icon fallback for plugins without icon art. |
| 44 |
|
| 45 |
- **Virtual desktops (“Spaces”)** |
| 46 |
Multiple desktops per user, each with its own window set. Overview grid (zoom-out view) surfaces the Spaces switcher, thumbnails, and create/close controls. |
| 47 |
|
| 48 |
- **Arrange & snap** |
| 49 |
Admin-bar Arrange menu: Cascade, Tile, Overview, Snap to grid. Plugins contribute custom entries via `desktop_mode_arrange_menu_items` and react to clicks via `desktop-mode.arrange.custom-action`. Tile grid dimensions and snap cell size are both filterable. |
| 50 |
|
| 51 |
- **Wallpaper registry** |
| 52 |
Server- and client-side registration (`desktop_mode_register_wallpaper()` / `wp.desktop.registerWallpaper()`). CSS presets + canvas (WebGL/2D) wallpapers with collision-aware surface data (`wp.desktop.getWallpaperSurfaces()`) for snow/rain/physics effects. In-panel `renderEditor` callback for custom controls, shared vendor-module loader (`pixijs` pre-registered). |
| 53 |
|
| 54 |
- **Widgets** |
| 55 |
Right-column floating cards, optionally draggable / resizable outside the column. `desktop_mode_register_widget()` / `wp.desktop.registerWidget()`. Built-in clock. User placement persists per-user in `localStorage`. |
| 56 |
|
| 57 |
- **Desktop icons** |
| 58 |
Wallpaper-layer shortcuts via `desktop_mode_register_icon()` — targets a registered native window or an admin URL. |
| 59 |
|
| 60 |
- **AI Assistant + slash commands** |
| 61 |
Cmd+K palette backed by an OpenAI agentic loop whose `search_posts` / `search_pages` / `search_comments` tools run WordPress's native keyword search. Admin-configured API key + model picker. The only automatic AI analysis is comment spam scoring (on comment save), which feeds the comments-window spam score; posts, pages, and terms are not analyzed. `wp.desktop.registerCommand()` adds slash commands with autocomplete (`suggest()`), confirm dialogs (`ctx.confirm()`), and full lifecycle hooks (`before-run` / `after-run` / `error`). Built-in `/open [window]` is extensible via `desktop-mode.open-command.items`. |
| 62 |
|
| 63 |
- **Palette registry** |
| 64 |
Cmd+K cycles through all registered palettes (`wp.desktop.registerPalette()`) — the AI assistant is palette 0 by default; additional plugin overlays share the shortcut. |
| 65 |
|
| 66 |
- **Cross-frame drag bridge** |
| 67 |
Media-library attachments drag across iframe boundaries via coordinated postMessage. Site-wide toggle through the Extended Options REST endpoint. |
| 68 |
|
| 69 |
- **Toast notifications** |
| 70 |
Shell-level toasts rendered via the `<wpd-toast>` component. Plugins register their own tone/icon via the `desktop_mode_toast_types` filter. Iframe pages raise a toast through the `desktop-mode-notification` bridge message — it survives the iframe's own lifecycle. |
| 71 |
|
| 72 |
- **OS Settings** |
| 73 |
Native-window settings panel: wallpaper picker (with HD-only media filter), accent color swatches + custom gradient editor, dock size slider, AI platform config, and per-user default-on-startup window. Persisted via `/desktop-mode/v1/os-settings`. |
| 74 |
|
| 75 |
- **Session persistence** |
| 76 |
Full window stack (including desktops, focus, state) is debounce-saved to `/desktop-mode/v1/session` and restored without layout flicker. Viewport-shrink clamping keeps off-screen windows reachable. |
| 77 |
|
| 78 |
- **postMessage bridge** |
| 79 |
Typed messages for title changes, navigation (same-origin validated), focus, color-scheme sync, screen-meta panels (Screen Options / Help), external-link capture, iframe-ready handshake, and observability (`iframe-error`, `iframe-network`). |
| 80 |
|
| 81 |
- **UI component library** |
| 82 |
~25 `<wpd-*>` web components (`wpd-button`, `wpd-menu`, `wpd-panel`, `wpd-range-field`, `wpd-swatch`, `wpd-toast`, `wpd-tabs`, …) available to plugin authors — rendered server-side via `desktop_mode_component()` or imported in TS. |
| 83 |
|
| 84 |
- **i18n** |
| 85 |
Full gettext coverage across PHP and TypeScript; Spanish translation shipped. Strings go through `wp.i18n` (`__`, `_x`, `_n`, `sprintf`) directly — no shell-specific re-export. |
| 86 |
|
| 87 |
- **Component registration API** |
| 88 |
Stable `desktop_mode_register_*` functions for windows, widgets, wallpapers, icons, and window tabs. All return `true` / `WP_Error` with documented error codes. |
| 89 |
|
| 90 |
- **Public hook API** |
| 91 |
Comprehensive PHP and JS hook surface — dock items, placement, multi-window, native-window lifecycle, widget lifecycle, wallpaper lifecycle + surfaces, window lifecycle, iframe observability, arrange actions, virtual-desktop transitions, palette registration, command lifecycle, batch close, AI prompt + model + post-type filters, accents, toast types, default wallpaper. See [](./docs/hooks-reference.md`docs/hooks-reference.md`](./docs/hooks-reference.md](./docs/hooks-reference.md) and [](./docs/javascript-reference.md`docs/javascript-reference.md`](./docs/javascript-reference.md](./docs/javascript-reference.md). |
| 92 |
|
| 93 |
--- |
| 94 |
|
| 95 |
## Still ahead |
| 96 |
|
| 97 |
- **Mobile (phone OS)** — purpose-built home-screen grid, full-screen apps, app switcher, gesture nav, bottom tab bar. |
| 98 |
- **Tablet hybrid** — split view, slide-over, horizontal dock. `wp.desktop.mode = 'desktop' | 'tablet' | 'mobile'` surface. |
| 99 |
- **Cross-window drag & drop (the North Star)** — extend the current drag bridge to Media → Gutenberg block insertion, with pluggable mime-type negotiation. |
| 100 |
- **Polish** — color-scheme-aware variables across all shell surfaces, View Transitions API animations, full a11y audit (ARIA, focus traps, keyboard nav). |
| 101 |
- **…and a whole lot more hooks, filters, and actions** — every new surface lands with its own extension points, so this list keeps growing. |
| 102 |
|
| 103 |
See [](./docs/architecture.md`docs/architecture.md`](./docs/architecture.md](./docs/architecture.md) for how the pieces fit together and [](./docs/hooks-reference.md`docs/hooks-reference.md`](./docs/hooks-reference.md](./docs/hooks-reference.md) for the hook surface (current and planned). |
| 104 |
|
| 105 |
--- |
| 106 |
|
| 107 |
## Repository layout |
| 108 |
|
| 109 |
``` |
| 110 |
. |
| 111 |
├── desktop-mode.php # bootstrap: header, constants, require_once of includes/ |
| 112 |
├── includes/ # PHP subsystems |
| 113 |
│ ├── helpers.php admin-bar.php ajax.php |
| 114 |
│ ├── assets.php render.php portal.php |
| 115 |
│ ├── session.php default-window.php components.php |
| 116 |
│ ├── os-settings.php extended-options.php |
| 117 |
│ ├── accents.php wallpapers.php toast-types.php |
| 118 |
│ ├── media-query.php |
| 119 |
│ └── ai-copilot/ # AI assistant (OpenAI client, analysis, search, jobs) |
| 120 |
├── assets/ # hand-authored CSS + JS build output |
| 121 |
│ ├── css/ desktop.css, windows.css, dock.css, chromeless.css, variables.css |
| 122 |
│ └── js/ Vite bundles (gitignored; regenerate with npm run build) — only |
| 123 |
│ admin-bar.js and media-library-enhanced.js are hand-written and tracked |
| 124 |
├── src/ # TypeScript source — compiled by Vite |
| 125 |
│ ├── desktop.ts / dock.ts / hooks.ts / commands.ts / palette-registry.ts |
| 126 |
│ ├── ai-assistant/ + drag-bridge.ts / toast.ts / desktop-icons.ts |
| 127 |
│ ├── native-windows.ts / built-in-commands.ts / public-api.ts / types.ts |
| 128 |
│ ├── window/ # Window class — DOM, pointer, tabs, iframe bridge |
| 129 |
│ ├── window-manager/ # stack, desktops, arrange, snap, overview |
| 130 |
│ ├── wallpapers/ # registry, layer, surfaces, server sync, vendor loader |
| 131 |
│ ├── widgets/ # registry, layer, frame, picker, storage |
| 132 |
│ ├── settings/ # OS Settings panel sections |
| 133 |
│ ├── ui/ # <wpd-*> web components |
| 134 |
│ ├── modules/ # vendor-script lazy-loader |
| 135 |
│ └── plugins/ # built-in demos (animated-logo-wallpaper) |
| 136 |
├── docs/ # developer-facing docs (source of truth for plugin authors) |
| 137 |
├── extensions/ # bundled sibling plugins (see "Bundled extensions" below) |
| 138 |
├── tests/ # PHPUnit + Vitest |
| 139 |
├── languages/ # .po / .mo (es shipped) |
| 140 |
├── bin/ # package-zip helpers |
| 141 |
├── package.json # devDeps (vite, typescript, vitest) |
| 142 |
├── vite.config.js # Vite lib-mode: src/desktop.ts → assets/js/desktop[.min].js (IIFE) |
| 143 |
├── vitest.config.ts |
| 144 |
└── tsconfig.json |
| 145 |
``` |
| 146 |
|
| 147 |
--- |
| 148 |
|
| 149 |
## Bundled extensions |
| 150 |
|
| 151 |
The `extensions/` directory hosts sibling plugins that build on Desktop Mode's public APIs. Each one is a standalone WordPress plugin (`Requires Plugins: desktop-mode`) installed from its own zip — run `./bin/package-extensions.sh` to build one `<slug>.zip` per extension under `dist/`; see [](./docs/RELEASE.md#packaging-extensions`docs/RELEASE.md`](./docs/RELEASE.md#packaging-extensions](./docs/RELEASE.md#packaging-extensions) for the full packaging steps. (`extensions/base/` is a shared base library for extension authors, not an installable plugin.) |
| 152 |
|
| 153 |
- **Code Editor** (`desktop-mode-code-editor`) — a Monaco-backed Code editor native window for browsing and editing files inside `wp-content`. Editing requires the `edit_plugins` capability and is disabled entirely when `DISALLOW_FILE_EDIT` is set. |
| 154 |
- **Cron Manager** (`desktop-mode-cron-manager`) — a Cron Jobs native window for browsing, editing, deleting, and running WP-Cron events. Gated by `manage_options`. |
| 155 |
- **phpMyAdmin** (`desktop-mode-phpmyadmin`) — embeds a bundled phpMyAdmin install as a native window. **Local environments only**: the window registers solely when `wp_get_environment_type()` is `'local'`, because the bundled phpMyAdmin runs with `auth_type=config` and reuses the WordPress DB credentials — any visitor who finds the URL gets full DB access. The `manage_options` check only hides the shortcut from lower-privilege users; it does **not** gate the underlying URL. |
| 156 |
|
| 157 |
--- |
| 158 |
|
| 159 |
## How to run it |
| 160 |
|
| 161 |
### Quick install |
| 162 |
|
| 163 |
Just want to try it? Grab the pre-built zip and upload it to any WordPress — [](https://developer.wordpress.com/studio/Studio by WordPress.com](https://developer.wordpress.com/studio/](https://developer.wordpress.com/studio/), [](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/`wp-env`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/), or a hosted site. No Node, no build step. |
| 164 |
|
| 165 |
1. Download [](https://github.com/WordPress/desktop-mode/releases/latest/download/desktop-mode.zip`desktop-mode.zip`](https://github.com/WordPress/desktop-mode/releases/latest/download/desktop-mode.zip](https://github.com/WordPress/desktop-mode/releases/latest/download/desktop-mode.zip) from the latest release (or pick a specific version from the [](https://github.com/WordPress/desktop-mode/releasesreleases page](https://github.com/WordPress/desktop-mode/releases](https://github.com/WordPress/desktop-mode/releases)). |
| 166 |
2. In WP Admin: **Plugins → Add New → Upload Plugin**, choose the zip, and activate. |
| 167 |
3. Click the **desktop** icon in the admin bar's top-right corner. The admin reloads inside the desktop shell. Click the same icon again to return to classic admin. |
| 168 |
|
| 169 |
### Development setup |
| 170 |
|
| 171 |
For hacking on the plugin: clone the repo, run the build in watch mode, and load it into a local WordPress via symlink so every save is one browser refresh away. |
| 172 |
|
| 173 |
#### 1. Install dependencies |
| 174 |
|
| 175 |
```bash |
| 176 |
npm install |
| 177 |
``` |
| 178 |
|
| 179 |
#### 2. Build the TypeScript bundle |
| 180 |
|
| 181 |
The plugin uses **[](https://vitejs.dev/Vite](https://vitejs.dev/](https://vitejs.dev/)** in library mode. esbuild handles transpile and minify, so builds finish in ~70 ms per bundle. |
| 182 |
|
| 183 |
**Full build** — runs the PixiJS vendor-copy step plus every `build:*` target defined in `package.json` (one Vite bundle each; the `scripts` block in `package.json` and the entry map in `vite.config.js` are the authoritative target list): |
| 184 |
|
| 185 |
```bash |
| 186 |
npm run build |
| 187 |
``` |
| 188 |
|
| 189 |
Writes one `assets/js/<target>.js` / `.min.js` pair per target, including: |
| 190 |
|
| 191 |
- `assets/js/desktop.js` / `.min.js` — main shell bundle (loaded based on `SCRIPT_DEBUG`). |
| 192 |
- `assets/js/iframe-bridge.js` / `.min.js` — opt-in bridge that gives any same-origin iframe access to `wp.desktop.iframe.*`. |
| 193 |
- `assets/js/recycle-bin.js` / `.min.js` — Recycle Bin native window. |
| 194 |
- `assets/js/posts-window.js` / `.min.js` — Native Posts window (the `<wpd-table>` replacement for the `edit.php` iframe; opt-in per user via OS Settings → Features). |
| 195 |
|
| 196 |
**Development watch** — auto-recompiles the unminified bundle on save: |
| 197 |
|
| 198 |
```bash |
| 199 |
npm run dev |
| 200 |
``` |
| 201 |
|
| 202 |
Leave it running in a separate terminal; refresh the browser after each save. Set `define( 'SCRIPT_DEBUG', true )` in `wp-config.php` so WordPress picks up the unminified bundle during development. |
| 203 |
|
| 204 |
#### 3. Load into a local WordPress |
| 205 |
|
| 206 |
You need a running WordPress to load the plugin into. Pick whichever is easier. |
| 207 |
|
| 208 |
##### Studio, wp-env, or a hosted WP |
| 209 |
|
| 210 |
Run `npm run package` to build a zip from `HEAD` (with correct 0644 / 0755 permissions), then follow the [](#quick-installQuick install](#quick-install](#quick-install) steps 2–3 to upload and activate it. Re-package and re-upload after each change. |
| 211 |
|
| 212 |
> If you changed source, run `npm run build` before `npm run package` — the Vite output is gitignored, and `bin/package.sh` splices the built files into the zip from your working tree. |
| 213 |
|
| 214 |
##### Clone `wordpress-develop` and symlink |
| 215 |
|
| 216 |
Gives you the full dev loop: `npm run dev` rebuilds on save, a browser refresh picks it up. |
| 217 |
|
| 218 |
```bash |
| 219 |
# clone Core's Docker-based dev host alongside this repo |
| 220 |
git clone https://github.com/WordPress/wordpress-develop.git |
| 221 |
cd wordpress-develop |
| 222 |
npm install |
| 223 |
|
| 224 |
# symlink this plugin into the WP plugins directory |
| 225 |
ln -s "$(pwd)/../alcazaba-plugin" src/wp-content/plugins/desktop-mode |
| 226 |
|
| 227 |
# boot + install WordPress |
| 228 |
npm run env:start # nginx + PHP + MySQL in Docker |
| 229 |
npm run env:install # installs WordPress |
| 230 |
``` |
| 231 |
|
| 232 |
Site: **http://localhost:8889** |
| 233 |
Admin: **http://localhost:8889/wp-admin/** |
| 234 |
Credentials: `admin` / `password` |
| 235 |
|
| 236 |
Stop the environment with `npm run env:stop` (from the `wordpress-develop` directory). Activate the plugin per [](#quick-installQuick install](#quick-install](#quick-install) steps 2–3. |
| 237 |
|
| 238 |
--- |
| 239 |
|
| 240 |
## Requirements |
| 241 |
|
| 242 |
- WordPress **6.0+** |
| 243 |
- PHP **7.4+** |
| 244 |
|
| 245 |
## For plugin authors |
| 246 |
|
| 247 |
**This plugin is built to be extended.** Every significant behavior is hookable — drop an icon on the desktop, add a dock item, gate desktop mode by role, react to window events, or register a native window, all from your own plugin with zero patches here. |
| 248 |
|
| 249 |
**See [](./docs/README.md`docs/`](./docs/README.md](./docs/README.md) — the developer documentation index.** |
| 250 |
|
| 251 |
Quick links: |
| 252 |
|
| 253 |
- [](./docs/getting-started.mdGetting Started](./docs/getting-started.md](./docs/getting-started.md) — the five-minute tour for plugin authors. |
| 254 |
- [](./docs/architecture.mdArchitecture](./docs/architecture.md](./docs/architecture.md) — how the pieces fit together. |
| 255 |
- [](./docs/hooks-reference.mdHooks Reference](./docs/hooks-reference.md](./docs/hooks-reference.md) — every action and filter we fire, with signatures and examples. |
| 256 |
- [](./docs/javascript-reference.mdJavaScript Reference](./docs/javascript-reference.md](./docs/javascript-reference.md) — CustomEvents, `window.wp.desktop` API, and the iframe `postMessage` bridge. |
| 257 |
- [](./docs/examples/Examples](./docs/examples/](./docs/examples/) — copy-paste recipes. |
| 258 |
|
| 259 |
## License |
| 260 |
|
| 261 |
GPLv2 or later. See [](LICENSELICENSE](LICENSE](LICENSE). |
| 262 |
|
