40Q Atomic Block System

An enterprise WordPress block system your marketing team cannot break

A governed Gutenberg component library, mapped to your design system and compiled into the theme. Every layout choice an editor can make is one we shipped on purpose. Everything else is not in the interface.

How the system works

Governed components, not a blank canvas

Page builders hand editors infinite freedom and return design drift and heavy pages. Locked templates hand them nothing and return a ticket queue. A block system is the third answer.

A block inventory agreed before any code

We read your Figma files, identify which patterns actually repeat, and settle the list with your team before building. Twenty to forty blocks covers most enterprise sites. This one runs on 48.

Options are enumerated, never free-form

An editor picks a section background from a dropdown of 17 defined values and vertical padding from 5 steps. There is no color picker and no custom font size field, because theme.json switches them off.

Design tokens shared with the design system

Colors, type scale and spacing exist as tokens generated from the same Tailwind configuration the components compile against, and theme.json tracks the Figma system instead of restating it.

Atoms with their states settled first

Buttons, links, icons, labels and form inputs exist as components in their own right, each with its hover, active and disabled variants defined. Blocks compose those pieces rather than restyling them, so the same button behaves identically inside a hero, a card and a form.

Rendered on the server, so markup never rots

Blocks store attributes, not HTML. The save function returns null and PHP renders the output at request time. Edit a template and every page using that block updates, with no bulk re-save and no block validation errors after a redesign.

Structure the editor will not let you break

Inner components declare which parent they belong to, so an FAQ item cannot be dropped outside an FAQ block and a column cannot escape its grid. The invalid arrangement is never offered.

Accessibility decided inside the component

Contrast pairing, heading level and keyboard behavior are settled once, inside the block. Sections marked dark switch their text treatment automatically. Our accessibility capability covers the testing behind it.

Proof

What the block system changed at a digital bank

Ueno Bank is Paraguay’s leading digital bank. 40Q moved it off Liferay onto WordPress VIP and built the block system as its no-code editorial layer, so marketing could ship campaigns across LATAM without booking engineering time. Brand consistency across those properties is now enforced by the library, not by review.

3 weeks → 3 hours

Campaign launch time, now owned end to end by marketing

↓ 70%

Developer dependency once the block system replaced custom page work

+25%

Session duration across the new templates, measured in analytics

How we deliver it

A block library is a product, so we ship it like one

The inventory is approved before the first component is written, every block is tested on its own before it enters a template, and the handover includes what a marketing team needs to actually use it.

One vocabulary across design, code and docs

Block names stay identical in Figma, in the repository and in the documentation, so a conversation about the Hero block means the same thing to all three teams. Naming drift is cheap to prevent and expensive to fix later.

Tested in isolation, then in context

Each block is verified on its own across breakpoints, then inside real templates. Keyboard navigation and screen reader behavior are checked per component, so accessibility becomes a property of the library rather than a page-by-page audit.

Patterns, documentation and training

Page patterns and templates give marketing a starting point instead of an empty canvas, and handover includes written guides and recorded walkthroughs. A system nobody was taught to use turns straight back into a ticket queue.

What enterprise teams ask us about block systems

Worth reading even if you never hire us.

Related insights

Keep reading on editorial autonomy

Publishing speed, developer dependency, and what changes when marketing owns the page.

Take the next step

Have your block system reviewed

Send us your current block inventory, or a link to a page your marketing team keeps asking developers to change. We will tell you where the system is working against them.