Single Block Creation Process

Inside [theme-root]/gutenberg/blocks/ there is a directory (block) called new-block-blueprint.

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:

1. Inside the blocks/ directory, create a new folder called “homepage-hero”
2. Copy all the files from the new-block-blueprint folder and paste them to the newly created folder (block)
3. 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)
4. Now open the _editor.scss file of the same block, and replace .tr-block-wrap--BLOCK_NAME_HERE with .tr-block-wrap--homepage-hero
5. Open [theme-root]/gutenberg/scss/blocks-backend.scss file and add a new line like this: @import '../blocks/homepage-hero/_editor';
6. Finally, open the [theme-root]/gutenberg/core/blocks_array.json file and add a new entry to the blocks_array array, "homepage-hero".

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.