Skip to main content

Creating an HTML To Gutenberg block

With @wordpress/create-block​

If you created your plugin with @wordpress/create-block and the html-to-gutenberg-template, adding a new block is as easy as dropping an .html file into the src/ folder.

.
├── src/
│   ├── first-block.html
│   ├── second-block.html
│   └── ... # Add more blocks by adding files here
├── generated-blocks/
│   ├── first-block/
│   │   ├── block.json
│   │   ├── edit.js
│   │   ├── index.js
│   │   └── render.php
│   └── second-block/
│       ├── block.json
│       ├── edit.js
│       ├── index.js
│       └── render.php
└── build/
    ├── first-block/
    │   └── ...
    └── second-block/
        └── ...

To create a block named [namespace]/hero, either:

  • Add a hero.html file to the src/ folder or
  • Create a hero/index.html file inside a subfolder of src/

Both approaches produce the same result.

With custom webpack config​

If you're using a custom webpack setup, add .html files to your configured inputDirectory (usually src/) to generate new blocks.

Git ignore recommendation​

When using a CI/CD workflow, avoid committing generated files by adding the following to your .gitignore:

generated-blocks # The folder where your blocks are generated
dist

This keeps your repository clean and free of compiled output.