Atomicity in WordPress Block Design

The philosophy behind Gutenberg blocks is ‘atomicity’. While designing a block, there are a few things that a designer should keep in mind.

Reusability: Think in terms of modularity when designing blocks. The fundamental idea behind a block is for it to be reusable and modular. One of the ways to achieve this is to ensure that the element serves a single purpose and makes sense even when used alone.

Figure 3.1

Figure 3.1 shows a ‘Quote’ block which ships with WordPress. This block serves a single purpose, i.e., to write a quote. It needs not to be used with any other block for it to make sense.

Combinability

One important factor to consider when designing a block is how it can be combined with other (similar or different) blocks. This is particularly important when designing blocks which handle layouts, like grids or stacks. WordPress has a concept of ‘Inner Blocks’ which lets users nest blocks within another block. A simple example of this is the ‘Gallery’ block shown in Figure 3.2.

Figure 3.2

Modularity

One more important concept to keep in mind is ‘modularity’. Modularity refers to design elements which can be independently created, modified, replaced, or exchanged with other elements or even design systems.

To ensure modularity, a designer should:

Design reusable patterns that can be combined
Consider how blocks can be nested and combined
Create a library of common elements and patterns
Design with the ability to swap components easily

Figure 3.3

Figure 3.3 highlights the modularity of image block as well as paragraph block.

Modularity also revolves around the two Cs: composability and combinability.

A WordPress website consists of tens (or sometimes hundreds) of different blocks. Although the number of different blocks should be kept to a minimum, there’s no strict upper limit. For a designer, it is imperative to ensure that blocks work well together. This makes up the composability and combinability of block design.

Following are the tips to ensure that the two Cs are maintained: