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.

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.

Join Our Newsletter

To get updates about Theme Redone