Create Your First Block Lab Custom Block

Getting started with Block Lab is easy. Look for the Block Lab menu item in your WordPress admin sidebar, then press Add New.

Screenshot showing the Add New custom block in the menu

Start by giving your block a name, in the Enter block name here field at the top of the screen.

Next, we need to define some settings for your Block in the Block Properties section.

  • Your block’s Slug will be auto-filled based on the name you chose. The slug will be important later, when creating a block template.
  • Choose an Icon to make it easier to find your block in the WordPress editor’s block selector.
  • Choose a Category for your block from one of WordPress’ default block categories or you can create a custom category.
  • Give your block some Keywords. These are used when searching for blocks in the block selector.

The next section lets you define the options that will be presented to users when adding your block to their post. These options are known as Fields.

Fields are the points of data that could be different each time you use the block. For example, if you were creating a Button block, you could include fields for the button’s text, and link URL.

Add a new field by pressing the Add Field button.

  • Give your field a¬†Field Label which will be displayed next to the input field when adding the block.
  • The Field¬†Name¬†should auto-fill based on the Field Label, but can be customised. This will be used in the PHP as part of the block template.
  • Choose the¬†Field Type¬†for the field. This is the type of input presented to the user when adding the block. Depending on the Type, additional options will be available. Refer to the¬†Field Types¬†information for the various options and more details on each of them.
  • Choose a Location to display the field. Selecting Editor will show the field in the main editing area of a Post or Page. Selecting Inspector will display the field in the right-hand sidebar under the block inspector.

When you’re ready, press¬†Publish¬†in the sidebar to make your block available when creating a new post. You can also choose to save your block as a Draft, in which case your block will be saved, but not available in the editor.

When a block is first published, you will be reminded that you also need to create a block template for your theme. You can find more information on how to Add a Block Lab Block to Your Website Content.