Blockader
An experimental WordPress block theme built for bold typography, custom Gutenberg blocks, and modern Full Site Editing workflows.
Blockader is a stripped-back FSE theme created as both a learning exercise and a portfolio piece — a way to get hands-on with the current generation of WordPress block development tooling rather than relying on classic PHP templating.
It’s built around:
- Full Site Editing (FSE)
- theme.json-driven global styles
- Custom Gutenberg blocks
- Dynamic and static block rendering
- REST API integrations
- Modern @wordpress/scripts tooling
Full Site Editing
At its core, Blockader leans fully into the block editor as the site-building interface:
- Custom templates and template parts
- Pattern-driven layouts
- Global styles managed through theme.json
- A responsive typography and spacing system
Custom Gutenberg Blocks
Three custom blocks anchor the theme, each built to explore a different piece of the Block API.
Banner Block (blockader/banner)
A dynamic, split-layout hero/banner block with:
- An editable heading, content, and button
- Inspector-controlled button colours
- Server-side rendering via render.php
- Theme-aware styling driven by CSS variables
Live REST Search Block
A live-search block powered directly by the WordPress REST API:
- Live post/page querying as you type
- Dynamic, debounced search results
- Custom-styled results UI
Associated Posts Block
Surfaces context-aware related content, including:
- Featured images
- Post type labels
- Responsive card layouts
Tech Stack
- WordPress
- Gutenberg Block API
- JavaScript / React
- PHP
- CSS
- @wordpress/scripts
Video
Github & Static Site
Please note: Live Search isn’t usable on the static Render-hosted site.