Content Blocks Builder


Content Blocks Builder (CBB) is a free page builder tool that helps you create WordPress sites using the Gutenberg Block Editor with block-based themes easily and quickly without coding.
Unlike other page builders and block library plugins, this plugin does not include a library of customized blocks or UI customizations. This plugin uses core blocks and the native Block Editor and powers it up with custom layout blocks and style builder features.
With this tool, you don’t need a feature-rich theme, a massive block library or a meta field framework with custom themes, you can build your site using a default block-based theme or even a blank theme.

Why do we create this plugin and why you need it?

The new WordPress with Gutenberg Editor is the future of WordPress, and it’s great, but it is still missing some important features like responsive grid layout, carousel layout etc. We develop this tool to solve that problem.
Based on our experiences in developing hundreds of client websites in “classic” workflow with meta field frameworks and custom theme/plugin development, we create this plugin to help us transform from that old workflow to the new workflow with custom blocks, block-based themes and full site editing.
This plugin will help you design your content directly on the Block Editor using custom layout blocks and style builder features. You don’t have to spend time with PHP/React/JS/CSS building custom blocks, custom themes, or plugins. Most of the tasks can be done just by using the default Editor. As a result, it will make the process of building websites simpler and more enjoyable.

How does it help?

Create custom layout

It allows you to group core or third-party blocks in custom layouts using its custom layout blocks. It includes five built-in layout blocks: Advanced Group, Grid, Carousel, Stack and Accordion. You also can easily create your custom blocks, but in most cases, those five built-in blocks are enough for your design.

Please see the video tutorial to create a simple responsive grid layout:

Please see the video tutorial to create a banner slider:

Include responsive production-ready patterns

You don’t have to start your design from scratch. This plugin includes a library of responsive, production-ready, full-page design patterns for you to use or customize. Learn more about it from the “Design Library” section below.

Please see the video tutorial to use the pattern library:

Add style builder features to blocks

It provides a list of features to add style to custom blocks like responsive width, height, spacing, border, box-shadow, transform, alignments etc. And by wrapping around other blocks, you can add those features to other blocks as well.

Please see the video tutorial to create a grid or a carousel of posts using the core Query Loop block with additional features from this plugin:

Where is the demo?

Please check out the Design Library of templates/patterns created only by this plugin and the TwentyTwentyTwo theme without any custom code.

Which theme should I use with this plugin?

It is compatible with all block-based themes, but our recommended themes are default themes such as Twenty Twenty Two, blockbase themes.

How does it work with other blocks/plugins?

This plugin works with all third-party blocks but we recommend using single block plugins for lightweight and performance. We also develop several single block plugins, those work great with this plugin, please see them in the below section.

The details of the main features

Responsive grid layout

This feature allows you to create a responsive grid layout just with a few clicks. Users with the knowledge of CSS Grid can create a powerful grid and customize it to work best on all screens.

Carousel layout

This feature is built on top of the most popular SwiperJS script. It supports almost all settings that allow you to create your complex custom carousels.

How to create a carousel of posts:

Accordion layout

This feature helps you to create an accordion layout easily, you can put any blocks in each accordion item.

How to create an accordion layout:

Toggle layout

This feature helps you to create content that can be shown/hidden by clicking on a button/link or other elements. It’s useful to create some common layouts like modal, off-canvas, search bar toggle, or main menu bar toggle on mobile.

Patterns, variations management

This feature allows you to create/edit custom patterns and variations like writing posts on the default Editor, and you can import/export those from/to other sites.

How to create patterns without coding:

How to create variations without coding:

Google Fonts

This feature does a really simple job, it loads a font for headings text and another for the body text from more than 1000+ Google Fonts easily with a few clicks. If you are worried about GDPR compliance, there is an option to load fonts from Bunny Fonts instead of Google Fonts.

How to use Google Fonts and be GDPR compliant:

Design library

