Skip to content

Good bones and road grit.

Block Themes

  • The build sheet

    The build sheet

    Pop the hood on a block theme and one part is doing most of the steering: theme.json. It is the build sheet — the page that lists which options the theme came with, what is standard, and what the factory will not let you order. Dirtbag’s build sheet is tiny, about 8.7 KB, because most of it says no.

    That is not laziness. It is the whole idea.

    Two columns on the sheet

    There are only two things on a build sheet worth reading.

    The first is settings: what the factory will let you order. These are the controls the editor shows you — the color pickers, the font menus, the toggles.

    The second is styles: what actually rolled off the line. These are the numbers the theme commits to — the type sizes, the spacing, the heading scale.

    Settings is the menu. Styles is the plate. Read them in that order and the whole file makes sense.

    What you can’t order

    Most of Dirtbag’s settings are switched off, and that is the point.

    The bundled design tools are off. The color section turns off the custom picker, the gradients, the duotones, and ships a fixed palette of nineteen named colors — black, white, a row of greys, and the primaries that came packed in with HTML itself. No wheel, no hex field, no “brand purple #6B21A8.” If you have ever run View Source on a 1998 homepage, you already know this palette.

    The fonts are the same story: thirteen web-safe stacks, Arial through Verdana, all of them already on the machine. Nothing gets downloaded. Nothing phones home. The page renders the same whether the network is fast, slow, or on fire in a ditch.

    Shadows: off. Fluid type: off. A short menu is a kind of honesty. It tells you what the theme is for before you waste an afternoon finding out what it is not.

    What’s standard

    The other column is just plain numbers, written down where you can see them.

    Six type sizes, fifteen pixels up to forty-eight. A heading scale that steps down by level — 36, 28, 26, 20, 18, 15 — so an h2 is a smaller voice than an h1 and the screen reader and the eye agree on the outline. Body text at eighteen pixels with a 1.4 line height. A measure of about 42rem, because a line you can actually finish reading is worth more than a line that fills the window. Block gap at 1.4em. Square buttons. Underlined links.

    No cleverness. No per-block paint job. Just the spec, stated once, applied everywhere.

    The one drawer with a wrench in it

    Every honest toolbox has the drawer where the real wrench lives, and Dirtbag’s is a small block of hand-written CSS inside theme.json. Three rules, no more:

    One collapses the gap in a byline so the author and date read as a single line. One recolors the monochrome truck logo per style variation. And the newest one lines up the two columns on the front page so the sidebar’s posts don’t drift a line below the grid when a heading wraps.

    That is the whole drawer. The rule is simple: if you keep an exception, you write it down. Exceptions that live in the dark breed. Three rules in a list, each with a reason, is a thing you can audit on a slow afternoon. A stylesheet nobody remembers writing is how a small theme quietly becomes a big one.

    Why it fits on one page

    A theme.json gets fat when it tries to style every block — a rule here, an override there, a special case for the thing that looked wrong on one screen in one browser one Tuesday.

    Dirtbag’s stays thin because it does the opposite. It decides what not to allow, writes down a short list of numbers, and keeps three honest exceptions. Then it gets out of the way. The browser and WordPress core already know how to render a document.

    The build sheet fits on one page because the truck does not have many options. On purpose. Constrain, then declare. That is the whole theme, and it turns out you can read it in about eight kilobytes.

  • What the shoulder taught us

    What the shoulder taught us

    The first rule of Dirtbag was simple enough to write on the back of a gas receipt:

    Keep it small.

    No build step. No theme JavaScript. No stylesheet file pretending to be a lifestyle brand. No remote font with a passport. Plain pages, visible links, feeds, comments, and enough road grit to make the thing feel owned by a person instead of a launch committee.

    Then the theme went out for a drive and came back with better rules.

    1. Slogans leak

    “No JS” sounds clean until you look at an actual WordPress page. Core blocks are not cardboard cutouts. Navigation has to open. An overlay has to close. A lightbox has to trap attention without trapping people. Enhanced pagination still has to be pagination when the enhancement quits.

    The old slogan was pointing in the right direction, but it was too austere for the machinery underneath it.

    It’s amazing how much you can do without JS or CSS in a WordPress theme — without bringing in any extra CSS and JS in the time, that is. There’s no getting around either when you’re building with WordPress, but you’ll learn a lot if try to strip down to the simplest starting point.

    The honest truth is duller and stronger, but it’s not great for slogans: Dirtbag does not add its own front-end JavaScript dependency. Dirtbag does not enqueue its own stylesheet file. WordPress core may still bring CSS and JavaScript when core blocks need them. The browser may still do browser work. The document still has to stand when the extras fall away.

    That sentence will not fit on a bumpsticker, sadly.

    2. Core has weight

    Using core is not the same as using nothing.

    theme.json becomes CSS. Core block support becomes markup and styles. The Interactivity API is JavaScript, even when it arrives as an OEM part from WordPress instead of an aftermarket box from the parts store.

    That does not make it bad. It makes it reliable.

    The lesson is not “never use it.” The lesson is “name the owner.” If WordPress core owns the behavior and the fallback is a plain link, button, image, or document, the part might earn its keep. If Dirtbag has to import a second runtime, invent a private convention, or explain why the page is useless until hydration, the truck is overloaded.

    3. Exports lie in small ways

    The Site Editor is useful, but it is far from perfect. Exported templates can come back with local URLs, hard-coded theme slugs, or odd block bindings stuck to the bumper. Seed content can carry yesterday’s idea after today’s philosophy changed.

    So we learned to treat exports like parts from a swap meet: inspect them before installation.

    The package check is not glamour work. It looks for stale local addresses, broken block comments, bad nesting, and things that should have been cleaned before release. That is exactly the kind of boring tool a small theme needs.

    Not a build system. Not a dashboard. A flashlight!

    4. Accessibility is where philosophy pays rent

    A plain theme can still fail people.

    A caption can sit in a scrollable region that keyboard users cannot reach. A menu can look simple and still mishandle focus. A clever visual shortcut can flatten the document for somebody reading it a different way.

    That is why “we did not write the JavaScript” is not a release gate. It is trivia. The gate is whether the page works with a keyboard, a screen reader, a small viewport, slow patience, and scripts that may or may not arrive.

    Plain is not automatically accessible. Plain is just easier to audit when you have not buried the page under theater.

    5. The page is the product

    The best thing we learned is also the oldest thing on the web: the page is already the product.

    Not the framework. Not the tooling story. Not the perfect screenshot. Not the promise that a future version might carry a shinier library if the vibes are right.

    A page with a title, a date, a byline, some links, a feed, comments, and honest markup is not a fallback. It is the thing.

    Everything else is a part in the glovebox. Useful sometimes. Dead weight often. Worth carrying only when it gets the page farther down the road without leaving anybody in the ditch.

  • The Glovebox Map

    The Glovebox Map

    Every theme has more roads than it shows on the front page. Here is the rest of Dirtbag’s map — the templates that do their work off the main route.

    (more…)
  • Field notes from the shoulder

    Field notes from the shoulder

    A dispatch from the edge of the road.

    (more…)