Single Block Creation Process
[theme-root]/gutenberg/blocks/ there is a directory (block) called
This block serves as a base from which we copy files to create new blocks, and it shouldn’t be renamed or deleted.
To manage blocks (create/rename/remove), we suggest using the trb-cli helper that automates and speeds up the process.
Below we’ll explain how to manually manage blocks, and this is exactly what the trb-cli helper does behind the scenes.
Creating a new block
Let’s say we want to create a new block with the name “homepage-hero” (note that it needs to be in kebab-case).
Here are the steps:
- Inside the blocks/ directory, create a new folder called “homepage-hero”
- Copy all the files from the new-block-blueprint folder and paste them to the newly created folder (block)
- Open the “homepage-hero”‘s model.json file and on the line where it says BLOCK_REGISTER_NAME, write the same name as the name of the folder (homepage-hero)
- Now open the
_editor.scssfile of the same block, and replace
[theme-root]/gutenberg/scss/blocks-backend.scssfile and add a new line like this:
- Finally, open the
[theme-root]/gutenberg/core/blocks_array.jsonfile and add a new entry to the blocks_array array,
Renaming or removing a block
Based on the creation steps explained above, this should be self-explanatory.
For renaming a block, you would rename everything that says “homepage-hero” to the new desired name.
For deleting, you would delete the “homepage-hero” folder, and remove it in all the files that are listed above.
Whatever method you used (manually or via the CLI), will only work if you have started the
npm start command from the root of the theme that watches for file changes and compiles.
Or, you can do all of this without that command running, but at the end of the process, you would run either the
npm run build:dev or the
npm run build:prod to compile everything.