Custom blocks

Overview

The main feature of CBB is to create custom blocks directly on the Block Editor without coding. It does this by grouping other core or third-party blocks into a container so that you can adjust color, typography, spacing, background, alignment, and more. The grouped blocks retain their original features and settings.

Custom blocks created by CBB are similar to the core group, but with more benefits. Some of them are:

• They have advanced features that help you create unique and responsive designs easily, in addition to the core features from the core WordPress.
• They have sample content and a predefined style, like a content block, and the template-locking option helps users input content with a predefined format easily without worrying about breaking the layout.
• You also can easily create pre-made variations for your blocks, so that users can just pick one from the variation picker popup for different scenarios.
• You can name your custom blocks with your own brand name, such as Awesome Brand – CTA, instead of using a generic block type like Group. You also use a custom icon, description, and more to suit your brand.
• The best feature of CBB custom blocks is you can create repeater blocks to display repeating content. These custom repeater blocks work similarly to the repeater field in other meta field frameworks like ACF, metabox, etc. but you don’t have to write code to display them on the front end. You can choose from built-in layouts such as grid, carousel, accordion, and vertical stack.

How to create blocks

Creating blocks with CBB is as easy as writing blog posts. You don’t need to be a developer to build blocks. You can create your own blocks without coding knowledge and you can do it directly in the Block Editor. There are five ways to create blocks with CBB. You can:

• Create a new block from scratch from the admin menu.
• Group one or more existing blocks into a custom block.
• Copy an existing block and modify it.
• Import pre-made blocks from the CBB Block Library.
• Import blocks from a JSON file that was exported from another site.

CBB generates five empty blocks after you install it: Advanced Group, Grid (and sub-block Grid Item), Carousel (and sub-block Carousel Item), Accordion (and sub-block Accordion Item), and Stack (and sub-block Stack Item). These are the five types of blocks you can create with CBB. You can use them as a learning resource, copy them quickly into your custom blocks, or use them in your custom blocks.

General block attributes

Similar to registering blocks with core Block API, you also can customize the key aspects of the block via the block settings sidebar. The details of these settings are as follows:

• Block name – This value is automatically obtained from the slug of the block post, and you cannot change it after the block has been published. WordPress generates the slug from the post title, so it is important to input the right block title before publishing it. We suggest you set the title of your block with a format like Your Project – Block Title. This way, the block name will be generated as your-project-block-title. The default namespace is boldblocks/.
• Block title – This value is obtained from the title of the block post. You can change it after you publish your block.
• Block description – This is a short description of the block. You can input/edit it from the block settings sidebar
• Block icon – It’s an SVG image. You can choose one from a list of more than 3,000 icons in the library, or you can upload your own SVG image. If no icon is inputted, the default block icon from WordPress will be used.
• Keywords – You can input them similarly to input post tags for blog posts.
• Parent block(s) – This setting restricts the block so that it is only available as a direct child of this parent. Multiple values are separated by a comma.
• Ancestor block(s) – This setting restricts the block so that it is only available at a position of the ancestor block subtree. Multiple values are separated by a comma.

Advanced attributes

In addition to the core properties, CBB adds some extended settings to blocks. The details are as follows:

• Synced block overrides – This setting turns the bock into a component that has the same layout and style across multiple locations, while allowing for different content in each instance. It’s similar to the synced pattern overrides.
• Template lock – Because CBB blocks are container blocks, you can set the template locking option for nested blocks. There are 4 locking options as core template locking: All(all), Insert(insert), Content Only(contentOnly), and None(false). You can learn more about template locking from the official guide.
• Block CSS class(es) – This setting allows you to input one or more custom CSS classes to the block. Multiple values are separated by a space. By default, CBB generates two classes: wp-block-boldblocks-custom and wp-block-boldblocks-{post-slug}
• Is transformable – By default, you cannot transform or group other blocks into this block. Enabling this setting will allow you to do that.
• Is hidden – Enabling this setting will hide the block from the inserter, but not disable it. If this block has been used somewhere, it will still work as normal. It will only be hidden from the inserter for inserting a new instance. You can use this setting to restrict the block to use only one time, after inserting it, you can enable this setting to prevent users from inserting another one.
• Show the block variation picker if it has some – Enable this setting will display a variation picker popup each time we insert the block if there are at least two variations of the block.
• Hide the block on the front end – Sometimes, you want to hide the block on the front end temporarily, but you don’t want to remove it. This setting allows you to do that.
• Extended block supports – This setting allows you to choose whether to enable or disable features from a list of extended block support features provided by CBB. For a full list of extended features that you can opt in or out of, see the section below.
• Create a repeater parent block for this block – See below section
• Manage scripts (PRO) – This feature allows you to attach external library JS scripts from CDN and write custom JS code to add interactivity to your blocks. You can use this feature to create dynamic and responsive blocks that react to user actions or events.
• Manage styles (PRO) – Similar to the managing JS scripts feature, this feature is for CSS stylesheets.

Block supports

By default, CBB custom blocks have the following core support features:

• Layout & wide alignment
• Color
• Duotone filter
• Typography
• Dimensions (padding, margin, block spacing, and min-height)
• Border & radius

