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.