CASE STUDY · WORDPRESS · 2026
renderKit — premium Gutenberg blocks for WordPress.
A block system that makes WordPress feel custom-built. Fast, polished sections you drop into any page — a real shop, a proper navigation, forms and cookie consent included — without the page-builder bloat.
A React + TypeScript Gutenberg block system rendered server-side through a Dockerised relay sidecar. Static, SEO-friendly HTML with no client JS at first paint, shared editor/frontend types, and Prometheus-grade observability.
Speed
Loads fast, ranks well.
Every block arrives as finished HTML from the server, so pages paint instantly and Google sees a complete page from the first byte. No spinner, no content jumping into place, no heavy JavaScript to download before anything shows up.
Rendering
SSR via a relay sidecar.
Blocks render through renderKit-Relay, a local Docker service WordPress talks to over HTTP on 127.0.0.1. The frontend receives static, SEO-friendly HTML with no client-side JS dependency for first paint; hydration is opt-in and runs through an optimized engine.
The blocks
Sections that look designed — not dropped in.
Heroes, navigation, text-and-image layouts, FAQs, footers — every block is pre-styled to a single design system, so the whole site feels coherent instead of stitched together from mismatched plugins.
Component library
A typed component library.
Hero (Standard / Minimal / Full-height with scroll animations), Text (.rk-prose), Text-Image with focal-point & object-fit control, Premium Navigation (backdrop blur, mobile drawer, integrated cart), an SSR-safe FAQ accordion and a flexible Footer. Tailwind centralizes the design tokens; types are shared between editor and frontend.
Shop
A real shop, built in.
Product grids, a working cart and smooth sliders that match the rest of the site — powered by WooCommerce under the hood, so selling is part of the design instead of an afterthought.
Commerce
WooCommerce blocks.
A bento-style Product Grid with hover states and buy actions, a session-based Cart, and a Swiper block for specialized slider interactions — all rendered server-side and styled from the same token system.
Compliance
GDPR-ready out of the box.
A complete cookie-consent system and a spam-protected contact form ship with the kit — so you're compliant on day one, without bolting on three more plugins that each want their own look.
Consent & forms
Consent + forms, first-party.
A full cookie solution — Banner, Gate and Settings management — plus a Contact block with reCAPTCHA v3, privacy checks and status messaging. No third-party consent SaaS in the critical path.
Reliability
Built to stay fast.
Images are optimized automatically and rendering performance is monitored continuously, so the site stays quick as it grows — not just on launch day.
Observability & DX
Instrumented, not guessed.
Prometheus + Grafana track SSR latency, throughput and errors. Automatic WebP generation, font swap/preconnect and an optimized hydration engine keep the frontend lean; hot reloading and strict shared typing keep the dev loop tight.
Built withStack
Want a site that feels like this? Want to build on this?
Tell me what you're building — I design and build the whole thing, from the first pixel to deploy. Ping me about renderKit, a custom block, or a full build — I read every message that lands.