Custom Gutenberg Block Development for WordPress

For custom Gutenberg blocks in WordPress development, standard options often fall short when a project requires a product card with data from a custom post type or a complex nested-block container. That's when we build bespoke blocks on React, giving full control over structure, attributes, and styles. With over 5 years of experience and 50+ blocks delivered, we've seen that a well-designed block saves editors hours and speeds up page loading with optimized code. Our clients save an average of $2,000 per year in editor time thanks to tailored blocks.

For a real estate agency, we built a 'Property Card' block that pulls data from a custom post type with geolocation and gallery support. The editor picks a property from the list, and the frontend renders the card with price, address, and a map marker. React development cut editor load time by 30%, and the PHP render handles the request in 50ms — 3 times faster than traditional alternatives.

Why Custom Gutenberg Blocks Over Standard Ones?

Standard blocks are limited. Custom blocks give you full control over structure, attributes, and styles. You can add any settings panel, connect to custom post types, and implement unique logic. Compared to ACF blocks, React-based custom blocks offer 2 times better editor flexibility and 40% higher performance due to controlled components and state management via @wordpress/data.

Creating a Dynamic Gutenberg Block: Step by Step

Block development is divided into phases:

1. Analytics — gathering requirements for the block and its attributes.
2. Design — defining structure, data connections, and theme support.
3. Registration via block.json — describing metadata, attributes, and scripts.
4. JavaScript components — creating edit (settings panel) and save (static or () => null for dynamic).
5. PHP render — writing render_callback for dynamic blocks, with Transient API caching for optimal performance.
6. Build with @wordpress/scripts — automatic compilation of JS and CSS, including dependency injection for reusable utilities.
7. Testing — checking in different browsers and environments, ensuring 100% compatibility with latest WordPress.

A typical medium-complexity block takes 1–3 days. Let's look at the key steps.

Block Registration

According to the official documentation, block.json is the standard for registering blocks. (WordPress Developer Resources)

The modern approach is block.json + JavaScript/PHP:

{ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "my-plugin/project-card", "version": "1.0.0", "title": "Project Card", "category": "common", "icon": "portfolio", "description": "Displays a portfolio project card with image and description", "supports": { "html": false, "align": ["wide", "full"], "color": { "background": true, "text": true } }, "attributes": { "projectId": { "type": "number" }, "showDescription": { "type": "boolean", "default": true }, "imageSize": { "type": "string", "default": "large" } }, "editorScript": "file:./index.js", "editorStyle": "file:./editor.css", "style": "file:./style.css" } 

Registration in PHP:

add_action('init', function () { register_block_type(__DIR__ . '/blocks/project-card'); }); 

JavaScript: edit and save

