Browse Source

v0.5.0 Phase 1: @wordpress/scripts (v30) + webpack build toolchain

windhamdavid 2 days ago
parent
commit
22698388d6
9 changed files with 43563 additions and 5691 deletions
  1. 11 0
      .babelrc
  2. 1 0
      .gitignore
  3. 94 0
      _claude/notes/dependencies.md
  4. 92 0
      _claude/notes/upgrade-plan.md
  5. 43276 5689
      package-lock.json
  6. 21 2
      package.json
  7. 6 0
      src/index.js
  8. 2 0
      src/style.css
  9. 60 0
      webpack.config.js

+ 11 - 0
.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        "pragma": "wp.element.createElement"
+      }
+    ]
+  ]
+}

+ 1 - 0
.gitignore

@@ -5,6 +5,7 @@ inc/lib/call/auth.php
 
 npm-debug.log
 node_modules/
+build/
 
 .idea/
 .vscode/

+ 94 - 0
_claude/notes/dependencies.md

@@ -0,0 +1,94 @@
+# daw theme — dependency inventory (pre-0.5.0)
+
+Snapshot of everything the **classic** `daw` theme depends on, so we can isolate
+and decide each one's fate during the v0.5.0 FSE migration. Status legend:
+
+- **Keep** — still wanted; carry forward (possibly repackaged).
+- **Replace** — functionality stays, implementation changes (native/blocks/modern lib).
+- **Drop?** — likely dead or superseded; confirm before removing.
+- **Audit** — usage unclear; verify what still references it before deciding.
+
+---
+
+## 1. npm — runtime (`package.json` › dependencies)
+
+| Package | Ver | Used by | Status |
+|---|---|---|---|
+| bootstrap | ^5.2.3 | site-wide (`v4-bootstrap` bundle) | **Audit** — FSE/theme.json + blocks remove most of the need; may keep only grid/offcanvas |
+| bootstrap-icons | ^1.10.2 | icons | **Audit** |
+| jquery | ^3.6.1 | deregistered globally, re-enqueued per page | **Replace** — goal is no-jQuery; vanilla per block |
+| jquery-validation | ^1.19.5 | contact/forms | **Drop?** — Gravity Forms handles validation now |
+| jasny-bootstrap | ^4.0.0 | offcanvas (legacy) | **Drop?** — BS5 has native offcanvas (noted in v0.4 readme, never finished) |
+| svg-morpheus | ^0.3.0 | homepage icon morph (`front-page.js`) | **Keep** — tied to the bespoke homepage we're preserving |
+| animate.css | ^4.1.1 | scroll animations (WOW) | **Drop?** — prefers-reduced-motion + CSS |
+| fullcalendar | ^5.11.3 | calendar (desk/now?) | **Audit** — confirm which page still renders it |
+
+## 2. npm — dev (`package.json` › devDependencies)
+
+gulp, gulp-clean-css, gulp-concat, gulp-rename, gulp-sass, gulp-terser,
+gulp-uglify, sass, streamqueue, browser-sync.
+**Status: Replace** — the whole gulp pipeline → `@wordpress/scripts` + webpack (per 0.5.0 decision).
+
+## 3. Vendored / hand-managed JS (`js/`, not all from npm)
+
+Concatenated into `scripts.js` (per readme): WOW, jquery-validation, jquery_lazyload,
+backstretch (was Formstone Wallpaper), Rainbow, jquery.appear, Draw-Fill-SVG, typed.js,
+jquery-scrollto, smoothState, js-cookie, jquery-waypoints, ghembedder. Plus standalone:
+
+| File | Purpose | Status |
+|---|---|---|
+| `terminal.js` | old homepage terminal | **Drop?** — already removed from bundle (davo-chat replaced it) |
+| `messenger.min.js` + `css/messenger.css` | HubSpot Messenger | **Drop?** — deprecated (readme), still in front bundle |
+| `modernizr.js` | feature detection | **Drop?** — obsolete |
+| `mediaelement-and-player.min.js`, `wp-mediaelement.min.js` | media player | **Replace** — use core mediaelement or native `<audio>/<video>` |
+| `loop.js` | backbone/underscore/wp-api infinite loop (desk/archive) | **Replace** — core Query Loop block |
+| `chat.js` / `chat.min.js` / `chat_func.js` | Twilio chat (page-chat) | **Audit** — superseded by davo-bot? |
+| `moment.min.js` | dates (fullcalendar) | **Drop?** — follows fullcalendar decision |
+| `color.js`, `drawfillsvg.js` | effects | **Audit** |
+| Page JS: `about/art/music/desk/contact/single/studio/code/analytics.js` | per-page behavior | **Audit/Replace** — fold into blocks/parts where still needed |
+| `v4-*`, `*.min.js` | gulp build outputs | generated, not sources |
+
+## 4. CSS (`css/`)
+
+normalize.css, bootstrap (`boot.css`), animate (`v4-animate`), font-awesome.css,
+fullcalendar.css, messenger.css, chat.css, form.css, front-page.css, fonts.css,
+editor.css, `styles.scss`→`styles.css`. **Status: Replace** — most folds into
+`theme.json` (tokens/palette/typography) + per-block `style.css`; keep `front-page.css`
+(bespoke homepage) and `editor.css`.
+
+## 5. Vendored PHP libs (`inc/lib/`)
+
+| Lib | Path | Used by | Status |
+|---|---|---|---|
+| Twilio PHP SDK (full, ~80 files) | `inc/lib/call/Services/Twilio/*` | call/SMS/chat (`page-chat`, `phone.php`, `sms.php`, `call.php`) | **Audit** — is the phone/SMS/chat feature still live? If kept, replace vendored SDK with Composer `twilio/sdk` |
+| simple_html_dom | `inc/lib/dom.php`, `html_dom.php` | HTML scraping (music/last.fm? sitemap?) | **Audit** |
+
+`inc/lib/call/auth.php` is gitignored (secrets).
+
+## 6. Fonts (`fonts/`)
+
+Mixed `eot/otf/svg/ttf/woff/woff2` (11/1/9/11/12/3). Per `style.css` header:
+Font Awesome 4.2, Font Mfizz 2.1, Computer Modern. **Status: Audit/Replace** — declare
+kept faces in `theme.json` `fontFamilies`; drop icon fonts in favor of inline SVG/bootstrap-icons if still wanted.
+
+## 7. External / CDN
+
+| Service | Where | Status |
+|---|---|---|
+| Matomo (self-hosted `davidawindham.com/wik/`) | `dw_analytics()` footer | **Keep** → move to `inc/analytics/matomo.php` |
+| Stripe **v2** (`js.stripe.com/v2/`) | contact/pay pages | **Drop?** — Stripe v2 is long-deprecated; Gravity Forms Stripe add-on is the real payment path now |
+
+## 8. WordPress plugins in play (install-level, not theme deps — for context)
+
+Gravity Forms (+ Stripe/Signature/PDF), Akismet, WP Super Cache, WP Sweep,
+`dw-guten` (rebuilt v0.4), `daw-mcp`/`mcp-adapter`. Forms/validation/payments now
+belong to Gravity Forms — informs the **Drop?** calls on jquery-validation + Stripe v2.
+
+---
+
+## Isolation summary for the upgrade
+
+- **Definitely carry forward:** Matomo, svg-morpheus (homepage), `front-page.css`, davo-bot widget loader, `dw-guten` meta sidebar.
+- **Replace with platform:** gulp→wp-scripts, jQuery→vanilla, `loop.js`→Query Loop block, mediaelement→core/native, most CSS→`theme.json`.
+- **Confirm-then-drop:** terminal.js, messenger, modernizr, jasny-bootstrap, animate.css, jquery-validation, Stripe v2, moment/fullcalendar.
+- **Audit features before deciding:** Twilio call/SMS/chat, simple_html_dom, the per-page JS, icon fonts.