We have already included a library of block patterns for you to quickly use or customize to fit your design. There is a popup inserter in the block editor for you to find and insert patterns with a few clicks.
We’re still designing new patterns, more patterns/templates will be added weekly.

Browse the Design Library to see what the plugin can do for you.

Pro version

The professional version adds more ‘advanced’ features to your content such as:

  • Parallax, vertical or horizontal scrolling effects for image background
  • Reveal animation effects
  • Custom order list style
  • Custom CSS editor
  • Support copy/paste styles from one block to another across domains
  • Support multiple edit styles
  • Advanced features for carousel like entrance animations, customize pagination, navigation…

If this plugin is useful for you, please do a quick review and rate it on to help it spread to more people. I would very much appreciate it.

Other plugins

Please check out my other plugins if you’re interested:
Block Enhancements – A plugin to add more useful features to blocks likes: icons, box-shadow, transform…
Icon separator – A tiny block just like the core/separator block but with the ability to add an icon to it.
SVG Block – A block to insert inline SVG images easily and safely. It also bundles with more than 3000 icons and some common non-rectangular dividers.
Meta Field Block – A block to display a meta field or an ACF field as a block. It can also be used in the Query Loop block.
Counting Number Block – A block to display a number that has the number counting effect.

The plugin is developed using @wordpress/scripts.

Presentation mockup psd created by rezaazmy –


  • The adding patterns/templates modal.

  • Manage custom blocks, custom variations and custom patterns.

  • Create custom blocks/variations/patterns from the "More Options" menu. Variations only can be created this way.

  • All settings of a custom block.

  • Settings for a repeater grid block.

  • Settings for a repeater carousel block.


How to install it from

Please see the video tutorial to install it from your site dashboard:

How to install it manually

  1. Upload the plugin files to the /wp-content/plugins/content-blocks-builder directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress


Why do you need this plugin?

To change the way of creating sites with WordPress from the legacy Classic Editor to the new Gutenberg Block Editor.

Who needs this plugin?

This plugin is made for developers or designers but anyone familiar with the Block Editor can use it.

Is there a built-in design library?

Yes, there is a library of production-ready block patterns.

Is this another block library?

No. It’s like a tool to create custom layouts for core or third-party blocks without coding. However, it provides five custom block types: Grid, Carousel, Stack, Accordion and Advanced group.

Which themes does it support?

It is compatible with all block-based themes, but our recommended themes are default themes such as Twenty Twenty Two, blockbase themes. If you find it doesn’t work with your theme, please let us know. We’ll work on it.


May 9, 2022
It's 10-times better as BLOCKMEISTER Premium! Why? You can create Custom Block Pattern direct inside the Gutenberg Side Editor based on created Blocks on Side Template or Template Parts level - and not only on Post or Page level! That is really a unique feature of this free Block Pattern WP-PlugIn - no other Custom Block Pattern management PlugIns has this capability!! Really great feature design & programming work!!!
April 13, 2022
I am very much interested in tools which allow me to enhance and customize blocks without coding. This plugin looks like a very promising approach, since it combines blocks, block variations and block patterns (only resusable blocks are missing). Please keep developing this plugin!
October 11, 2021
I've been searching years for something like this to come out and finally! A practical and functional plugin that enhances gutenburg usability. How can not one single plugin out of thousands allow us to create 1 custom block out of a group of blocks? And with one single click? The built in re-usable blocks to me are useless. Thank you to whoever created this! You are a true genius.
Read all 3 reviews

Contributors & Developers

“Content Blocks Builder” is open source software. The following people have contributed to this plugin.




Release Date – 21 September 2022

  • FIX – Compatibility issue with the Gutenberg plugin
  • DEV – Add style for carousel in pattern preview


Release Date – 15 September 2022

  • DEV – Add the getting started page to the settings page


Release Date – 12 September 2022

  • DEV – Change the inherit behavior of responsive in the grid layout
  • FIX – Remove the carousel preview on the Query loop block
  • DEV – Add the clear keywords filter button to the pattern inserter
  • DEV – Refactor copy/paste
  • DEV – Refactor the pattern insert modal
  • FIX – Can’t get grid item value