Besides core support features, CBB adds a bunch of extended features to enhance the layout and style of your blocks. These features are:

• Responsive width
• Responsive height
• Responsive spacing
• Responsive border
• Background media
• Background overlay
• Text alignment
• Vertical alignment
• Justify alignment
• Box shadow
• Transform
• Visibility
• Toggle content
• Sticky content
• Custom attributes
• Reveal animation (PRO)
• Custom CSS (PRO)
• Copy/Paste styles (PRO)

The block support features above are only for standalone blocks. When you enable the repeater parent block feature, the list of features will change depending on the block layout.

Repeater blocks

One of the best free features of CBB is the ability to create repeater blocks to display repeating content. These blocks work similarly to the repeater field in meta-field frameworks, but they are much easier to use. You don’t need to write any code to display the content of the repeater blocks. It support four layouts: grid, carousel, accordion, or vertical stack. You can add as many sub-blocks as you want, or you can use a setting to generate a fixed number of sub-blocks.

When enabling this feature, CBB will create a repeater parent block for this custom block. This parent block will be the main block of this block post, and the custom block will be a nested block inside it. The parent block has its own settings that are similar to the child block settings. The details of these settings are as follows:

• Parent Block Layout – This is the most important setting for the repeater parent block. It determines the layout and the support features of the parent block and the child block. You can choose from four layout options: Grid, Carousel, Accordion, and Vertical Stack. You can learn more details about these layouts in the sections below.
• Parent block name – This value is derived automatically from the name of the child block. The value will be {child_block_name}-repeater. The namespace is also boldblocks/.
• Parent block title – You can input a custom title for it. If you leave it empty, the default value will be Repeater: $post_title
• Parent block description – This is for inputting a short description.
• Parent block icon – This is for inputting the block icon.
• Parent block CSS class(es) – This is for inputting one or more CSS classes. By default, CBB generates two classes: wp-block-boldblocks-custom-parent and wp-block-boldblocks-{post-slug}-repeater
• Parent block extended block supports – This is for opting in or out of features from the list of extended block support features. The parent block and the child block have different lists of extended features, and each list varies depending on the block layout.
• Show the block variation picker for the parent block if it has some – Whether to show the variation picker popup if there is more than one variation.
• Make this repeater block have only a fixed number of child blocks – When enabling this setting, the parent block will have a fixed number of child blocks that you can specify in a setting. You cannot add or remove any child blocks.
• Other settings such as Parent block(s), Ancestor block(s), Keywords, Is transformable, Is hidden, Hide block on the front end, Manage scripts, and Manage styles will apply to the repeater parent block.

Grid layout

Grids are fundamental for designing layouts. CBB grid layout uses the CSS grid layout module. It is a two-dimensional layout system that consists of a grid container and its child items. The grid container defines the grid tracks, which are the horizontal and vertical lines that separate the grid into cells. The child items will lay themselves out in each cell of the defined grid.

When you select this option, the parent block becomes a grid container, and all the child blocks become grid items. You can customize two settings for the parent block: grid template columns and gutters (row-gap and column-gap). For the grid template columns, you can select a pre-defined layout template or you can input a complex value. The child blocks have settings for both the grid row and grid column. For the grid column, you can specify column start, column span, and order. For the grid row, you can specify row start and row span.

The CBB grid is responsive so that you can input different values for all the settings for each screen size (phone, tablet, desktop). This way, you can create complex and unique layouts that work well on all devices.

Carousel layout

Carousels are a common layout in website design. They are a way of displaying multiple images or content in a single space, usually by rotating them automatically or allowing users to navigate through them manually. They are often used on landing pages to highlight important information. A carousel can be useful for showcasing eye-catching content, but if not designed well, it can cause performance issues and create a poor user experience. That’s why CBB uses Swiper, a top-notch, well-designed carousel script that follows best practices. CBB carousel supports a wide list of options for you to customize your carousel and it has a preview mode so you can see the changes while editing it on the editor. The details of these settings are as follows:

• Effect – fade, slide, etc.
• Transition duration
• Loop Type – infinite or rewind
• Autoplay – delay time, and pause on hover
• Direction – horizontal or vertical
• Number of slides to show
• Gap between slides
• Navigation buttons
• Pagination
• Scrollbar
• Equal height?
• Active slide at the center
• Preloader

Accordion layout

Accordion layouts are a way of displaying multiple sections that can be expanded or collapsed to reveal or hide more details. They are useful for organizing and presenting large or complex content in a compact and user-friendly way. They can be used to display FAQ pages or to display a long list of features. The most relevant information will be shown at first glance, and users can explore more details if they want. CBB includes a powerful, accessibility-ready, but very easy-to-use accordion layout. There are lots of options to customize the header for both text and icon, and you can put anything in the content. You can choose which items should be expanded or collapsed by default. It also has a preview mode for you to easily see the changes when editing it in the editor.

Vertical stack layout

This layout is the default behavior in designing layouts. When blocks are arranged in a one-dimensional vertical column, on top of each other. You can use this layout in CBB to display a vertical list of content that has the same content template.