Content Blocks Builder

Description

Content Blocks Builder (CBB) is a free website builder 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 will you need it?

The new WordPress with Gutenberg Editor is already a powerful website builder, but it’s hard for new users as well as traditional PHP developers to build sites with it. It is also missing some important features like responsive grid layouts, carousel layouts etc. This tool solves 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.

Below is a video tutorial that demonstrates how you can use this plugin to design your site directly on the Editor:

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:

How to create a banner slider using the Query Loop block.

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 Gutenberg-ready themes, but our recommended themes are default themes such as Twenty Twenty Two, Twenty Twenty Three, 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 knowledge of CSS Grid can create a powerful grid and customize it to work best on all screens.

Please see the video tutorial to build a custom grid block without coding.

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.

How to create an off-canvas layout.

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.

Learn CBB

Watch all tutorials on Youtube.
We’re still recording video tutorials, so please subscribe to our youtube channel to get a notification when new videos release.
Learn more about CBB at contentblocksbuilder.com.

Pro version

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

  • Custom CSS Editor
  • Copy/Paste styles from one block to another across domains
  • Support multiple edit styles
  • Parallax and infinite scrolling effects for background image
  • Advanced features for the carousel layout like entrance animations, customize pagination, navigation…
  • Advanced features for the toggle content layout(modal, off-canvas) like custom entrance animations, delay time, and closed state saving.
  • Advanced features for the sticky content. Allows only getting sticky when scrolling up
  • Reveal animation effects
  • Custom order list style

Go premium to unlock advanced features with CBB Pro.

If this plugin is useful for you, please do a quick review and rate it on WordPress.org 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:
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.
Block Enhancements — A plugin to add more useful features to blocks likes: icons, box-shadow, transform…
Counting Number Block — A block to display a number that has the number-counting effect.
Breadcrumb Block — A simple breadcrumb trail block that supports JSON-LD structured data.
Better Youtube Embed Block — Embed Youtube videos without slowing down your site.

The plugin is developed using @wordpress/scripts.

Presentation mockup psd created by rezaazmy — www.freepik.com

Screenshots

  • 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.

Installation

How to install it from wordpress.org

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

FAQ

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.

Reviews

9 Նոյեմբերի, 2022 1 reply
I've been using it for a few weeks and little by little I see the potential it has. It is very flexible. The developer is very attentive.
21 Հոկտեմբերի, 2022 1 reply
From what I saw and tested so far this plugin seems really amazing! Apparently it's exactly what I needed for my projects. Keep up the good work and let's wait for good news.
12 Հոկտեմբերի, 2022 1 reply
Really an excellent plugin, that provide grid, carousel, accordion, modal popup, canvas offset and more. But its not a block library, it giving just some very basic blocks to create any kind of custom blocks we want, plus the best part is that we can even create variations of the blocks, also for the default blocks like button and cover. One more thing, it providing library of pre-build patterns, to directly insert and modify as per your need In one word this is a kind of plugin, that anybody can have love at first sight.
9 Մայիսի, 2022 1 reply
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!!!
13 Ապրիլի, 2022 1 reply
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!
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 6 reviews

Contributors & Developers

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

Contributors

Changelog

2.2.23

Release Date — 28 November 2022

  • DEV — Request patterns from the new pattern library site
  • FIX — Adjust CSS (position, z-index) for modal
  • FIX — The appender button disappears due to the background image style

2.2.22

Release Date — 20 November 2022

  • DEV — Upgrade to freemius SDK 2.5.2
  • DEV — Only add the has-boldblocks-typography class to the body when it’s enabled
  • FIX — Correct icon for the shown accordion item on the first load
  • DEV — Refactor and add more style settings to accordion layouts
  • DEV — Support lazy loading for video tutorials on the getting started tab
  • DEV — Support autoplay for multiple youtube videos on mobile
  • DEV — Add marketing content to the plugin

2.2.21

Release Date — 10 November 2022

  • DEV — Add the availability to enable sticky only when scrolling up
  • DEV — Refactor the modal style to prevent conflict with Bootstrap style
  • DEV — Add transparent color to the default color palette
  • DEV — Remove all default values for BoldBlocks features for more cleaning markup
  • FIX — Show the default colors for carousel scrollbar
  • DEV — Allow using the featured image as a background image

2.2.20

Release Date — 03 November 2022

  • DEV — Integrate with freemius
  • DEV — Increase the speed of fade out for parallax background image
  • DEV — Change vertical, and horizontal alignment from flexbox to grid
  • DEV — Refactor sticky style
  • FIX — Margin issue on background and overlay on WP 6.1
  • DEV — Add important to transparent color variables
  • DEV — Add reverse direction setting to the infinite scrolling background image
  • DEV — Add zoomOutIn effect

2.2.19

