Library
This page shows you how to find something in the Library and get it onto your page.
The Library is a catalog of ready-made patterns you insert into the editor and then edit like anything you built by hand. Nothing stays locked: once inserted, a pattern is plain Unblock blocks, and its styles are ordinary selectors, variables and at-rules.
Three kinds of library
The same modal shows all of them side by side. What changes is where the content comes from.
| Library | Where it comes from | Who can change it |
|---|---|---|
| Official | The Unblock catalog | Read-only. It updates on its own |
| Yours | Blocks you saved from your own editor | You |
| Connected | Another site that shared a library with you | The site that shares it |
Requirements
Three things gate the Library:
- An active license. Without one, the modal shows Library unavailable instead of the catalog. This applies to every library, including your own.
- The editor setting. Open the Unblock modal from the editor toolbar, go to the Settings panel, Editor tab, and check Pattern library. It's on by default.
- Your role. Only Administrators by default. Developers can open it to other roles with the
unblock/library/can_usefilter.
Opening the Library
Click the Library icon in the top-right of the editor toolbar. The modal opens over the canvas: your libraries and their categories on the left, the patterns matching them on the right, with search, type tabs and sorting above.
Most of it reads itself. Three things don't:
- Search stays inside what you selected in the tree. Pick All at the top to search every library at once.
- Patterns are sections and components, a hero or a pricing table. Templates are full pages.
- Newest sorts on each pattern's own modified date, so a catalog update floats its new items to the top.
Inserting a pattern
Three ways, all equivalent:
- Hover a card and click the + button
- Click the card to open the detail view, then click Insert
- Tick several cards and use the Insert button in the selection bar
The pattern lands after the block you have selected, in the closest parent that accepts it. With nothing selected, it goes at the end of the page.
The modal closes on a successful insert, and a snackbar reports what landed: 1 pattern inserted, 12 blocks, 5 styles.
Inserting several at once puts them in order, as one undo step, and you can mix libraries in the same selection. Changing library, category, type or search clears the selection. The selection bar also carries a Delete button, but only while you're browsing one of your own libraries. The official and connected catalogs are read-only.
The detail view
Click a card to open it full width before committing.
- Device switcher — Desktop, Tablet, Mobile. Tablet and Mobile only appear when the modal is wide enough to render them narrower than desktop.
- Styles — badges counting what an insert would add to your design system: selectors, variables, at-rules. When it would add nothing, the badge reads Styles already installed.
The preview renders in an isolated sandbox against sample content, not your site's data. A loop in the pattern shows placeholder items in the preview and real posts once inserted.
What lands in your design system
Inserting adds two things to your page: the blocks, and the styles they need.
The pattern carries its own selectors, variables and at-rules, and they arrive through the same path as the CSS Parser: matched by identity, added only when missing, never substituted. Anything you already have keeps your value, so inserting the same pattern twice adds nothing the second time.
Collisions are unlikely, since everything Unblock ships of its own is prefixed unbk-. Patterns from your own library reuse your own names on purpose. The case to watch is a connected library, whose author may have picked a generic name that means something else here. Nothing is overwritten, so the inserted blocks simply pick up your rules. Rename one of the two selectors, or scope the pattern under a wrapper class of your own.
Patterns are not linked to the library after insertion. Editing a pattern in your library does not update the pages where you already inserted it, and deleting it from the library does not remove it from those pages. Each insert is a copy.
Keeping catalogs current
Remote catalogs are cached and re-checked on a cadence, weekly for the official one. Nothing runs in the background: the check happens the next time someone opens the Library after that week has passed, as a single conditional request that usually answers "nothing changed". Until then you browse the cached copy.
New patterns then show up at the top of the grid under the default Newest sort.
To pull now instead of waiting, click Refresh library in the modal header. It re-checks every loaded catalog at once and tells you whether anything changed. The button then greys out for five minutes.
If the origin can't be reached, the cached copy keeps working and Unblock retries in an hour.
On a multisite network, the official catalog is cached once for the whole network rather than once per subsite.
Next steps
- Save patterns — turn a section you built into a reusable pattern
- Share libraries — hand your patterns to another site or to a client
- Connect libraries — pull in a library someone shared with you
- Design tools — where the imported selectors and variables end up