← War Dungeon

War Dungeon — Gutenberg Block Reference Build Brief

BBWD29 Build Brief War Dungeon

Page intent

The War Dungeon Gutenberg-Block Reference page is a developer reference document, not a real visitor surface. It shows how every WordPress core Gutenberg block renders with the brand’s typography, spacing, and colour treatment — so a Phase-2 developer wiring real content into the theme knows what to expect and where the brand has overridden core block styling. The audience is the developer + the operator reviewing the brand treatment of long-form content. This brief produces a no-harvest mockup (per the locked Mission Control decision from journal 721) — the page itself is reference; its panels are not catalogue blocks.

Subject content (for the mockup)

Render the page as a categorised specimen sheet of every commonly-used WP core block, each shown with realistic-looking placeholder content in the brand’s voice. Sections, in order: Text blocks (paragraph, all heading levels H1–H6, unordered list, ordered list, quote, pullquote, code, preformatted), Media blocks (single image with caption, gallery 4-up, video placeholder, audio placeholder, file/download link), Layout blocks (columns 2-up, columns 3-up, separator, spacer, group container with background), Widget-style blocks (button single, button group, archive list, search input, latest posts grid), Embed example (YouTube embed placeholder). Each specimen is labelled with the block’s name + a brief one-line note on the brand override applied.

Mandatory structure (top to bottom)

  1. Pre-header announcement bar — REUSE announcement-bar.
  2. Global header — REUSE site-header.
  3. Breadcrumbs — REUSE breadcrumbs. Home / Developer / Gutenberg Block Reference.
  4. Developer-reference page header — Compact dark cowboy band. Eyebrow (“Developer reference”), title in modesto-condensed display (“Gutenberg Block Reference”), lede in palatino-linotype body (“Every WP core block rendered with War Dungeon’s brand treatment. Use this when wiring real content into the theme.”), stamped roundel with “v1 · 8 June 2026” version stamp. NEW block developer-ref-page-header — distinct from content-page-hero (this is a reference-doc header, not a brand-statement hero; carries a version stamp).
  5. Specimen section: Text blocks — Section head (“Text blocks”) with bronze underline rule, then a vertical stack of specimen panels. Each panel: stamped-roundel “block name” label on the left, the rendered specimen on the right (or beneath at narrow widths), and a one-line note (“Headings use modesto-condensed at the scale-ramp the styleguide locks”) in palatino-linotype small-caps beneath the specimen. NEW block block-specimen-panel — the layout primitive for every developer-ref specimen on this page.
  6. Section divider — REUSE gear-divider.
  7. Specimen section: Media blocks — Same panel pattern. Image + caption uses brand’s plated-frame. Gallery shows brand’s grid spacing + ridge bronze frames. Video/audio placeholders styled as plated panels with stamped play-glyph.
  8. Section divider — REUSE gear-divider.
  9. Specimen section: Layout blocks — Same panel pattern. Columns show the brand’s gutter + responsive collapse. Separator shows brand’s gear-divider style. Group container shows brand’s panel treatment.
  10. Section divider — REUSE gear-divider.
  11. Specimen section: Widget blocks — Same panel pattern. Button single + button group show the brand’s stamped-shadow CTA + ridge bronze treatment. Archive list shows brand’s link styling. Search input shows brand’s form input styling. Latest posts grid shows brand’s card pattern.
  12. Section divider — REUSE gear-divider.
  13. Specimen section: Embeds — Single panel: YouTube embed placeholder styled as plated frame with stamped play-glyph overlay.
  14. Notes for the developer — Closing panel in palatino-linotype on light rodeo: “Where overrides live”, “How to add a new override”, “When to bypass an override entirely”. 3-paragraph reference note for the Phase-2 developer.
  15. Trust strip — REUSE trust-strip.
  16. Global footer — REUSE site-footer.

Block reuse intent

Reused: announcement-bar, site-header, breadcrumbs, gear-divider, plated-frame, stamped-roundel, trust-strip, site-footer, plus primitives.

NEW blocks (2) — authored fresh for this mockup; NOT harvested into catalogue:

  • developer-ref-page-header — page header for developer reference docs. Will be reused on BBWD30 (form-field reference) but authored fresh in each since the developer-reference mockups are no-harvest.
  • block-specimen-panel — layout primitive carrying one specimen: label + rendered block + override note. The page’s main authoring effort.

Content principles

  • Specimens are realistic. Don’t render lorem ipsum — render copy that could appear on a real War Dungeon page (paint guide intro, Codex review paragraph, faction list, hobby tip quote). The developer sees what the brand treatment looks like in actual context.
  • Override notes are factual. One sentence per specimen explaining what the brand changed from WP-core defaults. Skippable for a developer who just wants the visual; useful for one who wants to know why.
  • Section structure is consistent. Every specimen panel follows the same label + render + note layout. The page itself is its own typographic scale demo.
  • Light atmospheric breather on the notes panel. The closing developer notes go on light rodeo for legibility — same “prune ornament, not type” principle as the longform-body on MWD32.
  • No harvest. The mockup’s blocks are reference, not reusable brand composition. The catalogue stays at its current size.

Voice notes

Specimen content uses the brand’s shopkeeper voice (so the developer sees voice + treatment together). Override notes use plain developer-facing voice (“Headings use modesto-condensed at the scale-ramp the styleguide locks”, not “We’ve taken the liberty of clothing your headings in a fine condensed serif”). Section heads stay plain (“Text blocks”, “Media blocks”). Closing developer notes use plain voice throughout — this section is talking to the developer, not the visitor.

Render direction

Locked methodology: Maximalist Industrial at the Frontier styleguide (SWD1). The 99-block reuse catalogue supplies chrome verbatim. Author NEW under the same methodology: dark cowboy inverted page header with gear-pattern, gear-divider strips between specimen sections, stamped roundels for block labels, ridge-bronze panel frames, modesto-condensed section heads with bronze underline rules. Specimen panels use the same dark/light banding cadence as MWD5 / MWD32 — dark sections dominant with light breathers where legibility wins.

Desktop composition (locked brand rule, 2026-06-07)

War Dungeon is desktop-first. Mockups render at 1440px first; mobile is graceful collapse. Specimen panels are two-column at desktop (label LEFT, render RIGHT); stack at @980px. Gallery and columns specimens render at their own full-width composition within the specimen panel. Closing developer notes are full-width on light rodeo.

Technical constraints

  • Page max-width 1440px. Base font size 20px.
  • No interactivity beyond standard nav (the specimens are static).
  • This page lives at /developer/gutenberg-block-reference in production (admin-only / login-gated; not indexed; not in primary nav).
  • Version stamp on the header is operator-editable (ACF field at Phase 2) so the developer knows which override revision they’re reading.
  • Specimens render at the brand’s overridden styling; do not include “WP default vs brand override” side-by-side comparisons — the brand override is the spec.