+ 92 - 0
_claude/notes/upgrade-plan.md

@@ -0,0 +1,92 @@
+# daw v0.5.0 — Upgrade Plan (working doc)
+
+Living plan for migrating the `daw` theme from a 22-year-old classic PHP theme to a
+modern FSE block theme. Update freely as we go. Companion: [[dependencies]].
+
+## Goal
+
+Bring `daw` in line with how I build themes now (the `srh` theme is the reference),
+shedding accumulated cruft along the way — without losing the bespoke, hand-crafted
+character of the site.
+
+## Locked decisions (2026-06-15)
+
+1. **Full block / FSE theme** — `theme.json` + `templates/` + `parts/` + `patterns/` + `blocks/`, Site-Editor driven (like `srh`).
+2. **Build:** `@wordpress/scripts` + webpack — replaces the gulp pipeline.
+3. **Homepage stays bespoke** — keep the hand-rolled `front-page.php` (centered card, davo-bot, inline critical CSS); a classic PHP front-page coexists fine inside a block theme.
+
+## Target conventions (from the `srh` theme)
+
+- **Loader:** thin `functions.php` → `require_once` of `inc/<module>/loader.php`; each subdir's loader requires its peers. Consistent `dw_` function prefix.
+- **`inc/` by concern:** e.g. `seo/`, `analytics/`, `perf/`, `a11y/`, `integrations/` — each procedural, hooked to `wp_head`/`wp_footer`/`wp_enqueue_scripts`.
+- **`theme.json` v3:** `settings` (layout contentSize/wideSize, color palette, typography fontFamilies/fontSizes, spacing) + `styles` (elements). Design tokens live here, not in CSS.
+- **`templates/` + `parts/`:** block-markup `*.html` (`index/single/archive/page/home/search/404/category`); parts for `header`/`footer`.
+- **`patterns/`:** auto-discovered from `/patterns/` via PHP file headers (Title/Slug/Categories/Block Types). Categories registered in `functions.php`.
+- **`blocks/`:** per-block `block.json` (apiVersion 3) + `render.php`; `autoRegister:true` for render-only blocks (WP 7.0+), manual `register_block_type` + editor script for interactive ones.
+- **Build:** `wp-scripts build`/`start`, custom `webpack.config.js` for extra entries + BrowserSync, `.babelrc` with `wp.element.createElement` pragma.
+
+---
+
+## Phases
+
+### Phase 0 — Get a handle on it (done)
+- [x] Document existing dependencies → [[dependencies]]
+- [~] **Refactor `functions.php` → modular `inc/`** — **deferred** (2026-06-15): it's only ~200 lines and readable enough; not worth chopping yet. The `inc/` modularization will happen naturally as the FSE build grows. Map kept below for when we do.
+
+**Proposed `functions.php` → `inc/` map (deferred — reference)** (current responsibilities → modules):
+
+| Current (in functions.php) | New home |
+|---|---|
+| `dw_setup()` — theme supports, image sizes | `inc/setup.php` |
+| `dw_scripts()` — the per-page enqueue ladder | `inc/assets.php` (the big readability win) |
+| `dw_editor()` — editor styles | `inc/assets.php` |
+| `dw_analytics()` — Matomo footer | `inc/analytics/matomo.php` |
+| `dw_login_session()` — auth cookie filter | `inc/auth.php` |
+| `dw_ask_widget()` — davo-bot loader | `inc/integrations/davo-bot.php` |
+| `dw_plugs()` → smtp | `inc/integrations/smtp.php` (wraps existing `inc/smtp.php`) |
+| existing `inc/{utils,template,tweaks,form,analytics}.php` | keep; fold into loader |
+
+`functions.php` ends up a thin bootstrap: define constants → `require inc/loader.php`.
+**Behavior must be byte-for-byte identical** at this stage (pure reorg, no feature change).
+
+### Phase 1 — Build toolchain (in progress)
+- [x] Stand up `@wordpress/scripts` + webpack: `package.json` (build/start scripts + deps), `.babelrc`, `webpack.config.js` (browser-sync proxying `daw.stu:3030`), `src/` → `build/` seed
+- [x] `npm install` + `npm run build` verified (compiles `src/` → `build/index.js`). `npm start` wired (browser-sync `daw.stu:3030`), not yet run.
+- [ ] Port front-end CSS/JS into `src/` as the block templates need it (incremental, through Phases 2–4)
+
+**Decision (2026-06-15):** new toolchain runs **alongside** the legacy gulp/`v4-*` build, not replacing it yet — the live theme still enqueues `v4-style.min.css` / `v4-script.min.js`, so gulp stays dormant (deps kept) until block templates supersede those assets. **Retiring gulp + `v4-*` moves to Phase 5.** New source is isolated in `src/` → `build/` so it never collides with the 40 legacy files in `js/`.
+
+### Phase 2 — theme.json foundation
+- [ ] `theme.json` v3: layout, color palette, typography, spacing, element styles
+- [ ] Port design tokens out of `style.css`/`styles.scss`
+
+### Phase 3 — Block templates + parts
+- [ ] `templates/`: index, single, archive, page, home, search, 404, category, tag
+- [ ] `parts/`: header, footer (retire `header-*.php` / `footer-*.php` variants)
+- [ ] Keep `front-page.php` bespoke (coexists)
+- [ ] Decide each legacy `page-*.php`: → block template, → pattern, → retire (see open questions)
+
+### Phase 4 — Patterns + custom blocks
+- [ ] `patterns/` for reusable sections
+- [ ] `blocks/` for dynamic bits (music/last.fm, desk loop → Query Loop, etc.)
+
+### Phase 5 — Cleanup (the "additional cleanup")
+- [ ] Drop confirmed-dead deps per [[dependencies]] (terminal.js, messenger, modernizr, jasny, animate.css…)
+- [ ] Resolve audits: Twilio call/SMS/chat, fullcalendar, simple_html_dom, Stripe v2, icon fonts
+- [ ] Remove legacy build outputs + `style.min.css`
+
+### Phase 6 — New features
+- [ ] _TBD — to be specified_
+
+---
+
+## Open questions / decisions to make
+
+- Sign-off on the Phase 0 `inc/` module map above.
+- **Page audit:** which legacy pages survive vs retire? Candidates to confirm: `bio`, `cv`, `shop`, `archive`, `chat`.
+- **Feature audits:** is the Twilio phone/SMS/chat feature still live? Is `fullcalendar` still rendered anywhere? Is `simple_html_dom` still used?
+- New features list (Phase 6).
+
+## Changelog
+
+- **2026-06-15** — Plan created; dependencies documented; decisions locked (FSE / wp-scripts / bespoke homepage).

