A Complete Guide on How to Choose What to Build
Before deciding what to build and how to approach its recommended to focus on these key steps:
- Understand the Users: Identify who will use the solution (content creators, designers, etc.) and their technical abilities.
- Define the Goals: Are users looking for flexibility (like a page builder) or structured content (fixed templates)? Clarify their objectives.
- Determine Complexity: Choose between flexible, composable systems (like atomic design with core blocks) or more locked-down, custom-built components.
- Balance Flexibility and Control: Tailor the editorial experience to meet client needs—either give freedom or limit customization with block locking or custom blocks.
- Plan for Maintenance: Consider future updates and how easy it will be to maintain and evolve the solution.
Step 1: Understand the User and Their Goals
Before deciding how to build the design in WordPress, you should ask:
- Who is going to use this? Who will be adding content to the website? Is it a client, a content editor, or someone else?
- What are their goals? Do they want a fixed structure for their content, or do they want more freedom to design their pages?
Some clients just want to add content without worrying about design, while others want control over how things look. Most fall somewhere in between, so it’s important to figure out their needs early on.
Step 2: Atomic vs. Molecular Structures
Based on their goals, you’ll decide if the client needs:
- More flexibility: Where they can build pages from individual, smaller blocks (like pieces of LEGO).
- More structure: Where the design and layout are fixed, and they just fill in the content.
Let’s look at an example design and how you could build it in WordPress:
Example:
Approach 1: Using Core Blocks Only
In this approach, you rely solely on WordPress core blocks like the Group block, Columns block, Heading block, Image block, and Paragraph block.
Here’s how you can insert these blocks manually in the WordPress block editor:
- Insert Group Block
- Add a Heading Block inside the Group
- Insert a Columns Block with 3 Columns
- In each column, add the following:
- Image Block
- Heading Block
- Paragraph Block
- In each column, add the following:
This is completely flexible, and editors can adjust any part of the content and layout.
Approach 2: Using Core Blocks + Block Pattern
A block pattern provides a predefined layout that users can insert easily. Here’s how you can create a block pattern in code.
Registering a Block Pattern in PHP:
Add this to your theme’s functions.php file or a plugin.
function register_custom_block_pattern() {
register_block_pattern(
'mytheme/icon-card-pattern',
array(
'title' => __( 'Icon Card Layout', 'mytheme' ),
'description' => _x( 'A layout with a heading, 3 columns with image, heading, and text.', 'Block pattern description', 'mytheme' ),
'content' => '
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:heading -->
<h2>My Icon Card Section</h2>
<!-- /wp:heading -->
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:image -->
<figure class="wp-block-image"><img src="icon1.png" /></figure>
<!-- /wp:image -->
<!-- wp:heading -->
<h3>Heading 1</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Some text here.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:image -->
<figure class="wp-block-image"><img src="icon2.png" /></figure>
<!-- /wp:image -->
<!-- wp:heading -->
<h3>Heading 2</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Some text here.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:image -->
<figure class="wp-block-image"><img src="icon3.png" /></figure>
<!-- /wp:image -->
<!-- wp:heading -->
<h3>Heading 3</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Some text here.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</div>
<!-- /wp:group -->',
)
);
}
add_action( 'init', 'register_custom_block_pattern' );
- This registers a block pattern named “Icon Card Layout.”
- Editors can insert this layout with one click, then modify the content (text, images) as needed.
Approach 3: Using Core Blocks + Block Pattern with Restrictions
Here, we add block locking to restrict what editors can do. For instance, you can lock the blocks to prevent them from being moved or removed.
Restricting Block Editing with Block Locking:
Add this to your JavaScript file, usually enqueued in the admin area of WordPress.
const { dispatch } = wp.data;
const { select } = wp.blocks;
const { lockBlock } = wp.editPost;
// After inserting the pattern, lock specific blocks
wp.domReady(() => {
const blockEditor = wp.data.select('core/block-editor');
const blocks = blockEditor.getBlocks();
blocks.forEach((block) => {
if (block.name === 'core/columns') {
// Lock movement and removal for column blocks
dispatch('core/editor').updateBlockAttributes(block.clientId, {
lock: {
move: true,
remove: true
}
});
}
});
});
This code locks the movement and removal of the columns block, so editors can only edit the content inside the columns but can’t change the layout.
Approach 4: Building a Custom Icon Card Block
For this, you would create a custom block. Let’s create a custom block named “Icon Card,” where the user picks an icon and fills in text, but the design (spacing, colors, layout) is fixed.
const { registerBlockType } = wp.blocks;
const { RichText } = wp.blockEditor;
const { IconButton } = wp.components;
registerBlockType('mytheme/icon-card', {
title: 'Icon Card',
icon: 'id-alt',
category: 'design',
attributes: {
icon: {
type: 'string',
default: ''
},
title: {
type: 'string',
source: 'html',
selector: 'h3',
},
description: {
type: 'string',
source: 'html',
selector: 'p',
}
},
edit: ({ attributes, setAttributes }) => {
return (
<div className="icon-card">
<IconButton
icon={attributes.icon || 'id'}
label="Select Icon"
onClick={() => setAttributes({ icon: 'heart' })} // example to change icon
/>
<RichText
tagName="h3"
value={attributes.title}
onChange={(title) => setAttributes({ title })}
placeholder="Add title"
/>
<RichText
tagName="p"
value={attributes.description}
onChange={(description) => setAttributes({ description })}
placeholder="Add description"
/>
</div>
);
},
save: ({ attributes }) => {
return (
<div className="icon-card">
<span className={`icon ${attributes.icon}`}></span>
<RichText.Content tagName="h3" value={attributes.title} />
<RichText.Content tagName="p" value={attributes.description} />
</div>
);
}
});
Create the Block.
function enqueue_icon_card_block_assets() {
wp_enqueue_script(
'icon-card-block',
get_template_directory_uri() . '/build/icon-card.js',
array( 'wp-blocks', 'wp-element', 'wp-editor' )
);
}
add_action( 'enqueue_block_editor_assets', 'enqueue_icon_card_block_assets' );
Enqueue the Block.
This will create a custom block with a fixed design where editors can pick an icon, add a heading, and add some description text.
Bonus: Using Block Patterns with Dynamic Blocks
Dynamic blocks in Gutenberg are blocks where the content is generated or rendered on the server side, rather than being entirely static in the block editor. This allows for content that can change dynamically based on data or logic at the time of rendering. Dynamic blocks are useful for displaying content that might vary over time or depend on certain conditions, like recent posts, user data, or any other server-side information.
Also, consider choosing dynamic blocks when you are not sure about content changes or if your design/requirements frequently change then considering dynamic blocks will be the best choice to handle this scenario also by this way you don’t need to create block transforms and add deprecations to your block.
For dynamic blocks (blocks whose content updates automatically), you can combine the dynamic block with a pattern to make content easier to insert while keeping flexibility.
