Variants

With Variants, you can now have multiple layouts and styles within a single template, allowing block users to choose which variant to render.

This article is about the WordPress plugin GutenBricks, which allows you to create Gutenberg blocks using the Bricks Builder page builder in a no-code approach. Visit GutenBricks.com for more information.

Watch how it works

Overview

A single block can have multiple variants, which users can choose within the Gutenberg editor, helping you to organize blocks without creating extra ones. Variants are also a great way to organize blocks by utility, business logic, and more.

The most common use case is to allow clients to select different layouts by choosing variants using text radio buttons, image radio buttons, or a dropdown select.

Using radio button to select different layouts. Templates from Frames.

Image radio buttons. Templates from Frames and Brixie Templates

When To Use It

The user community recommends using variants to create different layouts that are otherwise very difficult to achieve with CSS. If you need to change colors, padding, or any CSS values, we highly recommend using Dynamic Class, Dynamic Data, or the Style Editor.

Create Your First Variants

Creating variants is as easy as creating a visibility toggle. In fact, variants work just like a visibility toggle that simply behaves like a radio button that allows one value at a time whereas visibility toggles behave like checkboxes.

Step 1. Select an element as a variant

Any element can be a variant. However, we recommend choosing a section or container as a variant rather than individual elements.

Selecting entire section or a parent container is recommended.

Please note that you can have only one set of variants per block. We have decided to stick to this one-set-per-block policy in order to make it manageable.

Step 2. Create variants as sibling elements

Once you select a target element, you can create its variants as sibling elements within the same parent. In the example below, we've copied and pasted the same Inner Variant 1. Then we named it Inner Variant 2and made some changes to it. In the image below, you can see that we switched between Content Wrapper and Media Column.

Inner Variant 2 here has Media Column on the right

It is recommended to assign Value Binding to each content field, such as text and images. This way, their content stays the same even when you change the variants. If you don't do this, each variant will have independent content. 💡 Pro Tip: Set the Value Binding first and then copy and paste the variants so that you don't have to manually enter them again.

Step 3: Enable Variants

Click the element you want to turn into a variant. Toggle "Enable this element as a variant." (Content -> GutenBricks Tab -> Variant section)

Here you can assign three values

• Variant Name (required) - Any unique text used to identify the variant. This must be different from the other variants.

• Variant Label - A label for the radio button which is visible to clients. You can omit it if you have a preview thumbnail

• Variant Preview Thumbnail - This adds an image to the radio button

Once you apply this to all the variant elements, you have officially created your first variants! 🎉 🎉 🎉

Optional: Edit variant label, group and variant field type

Visit Settings -> TEMPLATE SETTINGS -> GUTTENBRICKS -> VARIANTS to configure the variant field. It has default values, so you don't need to do anything unless you want to change the wording. You can also change the field type from radio to dropdown.

Tip: Select Inner Content as Variants

You can also assign a certain area of blocks as variants; in that case, the outer frame remains unchanged while the inside contents can be switched as variants.

In the example below the photo columns are selected as variants where the parents remain the same.

Credit to Unsplash and Frames.

If you have questions, please join our Facebook Group or email us at [email protected]