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 webawesome 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.
a few days later…
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.
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
Below are examples of the custom Web Awesome blocks included with this theme: Card, Details and Carousel.
Example card content. Add images, text, really any WordPress block can go in here.
Card Footer
Filled
Example card content. Add images, text, really any WordPress block can go in here.
Card Footer
Plain
Example card content. Add images, text, really any WordPress block can go in here.
Card Footer
This content is hidden until the details are expanded. You can add any blocks inside.
This is a dialog popup!
This is a popover!
Tabs are Fun
And have lots of options
Anything can go in a carousel slide!
stay awesome.