Skip to main content
Version: Beaver Builder 2.8

15: Helpers

There are helpers for CSS rendering and settings compatibility, as follows.

CSS Rendering Helper​

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

Render a single rule for a single device size​

/**
 * Render a single rule for a single device size.
 */
FLBuilderCSS::rule( array(
  'selector' => ".fl-node-$id .some-element",
  'media' => 'max-width: 980px', // Optional. Can be 'default', 'medium', 'responsive' or a custom statement.
  'enabled' => 'bar' === $settings->foo, // Optional.
  'props' => array(
    'background-image' => $settings->bg_image_src,
    'background-repeat' => $settings->bg_repeat_responsive,
  ),
) );

Render a single rule/property for all device sizes​

/**
 * Render a single rule/property for all device sizes (default, medium, responsive).
 * For this to work, your field must be defined as 'responsive' => `true`.
 */
FLBuilderCSS::responsive_rule( array(
  'settings'    => $settings,
  'setting_name'    => 'align', // As in $settings->align.
  'selector'    => ".fl-node-$id .some-element",
  'prop'        => 'text-align',
) );

Render the rule/properties for a dimension field​

/**
 * Renders the rule/properties for a dimension field.
 */
FLBuilderCSS::dimension_field_rule( array(
  'settings'    => $settings,
  'setting_name'    => 'padding',
  'selector'    => ".fl-node-$id .some-element",
  'unit'        => 'px', // Omit if custom unit select is used.
  'props'       => array(
    'padding-top'    => 'padding_top', // As in $settings->padding_top
    'padding-right'  => 'padding_right',
    'padding-bottom' => 'padding_bottom',
    'padding-left'   => 'padding_left',
  ),
) );

Render the rule/properties for a typography field​

/**
 * Renders the rule/properties for a typography field.
 */
FLBuilderCSS::typography_field_rule( array(
  'settings'    => $settings,
  'setting_name'    => 'typography', // As in $settings->typography
  'selector'    => ".fl-node-$id .some-element",
) );

Render the rule/properties for a border field​

/**
 * Renders the rule/properties for a border field.
 */
FLBuilderCSS::border_field_rule( array(
  'settings'    => $settings,
  'setting_name'    => 'item_border', // As in $settings->item_border
  'selector'    => ".fl-node-$id .some-element",
) );

Settings Compatibility Helper​

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.

class FLExampleModule extends FLBuilderModule {

  public function __construct() {
    parent::__construct( array(
      'name'        => 'Example',
    ) );
  }

  public function filter_settings( $settings ) {

    /**
     * Convert an old setting to a new setting.
     * Don't forget to unset the old setting!
     */
    if ( isset( $settings->old_setting ) ) {
      $settings->new_setting = do_something_with_old_setting( $settings->old_setting );
      unset( $settings->old_setting );
  }

  /**
   * Change an existing setting.
   */
  if ( isset( $settings->existing_setting ) ) {
    $settings->existing_setting = do_something( $settings->existing_setting );
  }

  /**
   * Always return the settings when you are done.
   */
  return $settings;
  }
}