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.

The problem

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 approach

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.

What got built

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 _chassis parent
• 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:

1. 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
2. /menu/ — Four menu-section blocks driving the food menu
3. /wines/ — Four menu-section blocks driving the wine list
4. /about/ — Long-form narrative about the room, the food, the wine philosophy, hours
5. /reserve/ — Reservation page layout (real OpenTable / Resy integration deliberately left for the real client engagement)

Outcomes

• 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

Stack

• WordPress
• PHP 8.3
• React
• Gutenberg
• Full-Site Editing
• theme.json
• CSS Grid
• Apache
• AWS EC2