Content Blocks Builder

Deskripzioa

Content Blocks Builder helps you to create custom blocks, patterns or variations from core/third-party blocks directly on the Gutenberg Block Editor. It makes the workflow of creating sites with WordPress and block-based themes easier and faster.

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

The next WordPress with the Block Editor and full site editing is great. But it’s not easy enough for developing bespoke responsive website designs on it.
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 modern workflow with custom blocks and full site editing.
It reduces development time and effort significantly. Instead of spending time coding with PHP/JS/CSS in a custom theme/plugin, we spend most of the time in the Block Editor. If you still need some custom CSS, there is a CSS editor right there in the block’s setting.

How does it work?

This plugin allows anyone to create custom blocks/custom patterns right on the Block Editor from other blocks without coding. And with a list of built-in must-have features for most common website designs such as responsive grid layout, carousel, toggle, accordion, modal, off-canvas, parallax, entrance animation effects… you can create your complex, dynamic, responsive layout in a matter of minutes.

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.

Feature details

Responsive grid layout

This feature allows you to create a responsive grid layout just with a few clicks. Power 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.

Accordion layout

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

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.

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.
This library is built just by using this plugin on the default TwentyTwentyTwo theme without custom PHP/CSS code. We’re still designing 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
  • Responsive items, spacing for carousel repeater blocks
  • Advanced effects for carousel repeater blocks
  • Advanced settings such as pagination and scrollbar for carousel repeater blocks
  • Entrance animations for carousel items

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:
Block Enhancements – A plugin to add more useful features to blocks likes: icon, 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 – www.freepik.com

Pantaila-argazkiak

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

Instalazioa

  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

MEG

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 blocks, patterns, and variations without coding. However, it provides 5 pre-defined custom block types, Grid, Carousel, Stack, Accordion and Advanced group for you to use.

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.

Berrikuspenak

2022(e)ko maiatzaren 9(a)
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!!!
2022(e)ko apirilaren 13(a)
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!
2021(e)ko urriaren 11(a)
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.
Irakur itzazu 3 berrikuspen guztiak

Laguntzaileak eta Garatzaileak

“Content Blocks Builder” software librea da. Ondoko pertsonek egin dizkiote ekarpenak plugin honi.

Laguntzaileak

Aldaketen loga

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
  • 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 on admin

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 grid

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