Release Date – 06 September 2022

  • DEV – Add google fonts | bunny fonts
  • DEV – Add setting to limit only 1 item on mobile for carousel
  • FIX – Load carousel script for query loop block
  • FIX – Copy/paste – solid background to override gradient background


Release Date – 28 August 2022

  • DEV – Add sticky feature


Release Date – 23 August 2022

  • DEV – Improve the interactions, user friendly on the pattern inserter modal
  • DEV – Add carousel layout support for the core query block


Release Date – 19 August 2022

  • DEV – Refactor the template modal
  • DEV – Template modal: Support lazy loading, filtered keywords at runtime, improve search results


Release Date – 13 August 2022

  • DEV – Improve performance


Release Date – 09 August 2022

  • FIX – justifyAlignment: justify-items, converting to flex value for standalone blocks
  • DEV – Only copy background settings
  • DEV – Re-arrange preset for grid template columns
  • DEV – Improve performance
  • REFACTOR – Refactor toggle feature


Release Date – 02 August 2022

  • DEV – Add modal, off-canvas toggle


Release Date – 29 July 2022

  • DEV – Carousel layout: allow for creating 2 synced carousels, use a carousel as the navigation for another
  • DEV – Template modal: add scrollbar for full page/long patterns preview


Release Date – 27 July 2022

  • DEV – Refactor copy/paste styling
  • DEV – Custom CSS: show hint on typing
  • DEV – Prevent default action from clicking on toggle buttons


Release Date – 24 July 2022

  • DEV – Add the toggle content feature
  • DEV – Allow customizing the carousel navigation button icons
  • DEV – Auto reloading after installing/activating plugins from the template popup modal


Release Date – 19 July 2022

  • DEV – Add accordion layout and the Accordion block
  • DEV – Add steps type setting


Release Date – 12 July 2022

  • DEV – Adjust reveal animation for carousel


Release Date – 11 July 2022

  • DEV – Add justifyAlignment to custom blocks
  • DEV – Add Next/Prev links to the template modal popup


Release Date – 08 July 2022

  • FIX – Performance issue


Release Date – 08 July 2022

  • DEV – Add template inserter feature
  • DEV – Add custom CSS style feature
  • DEV – Add more settings to carousel pagination and navigation
  • FIX – Add dependent blocks, disable items that contain missing blocks
  • DEV – Change the placeholders for new custom content types
  • DEV – Import and export pattern keywords
  • FIX – Make new imported variations as published status
  • DEV – Add inserter setting to pattern


Release Date – 29 May 2022

  • DEV – Make the alignment compatible with all block-based themes
  • DEV – Add pattern description, keywords
  • DEV – Prevent users from deleting core blocks
  • DEV – Redesign the settings page
  • DEV – Add the settings link to the plugin screen
  • DEV – Add the width feature
  • DEV – Add the stack item block
  • FIX – Allow coping grid, grid item, carousel
  • REFACTOR – Refactor code


Release Date – 06 May 2022

  • DEV – Add scrollbar layout for carousel in edit mode
  • DEV – Support reveal animation for carousel
  • DEV – Upgrade swiper version 8.x
  • DEV – Add ‘Inherit’ value for templateLock
  • DEV – Add accessibility for overlay div
  • DEV – Add option to render background image as IMG element
  • DEV – Adjust theming


Release Date – 29 April 2022

  • DEV – Improve performance
  • REFACTOR – clean source code


Release Date – 25 April 2022

  • DEV – Add custom order list style


Release Date – 21 April 2022

  • DEV – Improve performance


Release Date – 21 April 2022

  • DEV – Allow creating custom blocks/patterns from core/media-text block
  • DEV – Allow to copy/paste some new attributes
  • FIX – Fix some label issues


Release Date – 19 April 2022

  • DEV – Add overlay feature
  • DEV – Add duotone
  • DEV – Allow creating custom blocks from media-text block
  • DEV – Load compatible styles for blockbase, twentytwentytwo in iframe editor