File diff suppressed because it is too large
+ 43276 - 5689
package-lock.json


+ 21 - 2
package.json

@@ -1,14 +1,33 @@
 {
   "name": "daw-wp",
-  "version": "3.0.0",
+  "version": "0.5.0",
   "author": "@windhamdavid",
   "private": true,
   "repository": {
     "type": "git",
     "url": "git@github.com:windhamdavid/daw.git"
   },
+  "scripts": {
+    "build": "wp-scripts build",
+    "start": "wp-scripts start"
+  },
   "devDependencies": {
-    "browser-sync": "^2.11.2",
+    "@babel/core": "^7.22.0",
+    "@babel/preset-env": "^7.22.0",
+    "@babel/preset-react": "^7.22.0",
+    "@wordpress/babel-preset-default": "^7.22.0",
+    "@wordpress/block-editor": "^12.0.0",
+    "@wordpress/blocks": "^12.0.0",
+    "@wordpress/components": "^25.0.0",
+    "@wordpress/element": "^5.0.0",
+    "@wordpress/scripts": "^30.0.0",
+    "babel-loader": "^9.1.2",
+    "browser-sync": "^3.0.4",
+    "browser-sync-webpack-plugin": "^2.4.0",
+    "css-loader": "^7.1.2",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.85.0",
+    "webpack-cli": "^5.1.1",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
     "gulp-concat": "^2.6.1",

+ 6 - 0
src/index.js

@@ -0,0 +1,6 @@
+/**
+ * Front-end entry for the v0.5.0 theme (compiled to build/index.js).
+ * Seed only — real front-end JS + block view scripts land here during the
+ * FSE migration. See _claude/notes/upgrade-plan.md.
+ */
+import './style.css';

+ 2 - 0
src/style.css

@@ -0,0 +1,2 @@
+/* v0.5.0 front-end styles (src/ → build/). Seed only — tokens move to theme.json,
+   component styles arrive with the block templates. */

+ 60 - 0
webpack.config.js

@@ -0,0 +1,60 @@
+/**
+ * Build config for the v0.5.0 FSE migration (@wordpress/scripts + webpack).
+ *
+ * New theme source lives in src/ and compiles to build/ — kept separate from the
+ * legacy gulp pipeline (js/v4-*, style.min.css) which still serves the live site
+ * until the block templates supersede it (see _claude/notes/upgrade-plan.md).
+ *
+ * Custom-block entries (blocks/<name>/index.js) get added here as we build them
+ * out in Phase 4, mirroring the srh theme.
+ */
+const path = require('path');
+const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
+
+module.exports = {
+  entry: {
+    index: './src/index.js',
+  },
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: '[name].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: { loader: 'babel-loader' },
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new BrowserSyncPlugin({
+      host: 'daw.stu',
+      port: 3030,
+      proxy: 'https://daw.stu',
+      https: {
+        key: '/opt/homebrew/etc/httpd/ssl/daw.stu-key.pem',
+        cert: '/opt/homebrew/etc/httpd/ssl/daw.stu-cert.pem',
+      },
+      files: [
+        './**/*.php',
+        './src/**/*.js',
+        './src/**/*.css',
+        './templates/**/*.html',
+        './parts/**/*.html',
+        './patterns/**/*.php',
+        './theme.json',
+      ],
+      ignore: ['node_modules', 'build', 'js/v4-*', '*.min.*'],
+      open: 'external',
+      reloadDelay: 50,
+      injectChanges: true,
+      notify: false,
+    }),
+  ],
+};

Some files were not shown because too many files changed in this diff