Work in progress…

There will be a lot of changes coming soon. I’ll update this post as I go. The world of web development is changing fast and I’m barely keeping up. AI has made development accessible to a lot more people which is awesome, encouraging and well also frightening.

I love what the folks at https://webawesome.com/ are doing, so I’ve started building out a new WordPress theme that ties into it. It leverages the Projects for easy style management, includes custom Gutenburg blocks for the components and thanks to the AI Agent Skills, has been a very quick build so far.

Stay tuned for more updates, tutorials and maybe even an open sourced repo so that you can use it on your own site.

Until then, stay awesome.

---

How Web Awesome is integrated

The theme loads the Web Awesome Kit JS from a site option (`wa_kit_url`) set at Appearance → Web Awesome. The kit registers the custom elements (e.g. <wa-card>, <wa-dialog>) that the blocks render server-side.

To avoid layout shift before components register, the theme adds a wa-cloak class to `html` and uses small CSS rules to hide or fade components until the kit finishes loading.

How styling is overwritten (and why it helps)

Rather than copying or overriding the parent theme’s CSS, this child theme maps WordPress design tokens to Web Awesome CSS variables. That means the majority of visual styles (colors, spacing, type) come from the Web Awesome token system, so changing a single variable updates many components.

/* Example mapping in style.css (theme) */
:root {
  --wp--preset--color--primary: var(--wa-color-primary-600);
  --wp--preset--color--background: var(--wa-color-surface-0);
  --wp--preset--font-family--heading: var(--wa-font-sans);
  --wp--preset--font-family--body: var(--wa-font-serif);
}

Because the theme relies on variables, making a visual update is easy: adjust a single Web Awesome variable (or update the token mapping), and the change propagates. Server-rendered blocks output semantic <wa-*> elements and slots, keeping markup predictable and consistent across editor & frontend.

Tip: With this setup I get consistent control over appearance via tokens, faster theme updates, and fewer brittle CSS overrides.

Component Showcase — Web Awesome Blocks

Below are examples of the custom Web Awesome blocks included with this theme: Card, Details and Carousel.

---