Beaver Builder 2.1.4+ CSS class selector integration

beaver-builder-css-class-selector.php

<?php

// START COPYING HERE...
// Requires Beaver Builder v2.1.4 and newer!

/**
 * Populates CSS classes dropdown selector with custom classes selection.
 *
 * Hooks onto `fl_builder_field_js_config` filter hook. See Beaver Builder code directly
 * for filter hook attributes (in `classes/class-fl-builder-ui-settings-forms.php` file).
 *
 * @param  array  $field      An array of setup data for the field.
 * @param  string $field_key  The field name/key.
 */
function beaver_builder_css_class_dropdown( $field, $field_key ) {

	// Processing

		if ( 'class' == $field_key ) {
			$field['options'] = array(

				/*
				 * First value must be empty, it's mandatory!
				 * To prevent any possible "automatic" CSS class setup (taken from the first
				 * value of dropdown selector).
				 */
				'' => esc_html__( '- Choose from predefined classes -', 'textdomain' ),

				// Optgroup 1

					'optgroup-id-1' => array(
						'label'   => esc_html__( 'Optgroup 1 title:', 'textdomain' ),
						'options' => array(
							'my-class-1' => esc_html__( 'My custom class 1', 'textdomain' ),
							'my-class-2' => esc_html__( 'My custom class 1', 'textdomain' ),
						),
					),

				// Optgroup 2

					'optgroup-id-2' => array(
						'label'   => esc_html__( 'Optgroup 2 title:', 'textdomain' ),
						'options' => array(
							'my-class-3' => esc_html__( 'My custom class 3', 'textdomain' ),
						),
					),

			);
		}


	// Output

		return $field;

} // /beaver_builder_css_class_dropdown
		
add_filter( 'fl_builder_field_js_config', 'beaver_builder_css_class_dropdown', 10, 2 );

// ...STOP COPYING HERE. NOW YOU CAN INSERT THE CODE INTO YOUR PHP FILE.