Packages

CAWeb

CAWebModuleExtension

ds

Reports

Errors

Markers

Indices

Files

How to Get Started Building Gutenberg Blocks

Make sure npm is installed along with necessary packages, from a terminal in the projects root directory run the following command.

npm install

Creating Blocks

From a terminal in the projects root directory run the following command.

npm run new-block --name=`<block name>`

Note: It might take a couple of minutes for the block to build

Editing the block.json File

Modify the

gutenberg/blocks/<block name>/src/block.json

file

If necessary, update the following fields:

Block Editor Styling

Modify the

gutenberg/blocks/<block name>/src/editor.scss

file to change the backend styling.
Modify the

gutenberg/blocks/<block name>/src/style.scss

file to change the frontend styling.

Block Edit & Save

Modify the

gutenberg/blocks/<block name>/src/edit.js

file to change the edit functionality.
Modify the

gutenberg/blocks/<block name>/src/save.js

file to change the save functionality.

Rebuild Block Code

From a terminal in the projects root directory run the following command.

npm run build

Note: It might take a couple of minutes for the block to build