whatisgithub

What is gutenberg-control-blocks-lite?

wordpress-gcb/gutenberg-control-blocks-lite — explained in plain English

Analysis updated 2026-05-18

64JavaScriptAudience · developerComplexity · 4/5Setup · moderate

In one sentence

A WordPress plugin that lets one React component power both the Gutenberg block editor preview and the live Next.js site, so you never write duplicate block code.

Mindmap

mindmap
  root((repo))
    What it does
      Shares one component
      Editor and live site match
      Typed content fields
    Tech stack
      JavaScript
      React
      WordPress plugin
      Next.js
    Use cases
      Headless WordPress sites
      Custom Gutenberg blocks
      Design systems for editors
    Audience
      Developers
      Agencies

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Build a headless WordPress site where the editor preview matches the live site exactly.

USE CASE 2

Give content editors a rich Gutenberg editing experience without maintaining separate edit.js files.

USE CASE 3

Mix PHP-rendered blocks and React-rendered blocks in the same WordPress site.

What is it built with?

JavaScriptReactWordPressNext.jsPHP

How does it compare?

wordpress-gcb/gutenberg-control-blocks-litekiddo-pwn/ffffirefoxreal-elysia886/todo-tree-next
Stars646464
LanguageJavaScriptJavaScriptJavaScript
Setup difficultymoderatehardeasy
Complexity4/55/52/5
Audiencedeveloperresearcherdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 1h+

Requires both a WordPress install with the plugin and a separately hosted Next.js (or similar SSR) frontend to render blocks.

So what is it?

GCB Lite is a WordPress plugin that lets you write a single React component and have it show up correctly in two places: the Gutenberg block editor where content writers make edits, and your live public website built with Next.js. Normally, building a custom WordPress block means writing three separate pieces of code that describe the same thing (an editor preview file, a saved markup file, and your actual frontend component), and these three versions tend to drift apart over time. GCB Lite removes that duplication. The way it works is that a block in the editor points to a React component living on your Next.js frontend. When someone is editing content in wp-admin and needs to see a preview, WordPress calls your frontend server to server and shows the returned HTML. When a real visitor loads the public page, that same component renders the page directly. There is no React code running inside WordPress itself, only the HTML that gets sent back and forth. Each block can choose its own way of rendering. If a block includes a render.php file, WordPress runs that file locally like a standard block. If it does not, the plugin instead calls out to your frontend to get the HTML. This means you can adopt GCB Lite just for its typed content fields and keep everything in plain PHP, or build blocks entirely in React, or mix both approaches block by block. To create a block, you define a small JSON file describing its content fields, such as a text heading, an image with a focal point picker, or a group of toggle buttons for alignment. The plugin reads this file, builds the correct WordPress attributes automatically, and generates the editing panel for you, so there is no need to hand write editor code. The project includes a live demo site and a companion Next.js starter repository showing working examples. It is written in JavaScript.

Copy-paste prompts

Prompt 1
Help me create a new GCB Lite block with a block.fields.json defining a heading and image control.
Prompt 2
Explain how the render.php fallback works compared to the React render path in GCB Lite.
Prompt 3
Show me how to wire a Hero.jsx component into the WP_BLOCK_REGISTRY on my Next.js frontend.
Prompt 4
Walk me through connecting GCB Lite to the gcb-next-starter reference project.

Frequently asked questions

What is gutenberg-control-blocks-lite?

A WordPress plugin that lets one React component power both the Gutenberg block editor preview and the live Next.js site, so you never write duplicate block code.

What language is gutenberg-control-blocks-lite written in?

Mainly JavaScript. The stack also includes JavaScript, React, WordPress.

How hard is gutenberg-control-blocks-lite to set up?

Setup difficulty is rated moderate, with roughly 1h+ to a first successful run.

Who is gutenberg-control-blocks-lite for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.