HTML to Gutenberg: Turn HTML Files into Gutenberg Blocks

TLDR: I created a CLI and webpack plugin that converts HTML files into fully featured, dynamic Gutenberg Blocks. It allows developers to write custom blocks up to 5x faster.

You can find it here: HTML To Gutenberg.

There Has To Be a Better Way to Develop Custom Gutenberg Blocks

I love Gutenberg. So do my clients.

But like many fellow WordPress developers raised on ACF and the good old way™ of building websites, I was hesitant at first to fully embrace Gutenberg.

I mean—have you tried building a full site using only custom Gutenberg Blocks?

For every block, here’s what the process typically looks like:

1. Draft out the HTML and style it until everything looks just right.
2. Scaffold a new block using either wp scaffold block for static blocks, or the excellent @wordpress/create-block tool for dynamic ones.
3. Paste your HTML into the render.php file.
4. Paste it again into the edit.js (React) file.
5. "Reactify" the markup by converting class= to className=, fixing self-closing tags, and transforming attributes to their React equivalents.
6. Define attributes in block.json.
7. Add React components to allow editing those attributes in the editor (<RichText />, <MediaUpload />, etc.).
8. Pass those attribute values to render.php and map them to your HTML.

Now, this isn’t exactly rocket science—but it is tedious, repetitive, and error-prone. Every time I find myself repeating code or patterns for the tenth time, my developer 6th sense kicks in and starts whispering:

There has to be a better way...

How to Develop Dynamic Gutenberg Blocks from a Single HTML File

So... I built one.

Introducing HTML to Gutenberg: a CLI and webpack plugin that converts valid HTML files into fully functional, dynamic Gutenberg blocks—powered by React in the editor and rendered in either PHP or Twig on the frontend.

In other words: write once, and get the whole block. No more copy-pasting. No more Reactifying. No boilerplate.

Just fast, efficient block development.

A video speaks a million words, so here is a short demo of this tool in action:

How It Works

1. You write a single HTML file that represents your block’s output.
2. You add a few simple annotations in your HTML to define dynamic fields (e.g. data-attribute="title").
3. You run the CLI or use the Webpack plugin in your theme or plugin build process.
4. It generates:
   1. The block.json file
   2. A fully working edit.js file using proper React components (like RichText, MediaUpload, etc.)
   3. A frontend render file (either PHP or Twig—your choice)
   4. The required index.js file to register the block with WordPress

And just like that, your HTML is now a dynamic Gutenberg block, ready to use and edit in the WordPress Block Editor ✨.

It currently supports text and image attributes, as well as defining InnerBlocks areas and templates using custom <blocks> and <block name="custom/child-block"> elements.

You can find more information and documentation on the project's GitHub page.

Why This Is a Game Changer for WordPress Developers and Agencies

I genuinely believe that when done right, Gutenberg offers one of the best content editing experiences available on any CMS — even when compared to modern visual builders like Framer or Webflow.

It strikes a pretty good balance between giving clients flexibility while letting developers maintain design and code consistency at scale.

But the development process? It's tedious. It leads to duplicated code. And while tools like ACF Blocks exist, they still don’t offer the seamless "click and edit" experience of native Gutenberg blocks.

With HTML to Gutenberg, you can now:

• Develop native blocks up to 5x faster
• Eliminate unnecessary duplication
• Focus more on design and functionality, not setup
• Version, share, and maintain your blocks easily

This unlocks new workflows for teams and agencies, especially those looking to industrialize their processes:

• Turn Tailwind UI components into editable Gutenberg blocks in minutes
  Grab a Tailwind UI snippet, add a few annotations, and boom — it's a fully editable block.
• Build internal libraries of reusable blocks
  Your agency can now standardize, document, and reuse high-quality blocks across projects with zero friction.
• Copy-paste blocks across sites
  With everything contained in one HTML file, portability has never been easier.

Try It Out

You can check it out here: jverneaut/html-to-gutenberg

Whether you're working on a client project, building a theme, or contributing to a design system of reusable blocks, this tool is here to make your Gutenberg life easier.

Let me know what you think—I'd love feedback from the community. And if you end up using this in your projects, let me know how it goes!