bricks-builder-dev

Bricks Builder Development (verified against 2.3.7)

Verify against real source, never guess: locate the Bricks parent theme in the project (typically wp-content/themes/bricks/). Grep it for any API question. Key source files: includes/elements/base.php (5457 lines, the element API), includes/database.php, includes/assets.php (CSS generation), includes/query.php, includes/templates.php, includes/theme-styles.php, includes/ajax.php, includes/conditions.php, includes/frontend.php. Official docs: https://academy.bricksbuilder.io/developer/

Custom element anatomy

class My_Element extends \Bricks\Element {
    public $category = 'custom';        // label via 'bricks/builder/i18n' filter
    public $name     = 'my-element';    // unique, used in trees as element 'name'
    public $icon     = 'ti-star';       // themify icon (ti-*) — grep parent assets/fonts to confirm icon exists
    public $scripts  = [ 'myInitFn' ]; // optional: Bricks calls window.myInitFn() on frontend
    public $nestable = false;           // true = allow child elements (needs $vue_component = 'bricks-nestable')
    public $block    = '';              // optional: Gutenberg block mapping (e.g. 'core/heading')
    public $draggable   = true;         // false = can't drag in builder
    public $deprecated  = false;        // true = hidden from panel

    public function get_label() { return esc_html__( 'My Element', 'textdomain' ); }
    public function get_keywords() { return [ 'search', 'terms' ]; }

    public function set_control_groups() {
        $this->control_groups['my_group'] = [
            'title' => esc_html__( 'My Group', 'textdomain' ),
            'tab'   => 'content', // or 'style'
        ];
    }

    public function set_controls() {
        $this->controls['my_text'] = [
            'tab'   => 'content',
            'group' => 'my_group',
            'label' => esc_html__( 'Text', 'textdomain' ),
            'type'  => 'text',
            'default' => 'Hello',
        ];
    }

    public function enqueue_scripts() {
        // runs ONLY when element is on the page — conditional loading for free
        wp_enqueue_style( 'my-el', get_stylesheet_directory_uri() . '/css/my-el.css' );
    }

    public function render() {
        $settings = $this->settings;
        $this->set_attribute( '_root', 'class', 'my-class' );
        echo "<div {$this->render_attributes('_root')}>";
        echo $this->render_dynamic_data( $settings['my_text'] ?? '' );
        echo "</div>";
        // empty state in builder:
        // return $this->render_element_placeholder(['title' => 'Configure me']);
    }
}