2. Creating blocks

Scaffolding a new Gutenberg Block with Twig rendering

This project includes a special create-scripts command to scaffold new Gutenberg blocks into your theme directory. It uses templates defined in scripts/twig-block-template and uses Twig instead of PHP for rendering.

It doesn't include any scss files as this project uses TailwindCSS and injects styles globally on the admin and the frontend.

Usage

You can run the create-block command using either npm or composer, depending on your preference.

Using npm

npm run create-block

Using composer

composer run create-block

Both commands will guide you through the process of scaffolding a new Gutenberg block using @wordpress/create-block.

Scaffolding Details

When you run the create-block command, it will:

• Generate a new block directory: A new directory for your Gutenberg block will be created inside the theme's web/app/themes/theme/blocks folder
• Use Twig for block rendering: The system will generate a Twig file in the block directory based on the template located in scripts/twig-block-template. This replaces the traditional PHP rendering for Gutenberg blocks.
• Generate block.json: A block.json file will also be created to define the block's metadata and configuration.

Customizing the Scaffold Template

The scaffold uses a template located at scripts/twig-block-template.

This folder contains the Twig template, edit.js and index.js files that serve as the starting point for new blocks. You can modify this template to adjust the structure and default content of the blocks you create.