# Block atomicity

*Published:* 2024-12-13
*Author:* Danish Shakeel

> Master the art of block design in WordPress. Create versatile, reusable, and composable blocks that align with atomicity principles.

# 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.

![Quote Block in WordPress site editor](https://rtcamp.com/wp-content/uploads/sites/2/2024/10/Fig-3.1.png?w=720&resize=720%2C264&quality=100&strip=all)Figure 3.1Figure 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.

![Gallery Block in WordPress site editor](https://rtcamp.com/wp-content/uploads/sites/2/2024/11/Screenshot-2024-11-15-at-18.37.52.png?resize=720%2C735&quality=100&strip=all)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

![modularity of image block and paragraph block.](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdWUjJTUcfvsKbHb6K5pn0niH5m3Ud01b2hUxQSu8DzV0BsLdpMtqRHeXIB1RYerQ6A9qEC-lM9F5xmKs2AJz5seIxDFcWfhN9FFLHihkO4mfZrvACSjyvnM8thYhSatM2nhaA7Ng?key=naM81YGDZ-tRSPkEeGtVmg)Figure 3.3Figure 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:

1. Ensure consistent styling across blocks
2. Consider how blocks will interact when combined
3. Create guidelines for spacing between different types of blocks
4. Design transitions or dividers that can be used between sections

### Categories and Taxonomies

#### Service
[WP Frontend Development](https://rtcamp.com/blog/service/wp-frontend-development.md)

#### Solutions
[WordPress Development](https://rtcamp.com/blog/solution/wordpress-development.md)

#### Topics
[Frontend](https://rtcamp.com/topics/frontend.md), [WordPress](https://rtcamp.com/topics/wordpress.md), [WordPress Development](https://rtcamp.com/topics/wordpress-development.md)

### Related Posts

- [Structural Limits of Accounting-First Software](https://rtcamp.com/handbook/why-migrate-quickbooks-to-erpnext/structural-limits.md)
- [Project structure](https://rtcamp.com/handbook/react-best-practices/project-structure.md)
- [Outgrowing standard hosting](https://rtcamp.com/handbook/enterprise-wordpress-hosting/why-choose-enterprise-wordpress-hosting.md)
- [WordPress vs Kentico](https://rtcamp.com/handbook/enterprise-consolidation/kentico-vs-wordpress.md)
- [rtCamp’s philosophy & principles](https://rtcamp.com/handbook/headless-wordpress/rtcamps-philosophy.md)