Unlock Your WordPress Block Development Potential with Live Editor Updates

Does your typical workflow, when developing blocks, involve making a few edits, refreshing the page, making some more edits, refreshing again, and so on?

I’m sure you’ll agree, it can get quite tedious doing this constantly in a coding session but it’s what a lot (most?) of us do when editing and previewing block changes. What if there was a better way?

Imagine being able to change your block code and see the browser automatically rerender your block right in the Gutenberg code editor, without the need to refresh the page manually. It’s a real game-changer for block development. Let’s see how we can make that happen.

Bonus, Update Tailwind Styles in Real-Time Too!

Toward the end of the tutorial, I’ll also demonstrate how you can also integrate Tailwind support into your blocks and see block output update automatically whenever you add Tailwind classes! Neat, eh?

Without further ado, let’s get started.

Create a New Block

We’ll need a block to work with, to demonstrate the real-time rerendering of block changes. For this tutorial, I’ll just create a brand new block plugin for simplicity but you should be able to use an existing block plugin. The only prerequisite is that it should use the @wordpress/scripts package start script to handle block compilation in development.

Open a terminal in the directory that you want the new plugin folder to be created in and run:

npx @wordpress/create-block fast-refresh-test

Choose a different name if you prefer. Here, I’ve just used ‘fast-refresh-test’. After a couple of minutes (mileage may vary, depending on the speed of your computer), you’ll have a brand-new block plugin ready to be customized. By default, the @wordpress/create-block package creates a plugin containing a single block.

Note: I’ll be using the VS Code editor throughout this tutorial but you can use whatever you wish.

Setting up a WordPress Server

Now that we have a block plugin (containing a single block), we need somewhere to install and activate it so we can add our new block to a page and view automatic updates.

We’ll be using the excellent wp-env server as it’s very easy to get up and running, and works seamlessly with Fast Refresh when making block changes. It’s probably fine to use another WordPress server but I should point out that there could be some setup issues when using alternatives (e.g. Local).

This isn’t a tutorial about wp-env specifically so if it’s completely new to you then you might want to check out the docs to familiarize yourself with how it works. However, you won’t need to know that much to follow along. A deep understanding of wp-env isn’t required.

Docker Desktop

Docker Desktop is a requirement of wp-env so you’ll need this to be installed and running before the WordPress server can be started. It’s very easy to install, just head on over to the product page to download and install it if needed.

Installing wp-env

You can install wp-env globally if preferred, but you can also just install it locally inside your new block plugin, which is what we’ll do here. Run this command in the terminal while in the plugin root directory:

npm i @wordpress/env --save-dev

Once wp-env is installed (and Docker Desktop is running) you can start the WordPress server with:

npx wp-env start

Go to http://localhost:8888/wp-admin and log in (u/n: admin, p/w: password) to access your new WordPress website.

If you take a look in the Docker Desktop app you should see the WordPress instance running.

Adding a New Block

You’ll find that the block plugin has already been activated for us as part of the wp-env initialization process.

Create a new page and add the block included with the plugin. If you used the same name as me then this will be the ‘Fast Refresh Test’ block.

View Block Changes in Real-Time

We’re almost there now. We just need to initiate the script from the @wordpress/scripts package that watches for file changes and rebuilds the block every time the code is edited and saved.

Normally we could just do this with npm start but this won’t auto-rerender the block in the browser. So every time you make a change to the block source code you have to manually refresh the browser to see the changes. We can improve upon this.

In order to trigger auto-block rerendering we need to use the --hot option:

npx wp-scripts start --hot

Revisit or reload the WordPress page you added the block to and make some code changes to see the block automatically rerender in the browser as demonstrated in the video below.

The potential to speed up your block development workflow is huge. It’s such an efficient development experience compared to the traditional continuous edit/refresh cycle you may have been used to.

Let’s try something else now. Select the block in the Gutenberg editor and then replace the contents of edit.js with the following code (comments removed for brevity):

import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, PanelRow } from '@wordpress/components';
import './editor.scss';

