Case study, product site
PatternBuilderWP.com: the home of Pattern Builder
Pattern Builder is the studio’s free, open-source WordPress plugin for creating, editing and organizing block patterns from inside wp-admin. PatternBuilderWP.com is where it lives: the product story, the documentation, the curated collections, and the account and storage service the plugin connects to. Twenty Bellows designed, built and runs all of it.
Role
Product, design and build
Design
In-house
Stack
Block theme, custom plugin, the Pattern Builder cloud service
The brief
A plugin page on WordPress.org can only say so much. PatternBuilderWP.com is the place where Pattern Builder can be explained in full. And it’s the home of the online service that shares and stores patterns.
What we delivered
A block theme, a plugin, and the service the plugin talks to.
A block theme for the product site, on its own design system
Documentation pages kept in step with the plugin’s releases
Collections: curated pattern sets, checked before they are published
Accounts, sign-in from inside wp-admin, and the pattern store behind them
A Pro tier with private collections and no pattern cap
Collections that arrive pre-styled
A pattern copied from one site rarely fits another: the tokens it references are missing, the block styles it uses were never registered. Collections fix that at the source.
A collection is a curated set of patterns from Twenty Bellows or a partner studio, and every pattern in it travels with the design tokens and block style variations it depends on. Installing one from inside wp-admin registers what the host theme lacks and leaves what it has, so the pattern lands styled rather than broken.
Under the hood
WordPress on a block theme, with the plugin’s cloud module as the client.
The site
A block theme on theme.json, patterns and block styles. The documentation is content, not a separate app, so it is edited where everything else is.
The connection
The plugin connects an account per WordPress user through proxy routes it registers itself. Every refusal from the service is relayed as it came, upgrade link included: the service decides, the plugin only says so.
The package
A pattern uploads as a package: markup, the images it uses, the tokens and variations it depends on, and a checksum. CSS inside a variation passes a safe-subset check that refuses rather than strips.
Tell us about the project
Say what it is and when it needs to happen. Email works as well as the form.
