Unblock Ships Ready-Made Pattern Library for WordPress

A lot has happened since we first featured Unblock in The Pier #152 back in May. Loïc has just released the first release candidate for the single-block approach, which can be used to create any type of element. As part of this, he has also introduced a new pattern library.

New: Pattern Library

Most WordPress sites are built using a set of standard elements: a hero image, a few feature blocks, a pricing table, an FAQ section and a footer. Rebuilding these elements from scratch every time is time-consuming — and Unblock’s new library is designed to eliminate this unnecessary effort.

What the Library Actually Does

The library opens directly from the WordPress editor toolbar. From there, you can browse a set of ready-made patterns, preview them and add them to your page. Once inserted, they behave like ordinary blocks, so you can edit them however you like.

A nice detail is that the previews you browse aren’t static screenshots. Each one renders the pattern’s real HTML and CSS at desktop, tablet or mobile width. This means that what you see in the picker is exactly what will appear on your page.

One Design System

Less visible, but arguably more important, is how consistent everything looks under the hood. Every official pattern uses the same small CSS framework that comes with Unblock, featuring one colour palette, one spacing scale, and consistent type sizes, buttons, and cards. This is why a hero image from one category and a pricing table from another still look like they belong on the same site.

As every pattern refers to the same variables, restyling only needs to be done in one place. Change the primary colour once and every pattern — including hover shades — will follow suit.

Saving & Sharing Patterns

Of course, you can also contribute your own patterns to the growing official library. Additionally, libraries aren’t locked to a single installation. You can give another Unblock site a revocable share URL along with an access token. On the receiving site, shared libraries appear alongside the official catalog.