export default function Edit() {
	return (
		<>
			<p {...useBlockProps()}>
				{__(
					'Do you like live block updates?',
					'fast-refresh-test'
				)}
			</p>
			<InspectorControls>
				<PanelBody title={__('General Settings', 'fast-refresh-test')}>
					<PanelRow className="panel-row-label">
						<div>Add your block settings here.</div>
					</PanelRow>
				</PanelBody>
			</InspectorControls>
		</>
	);
}

In the Settings Sidebar you’ll see a new ‘General Settings’ panel magically appear. Live block updates include all updates to your block code, not just the direct output in the content area. Starting to love this yet?

Browser Debugging

Another nice feature is that any issues encountered with the block code during compilation are outputted directly to the browser window as you live edit the code.

For example, try removing the closing div element inside the <PanelRow>.

I consider this instant error reporting feedback just as useful as seeing the block rerender in real-time. It’s great to know about any issues straight away, so you can deal with them immediately.

Shortcut Script

For convenience, we can add a custom script to package.json to watch files and auto-rerender block output. The wp-env docs recommend using this script:

"start:hot": "wp-scripts start --hot",

Which can then be run in the terminal via:

npm run start:hot

Update Tailwind Styles in Real-Time Too

So far we’ve seen how to update block styles (via Sass files) so that they rerender automatically inside the block editor. But what if you’re used to using Tailwind CSS? Does live reloading work for that too?

By the way, if you’re not aware, Tailwind is a hugely popular framework for quickly scaffolding out CSS designs/layouts. It’s only natural to assume that you might want to include it as part of your block development workflow.

You’ll be pleased to know that, yes, you can use Tailwind with live reloading! Let’s take a look at how this works.

It’s a pretty similar process to before except you need to use a custom Tailwind template when creating your block. I actually wrote this template a while back to provide an easy way to support Tailwind in your WordPress blocks. It works pretty well.

Create the Block

Let’s create a new block plugin using the Tailwind template. Run this command in the terminal where you want the plugin folder to be created.

npx @wordpress/create-block fast-refresh-tw -t tw-block

The only real difference this time is that we specify a custom template to be used for our block -t tw-block.

Starting the WordPress Server

If you still have wp-env running from before then you can stop this via the terminal (make sure you’re in the root directory of the first plugin, not this new one) by entering:

npx wp-env stop

Or, just go to the Docker Desktop app and delete the WordPress network container. Then, in the root directory of the new plugin enter the following terminal commands:

npm i @wordpress/env --save-dev
npx wp-env start
npx wp-scripts start --hot

This will install wp-env locally, restart the WordPress server using the new plugin, watch files for changes, and then live reload the block in the browser as before.

Live Reloading Changes

Now that everything is set up it’s just a case of editing the block source code and watching the browser update automatically. Only, this time we’re specifically interested in adding Tailwind styles.

So, go ahead and make the following changes:

  • Remove all styles in editor.scss.
  • Remove the background color in style.scss.
  • In edit.js replace 'p-2 rounded-md' with 'p-8 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-500', and change the text to: Gradients are cool!.

Here’s a demo of how these Tailwind class changes update live in the browser. This includes an error displayed on the screen when the text on a label can’t be parsed. Once fixed the issue auto-rerenders the block again.

This is just a very brief example of customizing Tailwind classes but there’s no limit to what you can do. Especially, now that you can see changes update in real-time!

Inner[Block] Thoughts

Updating blocks in real-time has been on my to-do list for quite some time now, and after trying again recently I was pleasantly surprised by just how straightforward this is now.

It’s a big deal when developing blocks and can speed up development time considerably, especially when tweaking multiple small items such as quick style changes, updating labels, etc. I’ll definitely be making use of this in my day-to-day block development. How about you?

Suggest a Tutorial

I’m always looking for ideas and suggestions for new articles and tutorials. If you’d like me to cover anything specific then let me know, I’d love to hear what aspects of Gutenberg and block development you’re most interested in.

You can find me on Twitter. Come and say Hi! 🙂