Creating Custom Gutenberg Blocks Without React: A Practical Guide

Gutenberg, the WordPress block editor, has changed how we build content. It’s fast, flexible, and designed for a modular experience. But for many WordPress developers, especially those who aren’t fluent in React or JSX, building custom blocks can feel intimidating.

Here’s the good news: you don’t need React to create powerful, custom Gutenberg blocks. WordPress offers a way to build them using plain JavaScript, PHP, and JSON. This approach keeps things lean, familiar, and beginner-friendly.

Whether you’re maintaining legacy codebases or simply prefer vanilla JavaScript, this guide will walk you through building Gutenberg blocks—React-free.

---

What Are Gutenberg Blocks?

Gutenberg blocks are modular pieces of content (like paragraphs, images, or buttons) that can be added and rearranged visually in the WordPress editor. Each block is defined by:

• Metadata (like name and category)
• Attributes (the data it stores)
• Edit & Save Functions (how it appears in the editor and on the frontend)

The React Myth

Yes, the Gutenberg editor is built with React. But you don’t have to write React code to use it. WordPress exposes APIs that let you define blocks using plain JavaScript and JSON, with helper libraries like:

• @wordpress/blocks
• @wordpress/i18n
• @wordpress/editor

You can also register blocks in PHP using register_block_type() and a block.json config file.

---

The Role of block.json

Starting in WordPress 5.5, block.json allows you to define block metadata in a single file. It includes:

• The block name
• Title and description
• Category
• Scripts and styles
• Attributes

Example:

{
  "apiVersion": 2,
  "name": "custom/simple-block",
  "title": "Simple Block",
  "category": "design",
  "editorScript": "file:./block.js",
  "style": "file:./style.css"
}

Registering a Block in PHP

In your theme or plugin:

function register_simple_block() {
    register_block_type( __DIR__ . '/blocks/simple-block' );
}
add_action( 'init', 'register_simple_block' );

Writing JavaScript Without React

Instead of JSX, use WordPress’ createElement:

const { registerBlockType } = wp.blocks;
const { createElement: el } = wp.element;

registerBlockType('custom/simple-block', {
    title: 'Simple Block',
    icon: 'smiley',
    category: 'design',
    edit: () => el('p', {}, 'Hello from the editor!'),
    save: () => el('p', {}, 'Hello from the frontend!')
});

You can also use document.createElement() or external libraries like Alpine.js or Vue (if integrated carefully).

---

Folder Structure

my-plugin/
│
├── blocks/
│   └── simple-block/
│       ├── block.json
│       ├── block.js
│       └── style.css
└── my-plugin.php

block.js – No React Needed

const { registerBlockType } = wp.blocks;
const { createElement: el } = wp.element;

registerBlockType('custom/simple-block', {
    edit: () => el('div', {}, 'Editor view'),
    save: () => el('div', {}, 'Frontend view')
});

style.css

.wp-block-custom-simple-block {
  padding: 1rem;
  background: #f5f5f5;
}

---

Best Practices

1. Keep It Simple

Start with small blocks that do one thing well—like inserting a note or styled box.

2. Use the Block API

Take full advantage of the WordPress Block API and helper libraries. Most functionality you’d use in React is already exposed via wp.blocks, wp.components, and wp.editor.

3. Stick to block.json

Let block.json handle registration logic. This ensures your block works with Full Site Editing and future WordPress updates.

4. Don’t Reinvent the Wheel

Use built-in WordPress components (e.g., TextControl, PanelBody) to create settings panels. These are React components, but you can wrap them in vanilla JS with WordPress helpers if needed.

4. Style Responsibly

Use scoped CSS and avoid global overrides. Apply styles directly in your block class (wp-block-your-namespace) or inline where needed.

---

Conclusion

Creating custom Gutenberg blocks doesn’t require React expertise. With just PHP, plain JavaScript, and WordPress’s powerful block API, you can build efficient, maintainable blocks for your themes or plugins.

Whether you’re maintaining a classic PHP-based workflow or simply prefer to avoid modern JS tooling, you still have full access to the modern block editor—on your terms.

---

How Sitebox Solves the Problem

Sitebox makes non-React Gutenberg development smoother by:

• Auto-generating block.json boilerplates
• Providing vanilla JS starter templates
• Allowing PHP-based block registration with block previews
• Bundling styles and scripts without complex build tools
• Ensuring compatibility with Full Site Editing and global styles

Whether you’re building for clients or contributing to a classic theme, Sitebox helps you skip the React learning curve and deliver custom blocks faster.

👉 Get started with Sitebox’s non-React block builder