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 thesrc/
folder or - Create a
hero/index.html
file inside a subfolder ofsrc/
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.