Headless WordPress Gutenberg & Next.js — Part 1/3: Creating a Block with React

The WordPress ecosystem is surely going towards JavaScript and non-PHP ways to develop plugins, themes and the core itself. Thanks to Gutenberg and WordPress JavaScript API, we can create some cool stuff. One of those would be a production-ready, WordPress static site builder that we’re going to code in this series.

Michal Trykoszko
Feb 27 · 9 min read

Before we start

Intro

But how does it differ of all the other articles or tutorials on the internet?

A video about Gutenberg to Next.js connection

WordPress development environment

docker-compose.yml (placed inside project root folder)
It should output green “done” flags twice — one for database and one for WordPress container
WordPress new instance config screen

The PHP part

Basic structure of a plugin
All the PHP code we need for now
React Components

React Components

React Component Generation

Starting point

RFC or RCC

State

Example component

An example of React Functional Component (UserCardWrapper) I made for this article
An example of component (UserCard) which will be imported to parent
The component itself (isModalOpen = false) (please don’t dislike me for taste! 😂)
The component itself (isModalOpen = true)

registerBlockType: "WordPressify" React component

package.json with @wordpress/blocks and scripts
./src/index.js
You can already add your block to any of your posts
Here’s the live example of block we created

The two nice functions — edit() and save()

Our React Component inside Gutenberg
WordPress Gutenberg block made from React Functional Component
React-built Gutenberg block

Try it out and play with it!

Summary

Make your React Gutenberg block interactive
wp object inside WordPress post edit screen

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Michal Trykoszko

Written by

PHP and JavaScript Full-stack Developer specialized in WordPress

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store