beaverbuilder

composer config --global repositories.beaver-builder composer https://composer.wpbeaverbuilder.com/KEY

beaverbuilder

<?php // Do not copy this line, start from line 3 onwards

function check_field_connections( $is_visible, $node ) {
	
	if ( isset( $node->settings->connections ) ) {
		foreach ( $node->settings->connections as $key => $connection ) {
			if ( ! empty( $connection ) && empty( $node->settings->$key ) ) {
				return false;
			}
		}

beaverbuilder

<?php
class FLExampleModule extends FLBuilderModule {

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

	public function filter_settings( $settings ) {

beaverbuilder

<?php
/**
 * 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,

beaverbuilder

<?php
'my_text' => array(
	'type'    => 'text',
	'label'   => 'My Text',
	'preview' => array(
		'type'	    => 'attribute',
		'attribute' => 'data-foo',
		'selector'  => '.my-selector',
		'format_callback' => '', // Optional JS format callback.
	),

beaverbuilder

<?php
'text_color' => array(
	'type'    => 'color',
	'label'   => 'Text Color',
	'preview' => array(
		'type'	    => 'css',
		'selector'  => '.my-selector',
		'property'  => 'color',
		'important' => true,
	),

beaverbuilder

function myPreviewCallback( args ) {
	/** 
	 * Use `args` for any kind of preview logic you can dream of!
	 */
	console.log( args )
}

beaverbuilder

<?php
'my_color' => array(
	'type' => 'color',
	'label' => 'My Color',
	'preview' => array(
		'type' => 'callback',
		'callback' => 'myPreviewCallback',
	),
),

beaverbuilder

<?php
'my_text' => array(
	'type'          => 'text',
	'label'         => 'My Text',
	'inline_editor' => false,
),

beaverbuilder

<?php
'my_section' => array(
	'title'     => 'My Section',
	'collapsed' => true,
	'fields'    => array( ... ),
),