Elementor made WordPress accessible to everyone. It also made WordPress sites slow, bloated and hard to maintain. There's an alternative that keeps the flexibility without the bloat: custom Gutenberg blocks built in React.
What Gutenberg is and why it matters
Gutenberg is WordPress's block editor, introduced in version 5.0. Instead of shortcodes or drag-and-drop with external builders, Gutenberg builds pages by assembling blocks. Every block is a React component.
WordPress has invested heavily in Gutenberg. It's the future of the WordPress ecosystem, not a niche alternative. Page builders like Elementor exist despite Gutenberg, not because of it.
The limits of standard blocks
WordPress's standard blocks cover the basics: text, images, galleries, video, buttons. But for a business site with specific needs, these blocks aren't enough.
Want a "team" block showing staff members with photos and roles? Doesn't exist. Want a "timeline" block for your company history? Doesn't exist. Want a "calculator" block to estimate a quote? Doesn't exist.
The traditional solution was Elementor or ACF with custom templates. Both add weight and dependencies.
Custom blocks in React: what changes
A custom Gutenberg block is a React component registered as a WordPress block. It has:
- An editing interface in the Gutenberg editor (admin side) - A frontend output optimized for speed and SEO - Configurable attributes that editors can change without touching code
For the editor, the experience is simple: open the page, add the "Team" block, enter name, role and photo for each member, save. The block handles the rest.
For the site, the result is clean, performant HTML — no jQuery, no Elementor CSS, no unnecessary scripts.
Practical examples
Hero block with video background: the editor uploads a video, chooses text and CTA from the Gutenberg interface. The block generates optimized HTML with lazy-loaded video and an image fallback.
FAQ accordion block: the editor adds questions and answers from the admin. The frontend uses vanilla JavaScript for the animation — no extra library.
Quote calculator block: a React form that calculates in real time and emails the results. All inside the block.
Team block: cards for each member with photo, name, role and social links. Fully editable from the admin.
When custom blocks are worth it
Worth it when: - You have repeated components across multiple pages that need to be editable - Your content team can't code but needs to be able to update the site - You want the flexibility of a page builder without Elementor's weight - You're building a WordPress theme others will use
Not worth it when: - The site has fewer than 5 pages and won't change often - You don't have a content team — in that case, static data in code is simpler
The development process
1. Analysis: we define together which blocks are needed and what should be editable. 2. Development: we build each block in React with its Gutenberg interface. 3. Integration: we integrate the blocks into the existing theme or a new custom theme. 4. Documentation: we deliver a guide and a video for every block.
Ready to build your custom Gutenberg blocks? Check out our WP Gutenberg React service.