Tavern North
WordPress hospitality demo for a fictional Ballard wine bar with a custom Gutenberg menu block — CSS-dotted leaders between names and prices that read like a printed menu, not an HTML table.
Overview
A WordPress hospitality marketing site for a fictional Ballard wine bar — five-page structure (Home, Menu, Wines, About, Reserve) on a custom Full-Site-Editing block theme. One custom Gutenberg block drives both the food Menu and the Wines list with server-rendered name/price rows, CSS dotted leaders, and flag badges.
The custom block — sfp-blocks/menu-section:
Every food/menu demo needs the same primitive: a section title, optional sub-copy, and a list of items where each item has a name, price, optional description, and optional flags ("V" vegetarian, "GF" gluten-free, "somm pick"). The block renders all of that server-side, with a CSS Grid row — name on the left, dotted leader filling the middle, price on the right — that reads like a printed menu rather than a stacked HTML table. Flags render as small-caps brass pill badges.
Two consumers on day one: the four-section food Menu page (Small plates / From the fire / Cheese / Desserts) and the four-section Wines list (Bubbles / Whites / Reds / With dessert). Same block, same CSS, different content arrays.
Per-demo theme:
- Thin child of the platform
_chassisparent - Aubergine navy primary (#2A2E4A), brass accent (#D9A357), warm cream background (#F2EBDC)
- DM Serif Display for headings, system sans for body
- Own header (Menu / Wines / About / Reserve) and footer (bar bio + hours + reservation CTA)
Five pages:
- Home — Navy hero with brass eyebrow ("Tavern North · Ballard, Seattle"), serif headline ("Wine bar, no pretense."), reservation + menu CTAs; two-column kitchen + cellar teasers; reservations CTA strip
- /menu/ — Four menu-section blocks driving the food menu
- /wines/ — Four menu-section blocks driving the wine list
- /about/ — Long-form narrative about the room, the food, the wine philosophy, hours
- /reserve/ — Reservation page layout (real OpenTable / Resy integration deliberately left for the real client engagement)
The Challenge
Restaurants get sold Squarespace or Toast's bundled marketing site. Wine bars often end up on Instagram with a Linktree. WordPress gets skipped on reflex for hospitality — perception that food and drink sites are too design-driven for a CMS, or too marketing-light to justify the editor experience. Menus change weekly; front-of-house staff need to swap a dish or update a price in under thirty seconds without involving a developer.
The Solution
Built the shared menu-section block instead of inlining a one-off pattern — the next hospitality demo gets the dotted-leader CSS for free. Platform investment over local optimization: the block added ~30 minutes to the build and saves a multiple of that on every subsequent food/menu demo.
Results
Lighthouse 99 / 96 / 100 / 92 with placeholder photography
CSS Grid dotted-leader pattern reads as printed menu typography, not an HTML table
Same custom block drives both the food Menu (4 sections) and Wines list (4 sections) pages
Flag badges render as small-caps brass pills ("V" vegetarian / "GF" gluten-free / "somm pick")
Per-demo theme inherits chassis-side gotcha-busting CSS + asset hygiene
Native HTML structure — zero JavaScript on every page
Gallery
