Browse Source

phase 3: footers -> FSE template parts (bridged)

Migrate both footer variations to block template parts, kept live in the classic
theme via block_template_part():

- parts/footer.html (minimal) + parts/footer-home.html (full nav + social + cookie),
  block markup in wp:html blocks preserving the Bootstrap structure + JS hooks.
- footer.php / footer-home.php reduced to shims: block_template_part(...); wp_footer();
  + </body></html>.
- theme.json declares both parts (area "footer").
- home_url() links -> root-relative (/about ...): parts can't run PHP, and it's
  domain-agnostic ahead of the davidawindham -> davidwindham move.

block_template_part() resolves parts/*.html in a classic theme (verified), so these
render now AND are wired for the FSE flip. Establishes the migration pattern.
windhamdavid 3 days ago
parent
commit
1b3c4b5e88
7 changed files with 116 additions and 75 deletions
  1. 6 2
      _claude/notes/page-templates.md
  2. 13 0
      _claude/notes/upgrade-plan.md
  3. 9 53
      footer-home.php
  4. 9 19
      footer.php
  5. 54 0
      parts/footer-home.html
  6. 20 0
      parts/footer.html
  7. 5 1
      theme.json

+ 6 - 2
_claude/notes/page-templates.md

@@ -41,7 +41,11 @@ Companion: [[upgrade-plan]]. Diff metric = changed lines vs plain `page.php`.
   theme's only header; `header-home.php` and `header-studio.php` both removed. The full nav lives
   in the footer, so the header nav stays minimal. Pages needing the preloader call
   `get_template_part('loader')` directly (About, Studio). In FSE this `header.php` → one header part.
-- **Footer split:** `get_footer('home')` → about, archive, bio, contact, desk, sitemap, studio. Default `get_footer()` → analytics, art, music, now. In FSE this becomes a **template-part choice**, not per-file.
-- **Header variants (now 2):** default `header.php` (most), `'home'` = `header-home.php` (index, about, studio). In FSE → one header part.
+- **Footer split (DONE 2026-06-19 — now block parts):** both kept, sourced from `parts/footer.html`
+  (minimal) + `parts/footer-home.html` (full). `footer.php`/`footer-home.php` are thin shims that
+  `block_template_part(...)`. `get_footer('home')` → footer-home (about, archive, bio, contact, desk,
+  sitemap, studio); default `get_footer()` → footer (analytics, art, music, now). In the FSE flip,
+  templates reference these parts directly via `<!-- wp:template-part -->`.
+- **Header (DONE):** single `header.php` (see note above).
 - **Already selectable (have `Template Name`):** about→Home, archive→Posts, desk→Desk, music→Music, now→Now, sitemap→Sitemap, + our no-title→No Title. The rest (analytics, art, bio, contact, studio) are **slug-based** (`page-{slug}.php` auto-applies).
 - **Bespoke/self-contained:** `front-page.php` (homepage) bypasses the header/footer system — decide in Phase 3 whether it stays bespoke PHP or becomes a block template.

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

@@ -136,6 +136,19 @@ Considering moving the whole site from **davidawindham.com → davidwindham.com*
 
 ## Changelog
 
+- **2026-06-19** — **Phase 3: footers migrated to FSE template parts (live via bridge).** Both
+  footer variations kept, now sourced from block template parts: `parts/footer.html` (minimal) +
+  `parts/footer-home.html` (full nav columns + social + cookie notice). The classic `footer.php` /
+  `footer-home.php` are now thin shims — `block_template_part('footer'|'footer-home'); wp_footer();`
+  + `</body></html>`. **Key finding:** `block_template_part()` DOES resolve `parts/*.html` in a
+  classic theme (tested via `wp eval`), so no `do_blocks()` fallback needed — the parts render live
+  now AND are ready for the FSE flip (templates will reference them via `<!-- wp:template-part -->`).
+  `home_url()` links converted to **root-relative** (`/about` etc.) since parts can't run PHP —
+  bonus: domain-agnostic ahead of the davidawindham→davidwindham move. `theme.json` now declares
+  `templateParts` (footer, footer-home → area "footer"). Verified `/about/` (footer-home) + `/now/`
+  (footer) render correctly, 200, no errors. **Pattern established for the rest of the FSE migration:
+  author `parts/*.html`, bridge from the classic template via `block_template_part()`.**
+
 - **2026-06-19** — **Phase 3: headers consolidated to one.** Retired `header-home.php` (the
   nested Font-Awesome sidebar/offcanvas nav). About + Studio now use the single `header.php`
   (flat Bootstrap-Icons horizontal nav) like the rest of the site — the full navigation lives

+ 9 - 53
footer-home.php

@@ -1,55 +1,11 @@
-<div class="container-fluid footer footer-home dark">
-	<div class="container">
-		<div class="row">
-			<div class="col-md-4">
-				<ul style="float:left;margin-right:10px;">
-					<li><a href="<?php echo home_url( '/' ); ?>about"><span class="fa fa-file-text-o fa-fw"></span> About</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>desk/archive" title="Archive"><span class="fa fa-archive fa-fw"></span> Archive</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>studio/music/"><span class="fa fa-microphone fa-fw"></span> Audio</a></li>
-					<li><a href="https://davidwindham.com/rtc"><span class="fa fa-comment fa-fw"></span> Chat</a></li>
-					<li><a href="http://chess.davidwindham.com"><span class="chess-html">&#9814;</span> Chess</a></li>
-					<li><a href="http://code.davidawindham.com"><span class="fa fa-code fa-fw"></span> Code</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>contact"><span class="fa fa-envelope-o fa-fw"></span> Contact</a></li>
-				</ul>
-				<ul style="float:left;margin-right:10px;">
-					<li><a href="<?php echo home_url( '/' ); ?>desk"><span class="fa fa-pencil-square-o fa-fw"></span> Desk</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>mail/" title="Newsletter"><span class="fa fa-paper-plane-o fa-fw"></span> Email</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>contact/guests" title="Guestbook"><span class="fa fa-pencil-square fa-fw"></span> Guests</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>"><span class="fa fa-home fa-fw"></span> Home</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>studio/art/" title="Art"><span class="fa fa-paint-brush fa-fw"></span> Paint</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>pay"><span class="fa fa-credit-card fa-fw"></span> Pay</a></li>
-				</ul>
-				<ul style="float:left;margin-right:10px;">
-					<li><a href="http://photo.davidwindham.com" title="Photo"><span class="fa fa-camera-retro fa-fw"></span> Photo</a></li>
-					<li><a href="http://radio.davidawindham.com"><span class="fa fa-microphone fa-fw"></span> Radio</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>shop"><span class="fa fa-credit-card fa-fw"></span> Shop</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>about/analytics/" title="analytics"><span class="fa fa-tachometer fa-fw"></span> Stats</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>studio"><span class="fa fa-flask fa-fw"></span> Studio</a></li>
-					<li><a href="<?php echo home_url( '/' ); ?>til/" title="Today I Learned"><span class="fa fa-book fa-fw"></span> TIL</a></li>
-				</ul>
-			</div>
-		</div>
-		<div class="row mt-5">
-			<div class="col-md-4">
-				<ul class="social">
-					<li><a href="https://bsky.app/profile/davidwindham.com" class="twitter" rel="me"><span class="fa fa-2x fa-twitter-square"></span></a></li>
-					<li><a href="https://www.facebook.com/davidawindham" class="facebook"><span class="fa fa-2x fa-facebook-square"></span></a></li>
-          <li><a href="https://www.reddit.com/user/windhamdavid" class="reddit"><span class="fa fa-2x fa-reddit-square"></span></a></li>
-					<li><a href="https://github.com/windhamdavid" class="github" rel="me"><span class="fa fa-2x fa-github-square"></span></a></li>
-				</ul>
-			</div>
-			<div class="col-md-3 offset-sm-5">
-				<p class="small dim right">&copy; 2004-2026<br />
-				<p class="small dim right"><a href="<?php echo home_url( '/' ); ?>sitemap"><span class="fa fa-sitemap fa-fw"></span> Sitemap</a><br />
-				<span class="small dull right">This website uses cookies</span></p>
-			</div>
-		</div>
-	</div>
-	<div class="cookie-notification js-cookie-notification">
-		<p>By using this website, you agree to the use of<br />cookies and the <a href="https://davidawindham.com/privacy/">privacy policy</a>.</p>
-		<button class="btn btn-default" type="submit"><a href="#" class="js-cookie-notification-hide">Agree and dismiss</a></button>
-	</div>
-</div>
-<?php wp_footer(); ?>
+<?php
+/**
+ * Full footer (nav columns + social + cookie notice). The markup now lives in
+ * parts/footer-home.html (a block template part), shared with the FSE flip; it is
+ * rendered here for the classic theme via block_template_part().
+ */
+block_template_part( 'footer-home' );
+wp_footer();
+?>
 </body>
 </html>

