Styles, header, footer and patterns
Table and Type is a block theme. Everything visual is edited in Appearance › Editor — the Site Editor — and nothing needs a page builder. There is no options panel and no shortcode.
Global Styles
Appearance › Editor › Styles.
- Colors — the palette is 84 tokens deep, and every one of them has a dark counterpart. Change a palette colour and both the light and the dark face of the site follow. A colour you invent yourself has no dark value until somebody writes one; see Dark mode.
- Typography — three self-hosted families ship with the theme:
| Family | Used for | Licence |
|---|---|---|
| Brygada 1918 | Headings, the card's face, the wordmark | SIL Open Font License 1.1 |
| Radio Canada | Body text, navigation, controls | SIL Open Font License 1.1 |
| Sometype Mono | Prices, times, stamps, eyebrows | SIL Open Font License 1.1 |
All three are variable WOFF2 files inside the theme. Nothing is fetched from Google Fonts or any other host, on any page, at any time. To add a family of your own use the Site Editor's own font library; to remove one, change the family assignment in Styles rather than deleting the file.
- Layout — the content measure is 46rem and the wide measure 72rem. The page gutter sits outside the wide measure, so a wide row is a little broader than a narrow one at the same window width.
- Blocks — per-block styles, as in any block theme.
Browse styles at the top of the Styles panel switches between the four variations — see Dark mode and the presets.
The logo and the site title
The wordmark is the Site Logo block if you set one, and the site title otherwise. Set the title at Settings › General; set the logo in the header part. The browser-tab icon is WordPress's own Site Icon, in the same header part's logo block settings or at Appearance › Editor › Styles; the theme ships none, so the tab shows WordPress's default until you set yours.
The header
Appearance › Editor › Patterns › Template parts › Header.
It carries, left to right: the wordmark, three routes each with a one-clause hint, the open status slot, a quiet Book a table action, and the light/dark control.
- The status dot and its sentence come from the hours record. It is a slot the companion plugin fills; with the plugin off it is simply empty, which is the no-plugin look.
- The header asks for nothing before it tells you whether the door is open. That order is deliberate; keep it if you rearrange.
- Book a table is an ordinary Button block. Point it wherever you like.
Navigation
Appearance › Editor › Navigation. An ordinary WordPress navigation menu.
Use a real menu, not the fallback WordPress generates when none exists: the fallback nests one list inside another, which both an accessibility audit and an HTML validator flag. The demo imports a real one.
The current route is marked with aria-current, so it is announced as well as styled.
The mobile panel
The mobile navigation lives inside the header pattern — there is no separate template part to find. The trigger is a 44px press target and each row is 56px with one clause under it.
It has no entrance animation, on purpose. A panel that fades in is a panel you are waiting for.
The footer
Appearance › Editor › Patterns › Template parts › Footer.
Three columns — brand and address, this week's hours, where else to find the business — over one rule carrying the freshness stamp, the tax note and the site's own links. The week and the stamp are filled by the plugin; everything else is ordinary blocks.
The visit page's footer drops the week, because the week is already the main thing on that page.
Templates
| Template | Applies to |
|---|---|
index |
The fallback for everything. |
home |
The posts page. |
single · page · archive · search · 404 |
WordPress's own hierarchy. |
page-no-title |
A page with no printed title — the home page, book, notices, style-guide. Choose it in the page's Template panel. |
page-menu |
Applies automatically to the page whose slug is menu. It wraps the content in the group the dietary filter scopes to. |
page-visit |
Applies automatically to the page whose slug is visit. |
Two consequences worth knowing: if you rename the menu page's slug, the dietary filter stops
scoping to the whole page; and the home page is an ordinary page set as the front page at
Settings › Reading, not a hard-coded template, which is what lets you rearrange it freely.
The patterns
The block inserter → Patterns → Table and Type. Two categories: Sections (one band of a page) and Pages (a whole page at once).
Section patterns
| Pattern | What it is |
|---|---|
| Header | Wordmark, the site's routes with a one-clause hint each, an open-status slot, a quiet action and the mobile panel. |
| Footer | Three columns over one hairline rule carrying the freshness stamp, the tax note and the site's own links. |
| Hero, the service being served | One full-bleed counter photograph with the service's own clause set straight on it, the served-now chip, a filled Get directions and a text link down to today's card. |
| Today's card, with the day's slips | The printed card for the service being served, with the day's dated slips clipped to its corner and one row struck by the sheet that replaced it. |
| On the grinder | Today's espresso and filter with their roaster, origin, process and the date they went on, beside the bakes and their batch times. |
| Getting here | The street address as the heading, the four house rules and the phone as a rule list, one filled Get directions, then today's hours, the collection seam and the booking line. |
| Menu index | A contents page for the card — five services numbered, with days, hours, how many dishes and what they cost — over the card's front matter and the dietary filter. |
| Menu by service | Five services stacked down the page, each on its own plate, with its slips and its dishes by section. |
| Drinks | The drinks printed once at the end of the card, with their add-on pricing. |
| Hours, the week as a card | The week printed once as a card, with the day's exceptions clipped to it on a slip and today called out beside the record. |
| House rules, with the answer per service | The rules a visitor actually asks about, beside a record of the answer at every service, with the reason behind a disclosure. |
| Find us, the door and the way to it | The street address as the heading, how to arrive and how to get in as a record, and the address in a block a reader can take with them. |
| Booking policy, service by service | Every service as a row saying whether it takes a table or is walk-in, and the three limits a reader needs before they book. |
| Booking seam | How a table is actually taken — the press, the destination named beside it and the fallback link under it. |
| Notices, what the form collects | The fields an enquiry form collects, one row each, the named person responsible and how long it is kept. |
| Page not found | The closed counter at the hero's geometry, what the place serves at every hour, the week's opening times, and the way back to the card. |
| Call to action band | One eyebrow, one line, one sentence and one press. |
| Token sheet | The style-guide specimen panel — surfaces, ink, the slip's own material, the type ladder and the three presets. |
Page patterns
Whole pages. Insert one into a new empty page and edit it in place.
| Pattern | What it builds | Screenshot |
|---|---|---|
| Page: home | The home page in four bands. | home |
| Page: the card | The whole card by time of day. | menu |
| Page: visit | Hours, access and how to get in. | visit |
| Page: book a table | The booking policy, then the seam. | book |
| Page: notices | The privacy notice as a record. | notices |
| Page: style guide | The token sheet and one specimen of every section. Delete this page before you launch. | style guide |
The dietary filter
On the card page, the dietary filter is multi-select and cumulative: pick V and GF and you get
the rows that are both. It shows a live count, and rows never leave the page — they are hidden
in place, so nothing reflows under your finger and a reader who wants the whole card again gets it
instantly.
With no JavaScript the control is not shown at all and the whole card is printed, which is the honest fallback.
With the plugin switched off
The theme must look close to its demo with no plugin active, and it does — by design rather than by
luck. A page built with the companion plugin holds the plugin's blocks (table-and-type-core/menu-card,
served-now, hours-week, …). With the plugin inactive WordPress would print nothing where each
of them stood, so the theme steps in: for every such block it renders inc/twins/<block>.php, a
static twin that prints the same reef-* vocabulary from one frozen record of the Mireille fiction
(inc/twins.php). The mechanism is table_and_type_render_module_block_twin() in functions.php;
it fires only for a block the plugin is not there to register, so with the plugin active the twins
never run and the output is byte for byte the plugin's. A child theme replaces a twin by shipping a
file of the same name.
What a twin is, and is not:
| Piece | With the plugin off |
|---|---|
| The hero lockup, the card and its slips, the struck row | Frozen at Wednesday 16 September, lunch — the instant the section patterns also print |
| The five service cards, the index and the drinks coda | All printed, stacked, with the theme's placeholder drawings for plates and dishes; the tabs are anchors |
| The dietary filter and the dish count | Omitted — a control without its script is a dead control |
| Hours, the terrace row, arrival and access facts, the address, the coordinates | Static, from the same record |
| The booking policy, the partner seam, the takeaway seam, the booking line | Static |
| The enquiry form | A write-to-us address and the privacy line; nothing to receive a form |
| The privacy notice's fields, who is responsible, the five answers | Static |
| The drawing behind a band | Nothing: the drawings are demo media and never ship in the theme |
| The header's open status, the footer's contact and stamp, the scheme toggle | Hooked blocks, so they are simply absent: the footer prints its placeholders and the theme follows the operating system's scheme |
What needs the plugin: the live served-now and "Open until", the filter, slips that appear and expire on their dates, the today marker, the enquiry form, the JSON-LD, the abilities. A buyer who deactivates the plugin keeps a site that looks like the demo and stops being told the time.
If you insert one of the plugin's own patterns on a page of your own and then deactivate the plugin, the theme renders its own plugin-free twin of that section the same way.
How a cached page still knows what is being served
A page built once and served to everybody cannot claim an hour. So the card is rendered in its full-day state — every service with its days and times, and no "right now" — and the served service, the stamp and the live slips are re-derived in the visitor's own browser, in your site's timezone, so a reader in Paris asking what Montréal is serving gets Montréal.
That full-day state is also what a visitor with no JavaScript sees, what a crawler indexes, and what
the /404 page shows. It is a real answer rather than a spinner.
What the browser re-derives is deliberately small: which of the three markers is visible, and whether each sheet's window is still open. It does not re-fetch the rows, un-strike a row whose slip expired mid-visit, or swap the card for a different service — a half-updated card is worse than a card that says plainly which service it is.