Creating WordPress Block Types

Create custom block types for WordPress’ “Gutenberg Editor”. All of the React build tools will be configured for you and documented in the plugin’s README.


Creating Block Plugins With Plugin Machine

When you create a new plugin with Plugin Machine, make sure to enable the “blocks” feature. Once you have done that, you will see a “Blocks” option in “Manage Features” screen. Click the “Edit” button to go to the settings for the blocks.

This will take you to the block editor, you have no blocks:

Click the “New Block” button. Give the block a slug-cased name and then click “create” to go to the block editor screen.

  • Name: The slug-case identifier for block
    • The block’s name will use the block namespace set in the “Name Things” form. If the block namespace is “taco-plugin” and the slug is “taco-facts” the block’s name, passed to registerBlockType will be “taco-plugin/taco-facts”
  • Title: This will show up in block inserter.
  • Category: Which category block type is sorted in.

Click “Save” to save your block and go back to the blocks list. You can add more blocks there, if you want.

When you’re ready, finish creating your plugin and download the development ZIP file in your

Working With Your Blocks

The code for the blocks is inside the “blocks” directory. There is one sub-directory per block. The blocks use API version 2 and use the WordPress scripts package for compilation.

The files added for the block are a basic start point for blocks. They are quite similar to the block tutorial, and

These are the files you will find in each block directory:

  • block.json – The metadata for the block
  • init.php – This file registers the block using register_block_type_from_metadata. You can put other PHP code related to the block here.
  • index.js This file registers the block.
  • Edit.js – Contains two components. The default export is used as the Edit callback for the block type. This component wraps an “Editor” component, which is exported separately for testing.
  • Edit.test.js – Tests for the Editor component.
  • Save.js – Contains the save componet.

All attributes and other block meta should be defined in block.json.