+ 9 - 19
footer.php

@@ -1,21 +1,11 @@
-<div class="container-fluid footer">
-	<div class="container">
-		<div class="row">
-			<div class="col-md-4">
-				</div>
-			<div class="col-md-4">
-				<p class="dim"><p>
-			</div>
-			<div class="col-md-4">
-				<p class="small dim right">&copy; 2004-2026</p>
-			</div>
-		</div>
-	</div>
-	<div class="cookie-notification js-cookie-notification">
-		<p>By using this website, you agree to the use of<br />cookies and the <a href="https://davidawindham.com/privacy/">privacy policy</a>.</p>
-		<button class="btn btn-default" type="submit"><a href="#" class="js-cookie-notification-hide">Agree and dismiss</a></button>
-	</div>
-</div>
-<?php wp_footer(); ?>
+<?php
+/**
+ * Minimal footer. The markup now lives in parts/footer.html (a block template part),
+ * so it is shared with the FSE flip; it is rendered here for the classic theme via
+ * block_template_part(). Pages wanting the full footer use get_footer('home').
+ */
+block_template_part( 'footer' );
+wp_footer();
+?>
 </body>
 </html>

+ 54 - 0
parts/footer-home.html

@@ -0,0 +1,54 @@
+<!-- wp:html -->
+<div class="container-fluid footer footer-home dark">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-4">
+				<ul style="float:left;margin-right:10px;">
+					<li><a href="/about"><span class="fa fa-file-text-o fa-fw"></span> About</a></li>
+					<li><a href="/desk/archive" title="Archive"><span class="fa fa-archive fa-fw"></span> Archive</a></li>
+					<li><a href="/studio/music/"><span class="fa fa-microphone fa-fw"></span> Audio</a></li>
+					<li><a href="https://davidwindham.com/rtc"><span class="fa fa-comment fa-fw"></span> Chat</a></li>
+					<li><a href="http://chess.davidwindham.com"><span class="chess-html">&#9814;</span> Chess</a></li>
+					<li><a href="http://code.davidawindham.com"><span class="fa fa-code fa-fw"></span> Code</a></li>
+					<li><a href="/contact"><span class="fa fa-envelope-o fa-fw"></span> Contact</a></li>
+				</ul>
+				<ul style="float:left;margin-right:10px;">
+					<li><a href="/desk"><span class="fa fa-pencil-square-o fa-fw"></span> Desk</a></li>
+					<li><a href="/mail/" title="Newsletter"><span class="fa fa-paper-plane-o fa-fw"></span> Email</a></li>
+					<li><a href="/contact/guests" title="Guestbook"><span class="fa fa-pencil-square fa-fw"></span> Guests</a></li>
+					<li><a href="/"><span class="fa fa-home fa-fw"></span> Home</a></li>
+					<li><a href="/studio/art/" title="Art"><span class="fa fa-paint-brush fa-fw"></span> Paint</a></li>
+					<li><a href="/pay"><span class="fa fa-credit-card fa-fw"></span> Pay</a></li>
+				</ul>
+				<ul style="float:left;margin-right:10px;">
+					<li><a href="http://photo.davidwindham.com" title="Photo"><span class="fa fa-camera-retro fa-fw"></span> Photo</a></li>
+					<li><a href="http://radio.davidawindham.com"><span class="fa fa-microphone fa-fw"></span> Radio</a></li>
+					<li><a href="/shop"><span class="fa fa-credit-card fa-fw"></span> Shop</a></li>
+					<li><a href="/about/analytics/" title="analytics"><span class="fa fa-tachometer fa-fw"></span> Stats</a></li>
+					<li><a href="/studio"><span class="fa fa-flask fa-fw"></span> Studio</a></li>
+					<li><a href="/til/" title="Today I Learned"><span class="fa fa-book fa-fw"></span> TIL</a></li>
+				</ul>
+			</div>
+		</div>
+		<div class="row mt-5">
+			<div class="col-md-4">
+				<ul class="social">
+					<li><a href="https://bsky.app/profile/davidwindham.com" class="twitter" rel="me"><span class="fa fa-2x fa-twitter-square"></span></a></li>
+					<li><a href="https://www.facebook.com/davidawindham" class="facebook"><span class="fa fa-2x fa-facebook-square"></span></a></li>
+          <li><a href="https://www.reddit.com/user/windhamdavid" class="reddit"><span class="fa fa-2x fa-reddit-square"></span></a></li>
+					<li><a href="https://github.com/windhamdavid" class="github" rel="me"><span class="fa fa-2x fa-github-square"></span></a></li>
+				</ul>
+			</div>
+			<div class="col-md-3 offset-sm-5">
+				<p class="small dim right">&copy; 2004-2026<br />
+				<p class="small dim right"><a href="/sitemap"><span class="fa fa-sitemap fa-fw"></span> Sitemap</a><br />
+				<span class="small dull right">This website uses cookies</span></p>
+			</div>
+		</div>
+	</div>
+	<div class="cookie-notification js-cookie-notification">
+		<p>By using this website, you agree to the use of<br />cookies and the <a href="/privacy/">privacy policy</a>.</p>
+		<button class="btn btn-default" type="submit"><a href="#" class="js-cookie-notification-hide">Agree and dismiss</a></button>
+	</div>
+</div>
+<!-- /wp:html -->

+ 20 - 0
parts/footer.html

@@ -0,0 +1,20 @@
+<!-- wp:html -->
+<div class="container-fluid footer">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-4">
+				</div>
+			<div class="col-md-4">
+				<p class="dim"><p>
+			</div>
+			<div class="col-md-4">
+				<p class="small dim right">&copy; 2004-2026</p>
+			</div>
+		</div>
+	</div>
+	<div class="cookie-notification js-cookie-notification">
+		<p>By using this website, you agree to the use of<br />cookies and the <a href="/privacy/">privacy policy</a>.</p>
+		<button class="btn btn-default" type="submit"><a href="#" class="js-cookie-notification-hide">Agree and dismiss</a></button>
+	</div>
+</div>
+<!-- /wp:html -->

+ 5 - 1
theme.json

@@ -130,5 +130,9 @@
         "typography": { "fontWeight": "700" }
       }
     }
-  }
+  },
+  "templateParts": [
+    { "name": "footer", "title": "Footer", "area": "footer" },
+    { "name": "footer-home", "title": "Footer (Home)", "area": "footer" }
+  ]
 }