Create custom blocks

The Gutenberg editor gives a lot of options out of the box, but to really harness the power Gutenberg gives you, a custom block written in a ReactJS syntax, wrapped with the Gutenberg block API is the way to go.

This does not only let you create the block as standard HTML, CSS and JS, but you can also use the powerful Gutenberg block API to create rich and advanced user interfaces.

The best way to quickly get started to create your own custom blocks is to use the provided Example block sub-module.

You'll need NodeJS (and NPM) installed for Javascript and CSS transpiling tools.

• Copy the gutenberg/modules/example_block folder to your custom modules folder and rename it. In our case, we're using modules/custom/my_custom_blocks
• Rename example_block.*.yml files to my_custom_blocks.*.yml and package.example.json to package.json
• Rename example_block reference to my_custom_blocks on my_custom_blocks.gutenberg.yml and package.json files
• Run npm install on the my_custom_blocks folder
• Active the my_custom_blocks Drupal Module
• Run npm run build on the my_custom_blocks folder to create the new js Code
• Run npm start on the my_custom_blocks folder to continues watch changes during development
• The new Block is now available. Search for the Block Title

This should be the file structure of your newly created module:

Resources on custom block development

• Blocks (WordPress/gutenberg.git docs)
• Writing Your First Block Type (WordPress.org docs)
• Your best friends: RichText and InnerBlocks components
• Also you can check how core blocks are implemented. Find a middle term between reusing core blocks, their style or their functionalities and creating blocks from scratch.

For more details on how to build advanced blocks visit https://developer.wordpress.org/block-editor/developers/block-api/