=== Content Blocks Builder === 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, page builder, carousel, grid Requires PHP: 7.0.0 Requires at least: 6.1 Tested up to: 6.3 Stable tag: 2.3.21 License: GPL-3.0 License URI: https://www.gnu.org/licenses/gpl-3.0.html Design your website directly on the Gutenberg Block Editor without coding using core blocks and block themes. == 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: [youtube https://www.youtube.com/watch?v=AnCpVKxhBlM] ## 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. We also provide a library of custom blocks for you to import into your site. Please see the video tutorial to create a simple responsive grid layout: [youtube https://www.youtube.com/watch?v=awSC09tTnS8] Please see the video tutorial to create a banner slider: [youtube https://www.youtube.com/watch?v=Eh3kX-9_mDg] = 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: [youtube https://www.youtube.com/watch?v=UTrZSBvkzj0] = 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: [youtube https://youtu.be/aHy3spQVBGc] [How to create a banner slider using the Query Loop block](https://youtu.be/bcK_k3IfW8g). = Load external scripts and stylesheets (PRO) = You can enqueue external resources to custom blocks and add custom JS or CSS to build complex blocks without setting up a React project. Please see some demo videos: Create a custom block for the image zooming effect like Medium using an external script. [youtube https://youtu.be/WgHuo6jwyN8] [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). ## Where is the demo? Please check out the **[Design Library](https://boldpatterns.net?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=CBB)** 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](https://wordpress.org/themes/twentytwentytwo/), [Twenty Twenty Three](https://wordpress.org/themes/twentytwentythree/), [blockbase](https://wordpress.org/themes/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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) can create a powerful grid and customize it to work best on all screens. Please see the [video tutorial](https://www.youtube.com/watch?v=mICLfKkF6tU) to build a custom grid block without coding. = Carousel layout = This feature is built on top of the most popular [SwiperJS](https://swiperjs.com) script. It supports almost all settings that allow you to create your complex custom carousels. [How to create a carousel of posts](https://www.youtube.com/watch?v=i8d8Pha921c). = 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](https://www.youtube.com/watch?v=YA4-duNF_w4). = 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](https://www.youtube.com/watch?v=YnUt-zQXnCU). = 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](https://www.youtube.com/watch?v=gfSNwcAb-xc). [How to create variations without coding](https://www.youtube.com/watch?v=caiY-YZT7ZY). = 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). ## 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](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. Our goal is to make it easy for you to use CBB with this library. ## Learn 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. Learn more about CBB at [contentblocksbuilder.com](https://contentblocksbuilder.com?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=CBB). ## 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) and [infinite scrolling](https://youtu.be/mBleA20caGo) 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 - Manage external scripts and stylesheets for blocks - Reveal animation effects - Custom order list style **[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. [Presentation mockup psd created by rezaazmy - www.freepik.com](https://www.freepik.com/psd/presentation-mockup) == 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-Two](https://wordpress.org/themes/twentytwentytwo/), [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/), [blockbase](https://wordpress.org/themes/blockbase/) and [Astra](https://wordpress.org/themes/astra/) themes. If you find it doesn't work with your theme, please let us know. We'll work on it. == Screenshots == == Upgrade Notice == == Changelog == = 2.3.21 = *Release Date - 25 August 2023* * DEV - Live-update CSS while editing custom blocks and variations * DEV - Add the ignoreStickyPosts setting to the query loop filter * FIX - Google fonts not loaded in the iframe editor * DEV - Refactor the library code into a separate file = 2.3.20 = *Release Date - 17 August 2023* * DEV - Update to API version 3 for better WP 6.3 compatibility * DEV - Remove margin and padding on the post template block when it is nested inside a custom carousel, grid layout * DEV - Add the developer tab in the settings to purge the cache * DEV - Refactor code: using wp_add_inline_script instead of wp_localize_script for data [View all changelog](https://contentblocksbuilder.com/changelog?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=Changelog)