2.2 Developer Docs

Here's a look at the developer-related additions and changes in Beaver Builder 2.2.

Responsive fields

We've added responsive field support to the align, border, photo, select, and typography field types.

Unit fields

The unit field type has two new additions.

Custom unit select
It is now possible to add a custom unit select (such as px, vh, %, etc.) to unit fields. These selects allow you to choose from a predefined list of values, as shown below. When using custom unit selects, you don't have to define the unit in your preview config, also shown below.

Settings with a custom unit select will receive a related setting with the _unit suffix, as shown in the example below. Together with the original setting, you can build the full value.

Note: If you choose to set only one value for your custom unit select (such as px), it will still show up but won't be a selectable field.

Popup value slider
You can enable a popup slider control for unit fields when they are focused. This lets users change the values using a slider instead of the keyboard.

To enable the popup slider for a field, simply set the slider value in your field config to true.

Examples of more advanced setups are shown below, allowing you to customize the min, max, and step values for the slider. If you are using custom units, you can customize the values for each unit as well.

Dimension fields

The dimension field type now allows custom unit selects and popup value sliders. The config is the same as the unit field, so see those examples for reference.

Icon and Photo field toggles

Icon field and photo field types now have the ability to toggle other fields just like the select field type, using the show value as seen below.

Link field Target and No Follow

Link fields now give you the ability to show Target or No Follow checkboxes without having to code those fields yourself. The following screenshot shows how they appear in the Beaver Builder 2.2 UI.

To enable these checkboxes set the show_target or show_nofollow values to true in your field config as shown below.

Button Group fields

New in Beaver Builder 2.2, the button group field displays a group of buttons for selecting a single value when one of the buttons is clicked. Only one button can be selected at a time. When no button is selected, the default setting applies. Here's a screenshot example of a button group used in the Typography section.

Return value
The selected string value.

Align fields

New in Beaver Builder 2.2, the align field displays a button group used to select either left, center or right values. The following screenshot shows the Alignment field button group in the UI and what the choices are:

You can also set custom return values using the optional values param as shown in the example.

Return value
Returns left, center or right unless custom values have been defined.

Here is an example of an align field with custom return values.

Gradient fields

New in Beaver Builder 2.2, the gradient field displays a compound field with color, stop, type, angle, and position inputs for constructing a gradient. Using our live preview system will take care of the complexities of previewing the gradient field for you.

Return value
An array of gradient data.

To render the CSS for your gradient field, use the FLBuilderColor::gradient helper method in your frontend.css.php as shown below.

Typography fields

New in Beaver Builder 2.2, the typography field displays a compound field with font, style, spacing, and shadow inputs for customizing the look of text.

Using our live preview system will take care of the complexities of previewing the typography field for you.

Return value
An array of typography data.

To render the CSS for your typography field, use the FLBuilderCSS::typography_field_rule helper method in your frontend.css.php file as shown below.

Shadow fields

New in Beaver Builder 2.2, the shadow field displays a compound field with inputs for constructing a shadow effect. Using our live preview system will take care of the complexities of previewing the shadow field for you.

Return value
An array of shadow data.

To render the CSS for your shadow field, use the FLBuilderColor::shadow helper method in your frontend.css.php file as shown below.

Border fields

New in Beaver Builder 2.2, the border field displays a compound field with inputs for constructing borders. Using our live preview system will take care of the complexities of previewing the border field for you.

Return value
An array of border data.

To render the CSS for your border field, use the FLBuilderCSS::border_field_rule helper method in your frontend.css.php file as shown below.

Date fields

New in Beaver Builder 2.2, the date field displays a simple date picker input. This field uses the native browser picker instead of a third-party JavaScript library.

Return value
A date/time string.

Raw HTML fields

New in Beaver Builder 2.2, the raw HTML field displays raw HTML specified using the content param. It does not return a value to your settings because it is only meant for output, not input.

Return value
This field does not return a value.

Collapsing sections

As of Beaver Builder 2.2, you can collapse settings sections by clicking on the section title. Sections are not collapsed by default, but you can choose to collapse them using the collapsed param for a section.

Inline editing

As of Beaver Builder 2.2 it is possible to disable inline editing on a per-field basis using the inline_editor param for a field.

Live preview

The live preview system got a few new additions in Beaver Builder 2.2 to make it easier to work with, as follows.

Important previews
It is now possible to declare preview rules as important using the important param.

Attribute previews
Attribute previews allow you to preview an HTML attribute change on an element. For example, you can have a text field update the `data-foo` attribute on an element as shown below.

Callback previews
Callback previews allow you to specify the name of a JavaScript function in your field config for implementing custom preview logic.

And then define your callback function in JavaScript:

CSS Rendering Helper

New in Beaver Builder 2.2, the CSS helper makes it simple to render complex CSS rules with your settings, especially settings for multiple device sizes. Just use the methods describe below in your frontend.css.php and we'll handle the rest for you.

Settings Compatibility Helper

New in Beaver Builder 2.2, you can change or remove settings for a module in a backwards compatible way using the settings compatibility helper. All module instances receive a filter_settings method that can be overridden to transform your settings before they are consumed by Beaver Builder, as in the following example.