How to create a Gutenberg block with CBB

Overview

Creating blocks is the core feature of CBB. CBB makes the process of creating a Gutenberg block extremely simple. It uses a custom post type to store custom blocks, so if you know how to create a post or page in WordPress, you already know how to create blocks with CBB.

Create a block from scratch

There are three ways to create a new block from scratch with CBB:

• Click on the Dashboard → Custom Blocks → Add New Block menu item.
• Visit the Dashboard → Custom Blocks page and click on the Add new Block button.
• Click on the + New → Block menu item from the admin toolbar.

After you reach the block edit screen, the next step is to input block attributes and settings.

Create a block by grouping other blocks

CBB allows you to turn any block or a group of blocks into a custom block. This type of custom block uses inner blocks as the content template. You can either use it as a pattern without editing, or you can modify the inner blocks for different scenarios. Custom blocks created by CBB are similar to patterns, but they have more advantages. They are easier to use and you can apply features to them. Learn more about the benefits of custom blocks here. Follow the following steps to create a block:

1. Select the block or blocks you want to turn into a block. There are a few ways for you to select multiple blocks:
   • You can highlight multiple blocks next to each other with your mouse or
   • Using List View, click on the first block, then hold the shift key on your keyboard and click on the last block. This will select all blocks between the first and last block.
2. Click on the three dots that appear in the block toolbar.
3. Click on the Create custom block menu item.
4. Give it a title. This title also will be used to generate the name of your block automatically.
5. Click on the Save button to save and publish your block.
6. Go to the edit block screen to input block attributes and settings

Copy a block

There is a quick way to create a block by copying from another. Follow the following steps to copy a block:

1. Go to the Dashboard → Custom Blocks → All Blocks page.
2. Hover your mouse over the title of the block you want to make a copy of.
3. Click on the Copy link that appears below the block title to create a new draft block.
4. Click on the new copied block to modify its attributes and settings.

Block attributes and settings

Similar to registering blocks with core Block API, you can also customize the key aspects of the block and some more specific settings for CBB blocks. You should learn about these basic and advanced settings first before you start inputting them.

• Block Title: Give your block a title by typing it in the box at the top that says Add block title. The best way to name your block is in this format Your Project – Block Title. Learn more about the block title and block name.
• Block Content (Inner Blocks): You can add the content for your block just like adding content for a post or a page. You can also leave it empty. Then your block will be an empty design block similar to a core group or a core columns block, but with more advanced features based on your block settings.
• Keywords: Input keywords for the block like input tags for a post. You can find this setting under the Keywords section in the right sidebar. Keywords help you to easier to find blocks in the inserter.
• Go to the detailed guide to learn how to adjust the other important attributes and settings.

Publish/update your block

When finished editing, click on the Publish/Update button on the top bar to publish/update your block. Similar to posts, you can also set your block’s status as private, draft, or pending review under the summary section of the sidebar on the right side of your screen. Only blocks with a status of Publish can be seen in the Block Editor.

Edit a block

After publishing, or copying a block, you can go to the block edit screen to continue editing it. There are two ways to do that:

• Go to the Dashboard → Custom Blocks → All Blocks page and click on the title of the block you want to edit.
• Use the Block Additional Information panel to access the edit block screen quickly. You can watch the video below to see how to edit a block this way.

Go back to the adjust block attributes and settings to learn how to edit the block data. There are some notes on editing blocks:

• You can not edit the block name after publishing it.
• If you change the Block CSS class(es) attribute after using it somewhere, it will cause an invalid content error. To fix that, you just need to click the Attempt Block Recovery button.
• If you enable or disable the repeater block option or change the block layout, you may have to re-insert the block where you used it before.