Release Date — 28 October 2022

  • DEV — Update support layout for custom blocks
  • DEV — Support reveal animations, carousel, and videos in toggle content layout
  • DEV — Refactor the overlay feature

2.2.18

Release Date — 18 October 2022

  • FIX — Set templateLock as None for the Stack and Accordion blocks
  • DEV — Hide settings for some effects that don’t have multiple items
  • DEV — Remove some out animations for the reveal animation feature
  • DEV — Add more settings to the modal/off-canvas layout
  • DEV — Add custom initial state for the modal/off-canvas layout
  • DEV — Remove some default styles for the modal/off-canvas

2.2.17

Release Date — 12 October 2022

  • DEV — Separate carousel from frontend files, only load carousel when needed
  • DEV — Add a fallback value for the baseline spacing value
  • FIX — Accessibility issue for the accordion layout
  • FIX — Add transparent color to the color palette if the current theme doesn’t have that value

2.2.16

Release Date — 07 October 2022

  • FIX — Loading core scripts

2.2.15

Release Date — 06 October 2022

  • DEV — Refactor modal/off-canvas layout: Add settings for the close button
  • DEV — Refactor modal/off-canvas layout: Allow overlay background, width, height
  • DEV — Remove the default value for the grid-gap
  • DEV — Only show centeredSlides for supported effects on carousels
  • DEV — Allow uploading SVG images
  • DEV — Add a new preset font combination
  • FIX — Remove fixed style in the editor for the sticky feature

2.2.14

Release Date — 03 October 2022

  • DEV — Clean empty variables style for width, height, border and grid and add deprecated for old content
  • DEV — Add isDefault to variations and allow skip on the variation picker popup
  • DEV — Refactor modal, off-canvas, collapse
  • DEV — Using a custom data store for icon library and loading them from REST API at runtime
  • DEV — Carousel: add style for the vertical direction
  • FIX — Carousel pagination is not at the center
  • FIX — Refactor copy/paste
  • DEV — Refactor SVG input control
  • DEV — Refactor the ColorGradientDropdown control
  • DEV — Add a ‘clear all’ button to the custom css editor
  • FIX — Remove ‘boldblocks’ pattern category from the sidebar
  • DEV — Refactor the sticky feature

2.2.13

Release Date — 21 September 2022

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

2.2.12

Release Date — 15 September 2022

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

2.2.11

Release Date — 12 September 2022

  • DEV — Change the inherited 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

2.2.10

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

2.2.9

Release Date — 28 August 2022

  • DEV — Add sticky feature

2.2.8

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

2.2.7

Release Date — 19 August 2022

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

2.2.6

Release Date — 13 August 2022

  • DEV — Improve performance

2.2.5

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

2.2.4

Release Date — 02 August 2022

  • DEV — Add modal, off-canvas toggle

2.2.3

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

2.2.2

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

2.2.1

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

2.2.0

Release Date — 19 July 2022

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

2.1.3

Release Date — 12 July 2022

  • DEV — Adjust reveal animation for carousel

2.1.2

Release Date — 11 July 2022

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

2.1.1

Release Date — 08 July 2022

  • FIX — Performance issue

2.1.0

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

2.0.0

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

1.2.11

Release Date — 06 May 2022

  • DEV — Add scrollbar layout for carousel in edit mode
  • DEV — Support reveal animation for carousel layouts
  • 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

1.2.10

Release Date — 29 April 2022

  • DEV — Improve performance
  • REFACTOR — clean source code

1.2.9

Release Date — 25 April 2022

  • DEV — Add custom order list style

1.2.8

Release Date — 21 April 2022

  • DEV — Improve performance

1.2.7

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

1.2.6

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

1.2.5

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.

1.2.4

Release Date — 12 April 2022

  • DEV — Update icons pack

1.2.3

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

1.2.2

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

1.2.1

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

1.2.0

Release Date — 22 March 2022

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

1.1.16

Release Date — 18 March 2022

  • DEV — Re-arrange admin menus

1.1.15

Release Date — 17 March 2022

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

1.1.14

Release Date — 15 March 2022

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

1.1.13

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

1.1.12

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

1.1.11

Release Date — 02 March 2022

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

1.1.10

Release Date — 14 February 2022

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

1.1.9

Release Date — 02 February 2022

  • FIX Inherit style for spacing feature

1.1.8

Release Date — 01 February 2022

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

1.1.7

Release Date — 01 February 2022

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

1.1.6

Release Date — 28 January 2022

  • DEV — Allow creating empty blocks

1.1.5

Release Date — 18 January 2022

  • DEV — Add carousel layout

1.1.4

Release Date — 06 January 2022

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

1.1.3

Release Date — 16 December 2021

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

1.1.2

Release Date — 02 December 2021

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

1.1.1

Release Date — 01 December 2021

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

1.1.0

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

1.0.2

Release Date — 13 October 2021

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

1.0.1

Release Date — 12 October 2021

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

1.0.0

  • Release