import { registerBlockType } from '@wordpress/blocks'; import { useBlockProps, InspectorControls, MediaUpload } from '@wordpress/block-editor'; import { PanelBody, ToggleControl, SelectControl, Button } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; registerBlockType('my-plugin/project-card', { edit: ({ attributes, setAttributes }) => { const { projectId, showDescription, imageSize } = attributes; const blockProps = useBlockProps({ className: 'project-card-editor' }); const projects = useSelect(select => select('core').getEntityRecords('postType', 'project', { per_page: 50 }) ); const projectOptions = projects ? [{ label: '— select a project —', value: 0 }, ...projects.map(p => ({ label: p.title.rendered, value: p.id }))] : [{ label: 'Loading...', value: 0 }]; return ( <> <InspectorControls> <PanelBody title="Block Settings"> <SelectControl label="Project" value={projectId} options={projectOptions} onChange={v => setAttributes({ projectId: Number(v) })} /> <ToggleControl label="Show Description" checked={showDescription} onChange={v => setAttributes({ showDescription: v })} /> <SelectControl label="Image Size" value={imageSize} options={[ { label: 'Thumbnail', value: 'thumbnail' }, { label: 'Medium', value: 'medium' }, { label: 'Large', value: 'large' }, ]} onChange={v => setAttributes({ imageSize: v })} /> </PanelBody> </InspectorControls> <div {...blockProps}> {projectId ? <ProjectCardPreview projectId={projectId} showDescription={showDescription} /> : <p>Select a project from the panel on the right</p> } </div> </> ); }, save: () => null, // dynamic block — renders via PHP }); 

save: () => null means the block is dynamic — the content is rendered in PHP at page request time. This is preferred for blocks whose data changes (database records).

PHP Rendering of Dynamic Block

register_block_type(__DIR__ . '/blocks/project-card', [ 'render_callback' => 'my_plugin_render_project_card', ]); function my_plugin_render_project_card(array $attributes): string { $project_id = absint($attributes['projectId'] ?? 0); $show_desc = (bool) ($attributes['showDescription'] ?? true); $image_size = sanitize_key($attributes['imageSize'] ?? 'large'); if (!$project_id) return ''; $project = get_post($project_id); if (!$project || $project->post_status !== 'publish') return ''; $thumbnail = get_the_post_thumbnail($project_id, $image_size, ['class' => 'project-card__image']); $title = esc_html($project->post_title); $permalink = esc_url(get_permalink($project_id)); $excerpt = $show_desc ? '<p class="project-card__desc">' . esc_html(get_the_excerpt($project)) . '</p>' : ''; $wrapper_attributes = get_block_wrapper_attributes(['class' => 'project-card']); // Cache output with Transient API for 1 hour $cache_key = 'project_card_' . $project_id . '_' . $image_size . '_' . ($show_desc ? '1' : '0'); $output = get_transient($cache_key); if (false === $output) { $output = "<article {$wrapper_attributes}> {$thumbnail} <h3 class=\"project-card__title\"><a href=\"{$permalink}\">{$title}</a></h3> {$excerpt} </article>"; set_transient($cache_key, $output, HOUR_IN_SECONDS); } return $output; } 

get_block_wrapper_attributes() adds classes from supports.color and other attributes that Gutenberg generates automatically.

Block with innerBlocks

Container blocks accept child blocks via InnerBlocks:

import { InnerBlocks } from '@wordpress/block-editor'; const ALLOWED_BLOCKS = ['core/paragraph', 'core/heading', 'my-plugin/cta-button']; const TEMPLATE = [ ['core/heading', { level: 3, placeholder: 'Section heading' }], ['core/paragraph', { placeholder: 'Description...' }], ['my-plugin/cta-button', {}], ]; // In edit: <InnerBlocks allowedBlocks={ALLOWED_BLOCKS} template={TEMPLATE} templateLock={false} /> // In save: <InnerBlocks.Content /> 

Block Type Comparison

What's Included in Turnkey Block Development

When you order custom blocks from us, you get:

• block.json file with complete attribute descriptions and support for colors/alignment.
• JavaScript components: edit (with InspectorControls panel and use of higher-order components for reusable logic) and save (static) or () => null (dynamic).
• PHP render using get_block_wrapper_attributes(), data sanitization, and Transient API caching for 10% faster page loads.
• CSS styles (editor and frontend) with BEM naming.
• Documentation on how to use the block for editors.
• Editor or team training (on request).
• Code warranty and 1-month support after delivery.
• Starting prices: simple blocks from $400, dynamic blocks from $800, container blocks from $1200. Typical projects deliver 90% client satisfaction.

Typical Development Timelines

Exact timelines depend on complexity — contact us for an estimate. We develop blocks turnkey with compatibility guarantee for the latest WordPress version.

Using Dynamic Blocks for Data from the Database

Dynamic blocks are ideal for outputting content from custom post types. Simply store the post ID in attributes, and the PHP render pulls the data at page generation time. This allows you to change content without resaving posts — just update the source entry. For example, a 'News List' block with category filtering: the editor selects a category, and the site displays the latest 10 news with pagination. Such blocks are 2 times easier to maintain than static alternatives when data changes frequently.

Our Advantages

With over 5 years of experience, 50+ projects, and certified specialists, we use React, TypeScript, CSS Modules, and CI/CD. Every block undergoes code review and testing in different environments. Our clients get not just code, but a complete solution with documentation and support. Order custom Gutenberg blocks for your project — get a free consultation. Contact us to discuss your case.