Introduce Content Blocks Builder (CBB)
WordPress with the Gutenberg Block Editor is a powerful page builder. It comes packed with more than 90 blocks that you can use on your site. However, sometimes you may need something more specific or unique for your website that is not available in the default blocks or the plugins that you have installed. Or you may not want to install a bloated-block plugin library just to use a few of them. This is where CBB can help. CBB allows you to create unique layouts or specific features with ease and fun using only core blocks and native Gutenberg features directly on the Block Editor without a code editor.
Installation
CBB is distributed for free on the WordPress plugin directory. You will have to install it before you start working with CBB. The simplest way to install it is through the WordPress site dashboard. If you are familiar with WordPress, log in to your site and search for “CBB” or “Content Blocks Builder” on the plugins page. For detailed instructions, please check out our 1-minute installation video guide here.
Getting started with CBB
After installing and activating CBB, you will see a new menu item called Custom Blocks in the WP Admin menu. This is where you can access most of the features of CBB. Here are the main features:
- Manage custom blocks: Create, edit, copy, and delete your own custom blocks.
- Browse and import ready-made blocks from the block library.
- Manage custom variations: Create, edit, copy, and delete variations for any blocks.
- Browse and import ready-made variations from the variation library.
- Manage custom patterns: Create, edit, copy, and delete patterns
- Browse and import ready-made patterns from the pattern library
- Enhance the Query Loop block: Add grid and carousel layouts, and advanced filter and sorting settings to the Query Loop block.
- Create modal, off-canvas, and toggle layout
- Manage Google Fonts
- Import/export bocks, variations, and patterns
- Manage custom breakpoints: Set custom breakpoints for responsive design for phones, tablets, and desktops.
Below are some quick start guides for you to get started with CBB.
Create custom blocks
To create a new block, go to Custom Blocks → Add New Block and input the block title, content, and other settings. You can also create a new block from the quick link + New → Block from the admin bar at the top of the screen. Another way to create blocks is to convert any blocks into custom blocks, just like creating a pattern/reusable block. First, select one or more blocks, then click on the three dots in the block toolbar, then click on the Create custom block menu item. A popup will appear where you can enter your block name and save it.
To edit an existing block, choose Custom Blocks → All Blocks and choose the block you want to edit from the list.
To copy an existing block, go to Custom Blocks → All Blocks and hover your mouse over the name of the block you want to make a copy of. Click the Copy link that appears below the name. A new draft block will be created for you to edit and publish.
Video guides
Import blocks from the block library
To import a block from the block library, go to Custom Blocks → Block Library and find the block you want to import. Then click on the image preview to add it to your site. Some blocks require external plugins to work. You must install those plugins first by clicking on the Install Plugin Name button before you can import those blocks.
Video guides
Create custom variations
To create a new variation for any block, first select the block you want to create a variation for. Then click on the three dots in the block toolbar, then click on the Create custom variation menu item. A popup will appear where you can enter your variation name and save it.
To edit an existing variation, go to Custom Blocks → All Variations then choose the variation you want to edit from the list.
To copy an existing variation, go to Custom Blocks → All Variations and hover your mouse over the name of the variation you want to make a copy of. Click the Copy link that appears below the name. A new draft variation will be created for you to edit and publish.
We can only create variations from the block toolbar or make a copy of an existing one, there is no add new link to create a new variation.
Video guides
Import variations from the variation library
To import a variation from the variation library, go to Custom Blocks → Variation Library, and find the variation you want to import. Then click on the image preview to import it to your site. Some variations require blocks from external plugins to work. You must install those plugins first by clicking on the Install Plugin Name button before you can import those variations.
Video guides
Create custom patterns
Creating and editing patterns is similar to creating and editing posts. You can create a new pattern in different ways. You can go to Custom Blocks → All Patterns → Add New Pattern, or click on + New → Pattern from the admin bar, or select one or more blocks and choose the Create custom pattern menu item from the block toolbar.
To edit an existing pattern, go to Custom Blocks → All Patterns, and choose the pattern you want to edit from the list.
To copy an existing variation, go to Custom Blocks → All Variations and hover your mouse over the name of the variation you want to make a copy of. Click the Copy link that appears below the name. A new draft variation will be created for you to edit and publish.
Video guides
Import patterns from the pattern library
To import a pattern from the pattern library, click on the Add Pattern button next to the header toolbar when you are editing a post or a page. A popup will appear where you can search for the pattern you want to import. Then click on the pattern preview to add it to your site. Some patterns require external plugins to work. You must install those plugins first by clicking on the Install Plugin Name button before you can import those patterns.
Video guides
Customize the Query Loop block
CBB adds more features to the core Query Loop block, such as responsive grid, and carousel layouts. You can create a grid of posts with different columns and gap settings for all screens. You can create a carousel of posts with many options.
It also lets you filter posts by hand-picking them, by parent, by meta fields, and more. You can also sort posts by multiple criteria and common fields like random, menu_order, or meta fields.
Video guides
Create modal, off-canvas, toggle content
CBB provides a very simple but powerful way to create modal, off-canvas, and toggle content. Some examples of layouts that you can create with CBB are video popups, cookie popups, promotion bars, search popups, or toggle menus.