Skip to main content.

Thinking in blocks: WordPress and modular design

You’ve heard that old chestnut about giving a man a fish. You don’t want to be given a fish, or a website, that serves your purposes right now, but quickly becomes a rotten carcass. You want to be taught how to fish.

Actually, you already know how to fish, or how to run your business. What you need however, is a finely crafted fishing rod with which to fish. It needs to be lightweight, usable and versatile, so you can take it wherever the fishes are and adapt to changing environmental factors.

We’re talking about websites that don’t paint you into a corner; websites based on blocks, not templates.

Website block components

Blocks, not templates

Why should you care about modular design, or atomic design, if you prefer? You’re ready to get cracking, dreaming up some dazzling new pages for your dazzling new website. Great. The problem is that during the design and development stage, you shouldn’t direct too much focus on finished pages, or entire cohesive templates, composed towards satisfying some specific goal. Goals change, as do our approaches to achieving them. A website should be a living, breathing thing, pliable enough to invite constant evolution in response to feedback (including from analytics data).

So you need to get both a little more granular and a little more general at the same time. The design should put emphasis on a harmonious and robust ecosystem of standalone, interchangeable components. Components that allow for almost countless layouts, while retaining a functional and aesthetic coherence.

Why this matters

The #1 reason most marketers hate their CMS platform is because they simply can’t control the items they need to. Today’s digital marketers are required to make daily changes to their website based on analytics. They will rotate content offers, landing pages, and other mechanisms to drive conversions. Poorly configured websites make this job very difficult. Marketers simply can’t wait days or weeks for a new landing page or a new form. Time is money.

New Possibilities Group, Modular Web Design: The Age Of “Templates” is Over

A vision that supports such editorial flexibility, a modular ecosystem of reusable components, also empowers the dev team to work in a more efficient way. This has positive implications for the project in terms of performance optimisation. There are fewer opportunities to gradually, unwittingly weave a tangled web of redundant code. A modular system is easier to parse and audit for redundancies and potential savings.

Closely related are the positive implications for ongoing maintainability. The more independence each component has, the less chance of the whole edifice crumbling when anything changes, whether as the result of a new feature or just a simple software update. Over time, enhancements can be continuously delivered through neatly defined tasks that don’t require quite such a deep understanding of, and consideration for, the full codebase.

Where WordPress fits in

WordPress logo on a screen

The world’s favourite CMS has made great strides in supporting this kind of modular system with Gutenberg, its new block editor. All content elements, right down to a humble paragraph of text, are individual blocks which you can freely drag and drop to compose your page.This is great, but reaping the rewards available through Gutenberg is not automatic just because it’s now the default editor.

It takes a little work to fully exploit its potential, and that doesn’t only mean extra work for the developers, learning a new approach and a deeper tech stack. It means that there’s a shift in perspective required from the outset of a project if you want to get the most out of today’s WordPress, and unless everyone involved understands and buys-in to a modular design approach, you won’t really allow the block editor to lead the dance. You’ll just drag it listlessly around a sticky old floor. That’s not going to win you any glitterballs.

Many development agencies will pay lip-service to Gutenberg, but still aren’t treating it as a first-class citizen. They might provide partial support to allow its use in a simple blog section of a website, but elsewhere it’s business as usual. This is a missed opportunity. Gutenberg should be the linchpin around which a modern WordPress project revolves.

Are you sold? Great! Let’s look at some of the things that the design, development, and marketing teams will need to pay extra attention to for best results.

Consider every context

If you select any two blocks at random, is there anything about their respective styling that creates visual dissonance when they are placed together? Suddenly what works well in other contexts might fall apart in this specific combination; one or both blocks look squished, or poorly aligned, or have clunky colour contrast, for example. At the design stage, we must consider accounting for simple optional style variations that sometimes make components completely versatile.

Likewise, we must consider the context of the user’s device. Are there any potential gotchas about the way that a combination of different blocks rearrange themselves for a mobile layout which could cause a problem? The inherent flexibility of a modular system can demand that a little extra rigour goes into the responsive design.

Careful thought needs to go into creating a fluid visual rhythm between all these individual components. The designer’s challenge is to figure out how to keep them from interfering with each other, while maintaining a feeling of spatial integration rather than rigid separation, such that they speak a harmonious language. And harmony is more pleasing when it includes melodic accents, rather than a safe but monotonous drone.

System of user Interface components

Balance freedom and constraint

With great power comes great responsibility! The old template based approach led content editors down a well trodden path in the form of rigid, pre-prescribed fields. The developers can easily ensure that the website remains doggedly faithful to the original design files. That is not without any advantages. You’d be forgiven for questioning whether a Gutenberg powered site provides too much freedom for editors. Is there too much to think about now, will I have option paralysis, will I have opportunities to make poor or inconsistent decisions when composing content? Think I can’t mess this up? Hold my beer…

Happily, Gutenberg’s intuitive interface addresses most of these problems. The block editor emphasises visual consistency between back- and front-end appearance, as well as the principle of direct manipulation. You can read more about this in settings and controls found in context. The rest comes back to the design and development being rigorous enough that the user can’t go wrong. As we’ve noted, any combination of blocks should work visually and functionally.

When a type of page should always have certain blocks included, and never others, there are ways to enforce this. Features like reusable blocks, block patterns, and block templates. Features that bring the more useful aspects of the old template approach into this contemporary ecosystem. You can decide where the right balance between editorial freedom and helpful hand-holding lies for you. The finished product has to fit your needs specifically.

Choose your dev team wisely

Going full-Gutenberg demands a new level of expertise which is not commonplace within the otherwise populous world of WordPress development. Your dev team will need to have already invested plenty of energy into exploring this new territory, rather than a mere tentative dip of the toe.

A figure deep in thought leaning against a laptop

The changes to the WordPress paradigm that the block editor has ushered in have been very significant. It’s understandable that many agencies won’t have managed to use it in anger and truly learn it yet. We all aim to eliminate risk for our clients by combating uncertainty and accomplishing projects using tried-and-true methods. However, there are some who, whether through forward-thinking dynamism, prudent foresight, or simple geeky FOMO, were all about the ‘Berg since day one. They’ve had a couple of years now to develop their expertise alongside the rapid development of the Gutenberg project itself. Growing pains now behind them, they are reaping the rewards of this investment, as they can deliver a much higher caliber product. They’re the ones you’re looking for.