=== Content Blocks Builder - Create block, variation, repeater block with carousel, grid, accordion, popup, off-canvas layout === Contributors: Mr2P, freemius Donate link: https://contentblocksbuilder.com?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=CBB+Donate Tags: blocks, patterns, carousel, grid, popup Requires PHP: 7.4 Requires at least: 6.5 Tested up to: 6.6 Stable tag: 2.6.2 License: GPL-3.0 License URI: https://www.gnu.org/licenses/gpl-3.0.html Create your WordPress site easier and faster directly in the Gutenberg Block Editor without coding using core blocks and block themes. == Description == Content Blocks Builder (CBB) is a tool that helps you create **custom blocks**, **variations**, **styles**, and **patterns** directly in the **Block Editor** without using a **code editor**. WordPress, with its Gutenberg Block Editor, provides a robust foundation for building websites. However, when you need something **more specific** or **unique** features that are not available in the default blocks, you have to build custom solutions or explore third-party options. CBB is designed to help you create those **unique layouts and features** easily, eliminating the need to seek out third-party plugins. The core feature of CBB is to create custom blocks by grouping core blocks or third-party blocks into a container block. This container block offers native features such as typography, colors, spacing, border, etc., along with a bunch of custom advanced features that help you create common layouts such as **grid**, **carousel**, **accordion**, **modal**, **off-canvas**, etc. You can also create **repeater blocks** to display repeating content that works similarly to the ACF repeater field. For more information, please check out [the detailed guide about CBB blocks](https://contentblocksbuilder.com/documentation/custom-blocks/?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=CBB+Blocks). The goal of CBB is to help you build a **complex website** with WordPress using only core blocks and native Gutenberg features with any block theme. === Key Features === - **Manage custom blocks**: Create, edit, copy, import, and delete custom blocks. - **Create repeater blocks** like ACF repeater fields that support grid, carousel, accordion, and vertical stack layout - **Advanced block support features**: Modal, off-canvas, toggle content, sticky, etc. - **Manage block variations & block styles**: Create, edit, copy, import, and delete block variations. It works on any block. - **Manage block patterns**: Create, edit, copy, import, and delete custom block patterns. - **Enhance the Query Loop block**: Add grid, carousel layouts, and advanced filter and sorting settings. - There is a library of pre-built blocks, variations, styles, and patterns - Load Google Fonts easily with a few clicks - **Import/export** custom blocks, variations, and patterns from/to other sites === Why choose CBB? === - CBB **adheres to Gutenberg**, making it **user-friendly** and **easy to use**. If you are familiar with the Block Editor then you are already familiar with CBB. - CBB **uses core blocks** to build container blocks, ensuring it’s **fast**, **clean**, **flexible**, **bloat-free** and **code-free**. - Sites built with CBB are **easier to maintain** as most tasks are accomplished through the Block Editor. You don't need to know React to create a complex block or maintain a code repository for it. === How does it help? === Below are some video tutorials that demonstrate how you can use this plugin to build your sites: = Create a card block, a grid repeater block, and a carousel repeater block = [youtube https://youtu.be/5xv3gpRNagY] = Create a banner slider for your site directly on the Editor = [youtube https://youtu.be/EEk-kSa59VE] = Create a custom blog page = [youtube https://youtu.be/aHy3spQVBGc] = Create a featured posts section = [youtube https://youtu.be/paSXmpHU9K4] = Create a glow-hover effect button variation = [youtube https://youtu.be/rAWeQ2XLQJc] === More video tutorials === = Create custom layouts = You can create common layouts with CBB such as grid, carousel, accordion, and vertical stack. CBB includes 5 built-in layout blocks: Advanced Group, Grid, Carousel, Stack and Accordion. You can use them or build your custom blocks easily. Watch the video tutorial to create a simple responsive grid using the built-in Grid block. [youtube https://www.youtube.com/watch?v=awSC09tTnS8] [Create a similar layout by creating a custom grid block](https://youtu.be/mICLfKkF6tU). Watch the video tutorial to create a banner slider using the built-in Carousel block. [youtube https://www.youtube.com/watch?v=Eh3kX-9_mDg] Watch the video tutorial to create a FAQ section using the built-in Accordion block. [youtube https://www.youtube.com/watch?v=YA4-duNF_w4] = Create popup, off-canvas, and toggle content = With the toggle content feature, you can build a popup, off-canvas, toggle content easily and you can put anything in there. Watch the step-by-step video tutorial to create modal, off-canvas content. [youtube https://youtu.be/y31TAKHZOD0] [Create a responsive header with hamburger menu and search bar toggle](https://youtu.be/E4usfCydR7U). [Create a notification bar](https://youtu.be/g_KOCqvU0Ps). [Create a video popup](https://youtu.be/52jD9eeBJ78). [Create a cookie popup](https://youtu.be/UEh_Da9Sozs). [Create an off-canvas content](https://youtu.be/YnUt-zQXnCU). = Enhance the Query Loop and other blocks = CBB provides a bunch of advanced 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. [Create a custom blog page](https://youtu.be/aHy3spQVBGc) [Create a banner slider using the Query Loop block](https://youtu.be/bcK_k3IfW8g). [Create a carousel of posts using the Query Loop block](https://www.youtube.com/watch?v=i8d8Pha921c). [Create a blog layout with overlay style using the Query Loop block](https://youtu.be/YQHrf4xFctg). = Create block variations, block styles, and block patterns = CBB helps you create custom variations, styles, and patterns directly in the Block Editor without using WordPress API. [Create variations and styles for the core image block](https://youtu.be/BAY8_evbyL0). [Create variations for any block](https://youtu.be/caiY-YZT7ZY). [Create patterns](https://youtu.be/gfSNwcAb-xc). = 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](https://fonts.bunny.net/) instead of [Google Fonts](https://fonts.google.com/). [How to use Google Fonts and be GDPR compliant](https://www.youtube.com/watch?v=rhd4SEKUcHU). === 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 Four](https://wordpress.org/themes/twentytwentyfour/), [Twenty Twenty Three](https://wordpress.org/themes/twentytwentythree/), [Twenty Twenty Two](https://wordpress.org/themes/twentytwentytwo/), or [Astra](https://wordpress.org/themes/astra/) theme. === 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, that work great with this plugin, please see them in the below section. === 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. [How to use the pattern inserter popup](https://youtu.be/UTrZSBvkzj0). Browse the **[Design Library](https://boldpatterns.net?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=CBB)** to see what the plugin can do for you. === Block and Variation library === Besides the pattern library, we have built an external library of content blocks and common block variations. All of the blocks/variations in this library have been created by CBB directly in the Block Editor. With a few clicks, you can easily import blocks or variations into your site. You use them directly or customize or learn from them. Watch some video tutorials to learn how to use the library: [Import the particles background block](https://youtu.be/BVvImhhZma4). [Import the basic header block](https://youtu.be/hQBItwIu_90). [Import the Query Loop variations](https://youtu.be/UpN9bdvs7Rs). [Import the arrow buttons](https://youtu.be/U-e6wbFGiYg). === Learn CBB === Check out the documentation at [contentblocksbuilder.com](https://contentblocksbuilder.com/documentation?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=CBB). [Watch all tutorials on Youtube](https://www.youtube.com/@boldblocks/videos). We're still recording video tutorials, so please [subscribe to our YouTube channel](https://www.youtube.com/channel/UCB7Y3mlCEKHVM-RCZaTkR1g?sub_confirmation=1) to get a notification when new videos are released. === 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](https://youtu.be/nDpeQbpu50s), [infinite scrolling](https://youtu.be/mBleA20caGo), and zooming effects for background image - Advanced features for the carousel layout like entrance animations, advanced effects, customized 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. - Add custom JS, custom CSS and external scripts and stylesheets for blocks - Add custom CSS for custom variations - Reveal animation effects Watch our video tutorials to see how the Pro version can help you build advanced features for your sites: [Create a custom block for the image zooming effect like Medium using an external script](https://youtu.be/WgHuo6jwyN8). [Create a page title bar with a parallax background effect](https://youtu.be/0g1SLTq-lQ4). [How to create an animated heading block](https://youtu.be/RfPPTg93WcQ). [How to create a Back To Top block](https://youtu.be/0aTKpeTvgUY). [How to create an image compare block](https://youtu.be/1tmIWXHv4gE). [Create a custom variation/style for the core button block](https://youtu.be/rAWeQ2XLQJc). **[Go premium](https://contentblocksbuilder.com/pro/?utm_source=wp.org&utm_campaign=CBB+Upgrade&utm_medium=link&utm_content=CBB)** to unlock advanced features with CBB Pro. If this plugin is useful for you, please do a quick review and [rate it](https://wordpress.org/support/plugin/content-blocks-builder/reviews/#new-post) on WordPress.org to help us spread the word. I would very much appreciate it. === Other plugins === Please check out my other plugins if you're interested: - [Meta Field Block](https://wordpress.org/plugins/display-a-meta-field-as-block) - A block to display a meta field, custom field as a block on the front end, supporting ACF fields. It can also be used in the Query Loop block. - [SVG Block](https://wordpress.org/plugins/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. - [Icon separator](https://wordpress.org/plugins/icon-separator) - A tiny block just like the core/separator block but with the ability to add an icon to it. - [Breadcrumb Block](https://wordpress.org/plugins/breadcrumb-block) - A simple breadcrumb trail block that supports JSON-LD structured data. - [Block Enhancements](https://wordpress.org/plugins/block-enhancements) - A plugin to add more useful features to blocks like icons, box-shadow, transform... - [Counting Number Block](https://wordpress.org/plugins/counting-number-block) - A block to display a number that has the number-counting effect. - [Better YouTube Embed Block](https://wordpress.org/plugins/better-youtube-embed-block) - Embed YouTube videos without slowing down your site. The plugin is developed using @wordpress/scripts. == Installation == = How to install it from wordpress.org = Please see the video tutorial to install it from your site dashboard: [youtube https://www.youtube.com/watch?v=wMTN0WpapPw] = 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. 1. Activate the plugin through the 'Plugins' screen in WordPress == Frequently Asked Questions == = 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. Besides the five above block types, we have built an external library of content blocks and common block variations. You can easily import and use them in the plugin. = Which themes does it support? It is compatible with all block-based themes and some popular classic themes like Astra, but our recommended themes are default themes such as [Twenty Twenty Four](https://wordpress.org/themes/twentytwentyfour/), [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/), [Twenty Twenty-Two](https://wordpress.org/themes/twentytwentytwo/), and [Astra](https://wordpress.org/themes/astra/) theme. If you find it doesn't work with your theme, please let us know. We'll work on it. == Screenshots == == Upgrade Notice == == Changelog == = 2.6.2 = *Release Date - 27 June 2024* * Improved - Add variations to the block edit screen * Added - Allow creating default variation from the block edit screen * Improved - Make sure a block has only one default variation * Changed - Don't apply variation class at creation time, make new variation transformable by default and transform it later * Changed - Save the markup of synced blocks where they are used * Improved - Allow editing layout and style of a synced block via it's default variation * Improved - Copy block alignment when transforming between CBB blocks or from core/group to CBB blocks * Fixed - Not able to disable with-opacity on parallax background when enabling it * Added - Support block overrides for the YouTube block (Better YouTube embed block) [View all changelog](https://contentblocksbuilder.com/changelog?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=Changelog)