https://github.com/devinwalker/devin.org
Custom Block Theme and Plugin
https://github.com/devinwalker/devin.org
Last synced: 8 months ago
JSON representation
Custom Block Theme and Plugin
- Host: GitHub
- URL: https://github.com/devinwalker/devin.org
- Owner: DevinWalker
- License: other
- Created: 2025-09-29T23:39:52.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-09-30T19:50:25.000Z (8 months ago)
- Last Synced: 2025-09-30T21:12:49.973Z (8 months ago)
- Language: JavaScript
- Size: 1 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Devin WP
A modern WordPress monorepo with a block theme and Gutenberg plugin using React, @wordpress/scripts (webpack), Tailwind CSS, and HMR.
## Prerequisites
- **Bun** installed (https://bun.sh)
- **LocalWP** site named `devin` (https://localwp.com)
- **PHP 8.3+** and **WordPress 6.7+**
## Quickstart
1. **Install dependencies:**
```bash
bun install
```
2. **Link to LocalWP site:**
```bash
bun run link:localwp
```
This symlinks both the plugin and theme into `~/Local Sites/devin/app/public/wp-content/`
3. **Activate in WordPress:**
- Go to your LocalWP site wp-admin
- Activate **Devin Theme** (Appearance → Themes)
- Activate **Devin Plugin** (Plugins → Installed Plugins)
4. **Development (with HMR):**
```bash
bun run start
```
This runs `wp-scripts start` for both packages with **Hot Module Replacement** enabled. Changes appear instantly without refreshing!
5. **Production build:**
```bash
bun run build
```
## Architecture
### Workspaces
- **devin-plugin**: Gutenberg blocks with react-bits (includes a Hero block with Prism background)
- **devin-theme**: Minimal block theme with Tailwind (Neutral/Amber palettes)
### Externalized Dependencies
WordPress-provided libraries are **externalized** (not bundled). Vite outputs IIFE bundles that map imports to browser globals:
| Import | Global |
|--------|--------|
| `@wordpress/element` | `wp.element` |
| `@wordpress/i18n` | `wp.i18n` |
| `@wordpress/blocks` | `wp.blocks` |
| `@wordpress/components` | `wp.components` |
| `@wordpress/data` | `wp.data` |
| `react` | `React` |
| `react-dom` | `ReactDOM` |
The PHP enqueue functions specify the correct `wp-element`, `wp-i18n`, etc. handles so WordPress loads them before our bundles.
### Tech Stack
- **Package Manager**: Bun
- **Bundler**: @wordpress/scripts (webpack with HMR)
- **Styling**: Tailwind CSS v3 with PostCSS
- **Font**: Geist (via @fontsource)
- **License**: GPL-2.0-or-later
### Development Workflow
This uses **@wordpress/scripts** with **Hot Module Replacement (HMR)**:
1. Run `bun run start` to start the dev server
2. Make changes in `src/` or `assets/`
3. Changes appear **instantly in the browser** (no refresh needed!)
4. Works seamlessly with LocalWP
### Theme Colors
- **Primary**: Tailwind Neutral palette
- **Secondary**: Tailwind Amber palette
### Minimum Requirements
- PHP 8.3+
- WordPress 6.7+
## Scripts
- `bun run start` – Development with HMR (both packages)
- `bun run start:plugin` – Dev server for plugin only
- `bun run start:theme` – Dev server for theme only
- `bun run build` – Production build (both packages)
- `bun run link:localwp` – Symlink plugin & theme to LocalWP site
## License
GPL-2.0-or-later