Release Date – 15 April 2022

  • DEV – Improve performance
  • DEV – Support twentytwentytwo, blockbase themes
  • DEV – Icon library: focus on the search box, press enter to insert icons.


Release Date – 12 April 2022

  • DEV – Update icons pack


Release Date – 06 April 2022

  • DEV – Support meta revisioning for metadata of blocks, variations and patterns
  • DEV – Add a helper function to allow select all children blocks from a selected block
  • DEV – Allow pasting elliptical border-radius value directly on border-radius control
  • DEV – Allow transform scale with a negative value


Release Date – 29 March 2022

  • DEV – Add copy-paste feature
  • DEV – Allow editing multiple blocks at a time
  • DEV – Allow importing pattern categories
  • DEV – Add pre-defined height 100% option
  • DEV – Add the example to custom blocks registration
  • FIX – Don’t allow adding a custom block to itself via the admin screen
  • FIX – Query all posts for export functionality
  • REFACTOR – Refactor code


Release Date – 24 March 2022

  • DEV – Add pattern categories to patterns
  • DEV – Add settings widget to manage custom pattern categories
  • DEV – Add Pattern name to the pattern list screen


Release Date – 22 March 2022

  • DEV – Add settings page
  • DEV – Add import/export functionalities
  • DEV – Remove pattern category
  • DEV – Remove deprecated styles


Release Date – 18 March 2022

  • DEV – Re-arrange admin menus


Release Date – 17 March 2022

  • DEV – Add ‘reveal animation’ feature
  • DEV – Add the icon to the admin list screen of custom blocks


Release Date – 15 March 2022

  • DEV – Add box-shadow features
  • DEV – Add transform features
  • REFACTOR – Refactor code


Release Date – 12 March 2022

  • DEV – Add border, border-radius features
  • DEV – Support blockGap for custom blocks
  • DEV – Add color slug for pre-defined colors
  • FIX – Remove the top margin gap for the first block in a parent block with a custom background
  • REFACTOR – Refactor code


Release Date – 10 March 2022

  • DEV – Add icon library for block and variation icons
  • DEV – Add block, variation’s settings to PluginDocumentSettingPanel slot and fill
  • REFACTOR – Refactor code


Release Date – 02 March 2022

  • FIX – Vertical alignment for grid item block on mobile
  • FIX – Some typo issues
  • REFACTOR – Refactor code


Release Date – 14 February 2022

  • DEV – Allow negative margin for spacing feature
  • DEV – Add 4 columns to mobile preset layout for the grid layout


Release Date – 02 February 2022

  • FIX Inherit style for spacing feature


Release Date – 01 February 2022

  • REFACTOR – Change prefix to a shorter string
  • REFACTOR – Change shorthand syntax to full syntax for spacing feature


Release Date – 01 February 2022

  • DEV – Mark grid item child block fill all available space, make block’s background media full block


Release Date – 28 January 2022

  • DEV – Allow creating empty blocks


Release Date – 18 January 2022

  • DEV – Add carousel layout


Release Date – 06 January 2022

  • DEV – Add more features to custom blocks: responsive height, spacing, text alignment, vertical-alignment, justify-alignment, and media background


Release Date – 16 December 2021

  • DEV – Update grid template columns, grid column, grid row


Release Date – 02 December 2021

  • REFACTOR – Update the pot file, change the label of the block category


Release Date – 01 December 2021

  • REFACTOR – Update __experimentalUseInnerBlocksProps to work with gutenberg 12.x


Release Date – 03 November 2021

  • DEV – Add grid layout for repeater blocks
  • DEV – Add custom inline SVG icon for blocks and variations
  • DEV – Support variation picker for custom blocks


Release Date – 13 October 2021

  • FIX – Template lock ‘None’ doesn’t work


Release Date – 12 October 2021

  • DEV – Make the plugin compatible with the Block Manager plugin


  • Release