Adding custom controls to the existing Elements? (Bricks Dev Question)

Developers
1

EDIT: Solved

How can I add custom controls to the existing Elements?

And output them right after same element without breaking any native functionality of the element

For now I am thinking only modifying the section, container, block, div

I checked the Dev Docs there is no example to help me there.

image
image1915×1037 85.1 KB

here is my attempt
this adds the control but not rendering/outputing what am I missing ? :thinking:



add_action( 'init', function() {
    $elements = [ 'section', 'container', 'block', 'div' ];

    foreach ( $elements as $element ) {
        add_filter( "bricks/elements/{$element}/controls", function( $controls ) {
            $controls['custom_text'] = [
                'tab'     => 'content',
                'label'   => esc_html__( 'Custom Text', 'your-text-domain' ),
                'type'    => 'text',
                'default' => '',
            ];
            return $controls;
        } );
    }
} );

add_filter( 'bricks/element/render', function( $output, $element ) {
    $target_elements = [ 'section', 'container', 'block', 'div' ];

    if ( in_array( $element->name, $target_elements, true ) ) {
        $custom_text = $element->settings['custom_text'] ?? '';

        if ( ! empty( $custom_text ) ) {
            $output .= '<div class="custom-text-output">' . esc_html( $custom_text ) . '</div>';
        }
    }

    return $output;
}, 10, 2 );
2

ok found the issue and solution

this works well :slight_smile:



add_action( 'init', function () {
	$targets = [ 'section', 'container', 'block', 'div' ];

	foreach ( $targets as $name ) {
		add_filter( "bricks/elements/{$name}/controls", function ( $controls ) {
			$controls['custom_text'] = [
				'tab'     => 'content',
				'label'   => esc_html__( 'Custom Text', 'snn' ),
				'type'    => 'text',
				'default' => '',
			];
			return $controls;
		} );
	}
} );   
add_filter( 'bricks/frontend/render_element', function ( $html, $element ) {

	$targets = [ 'section', 'container', 'block', 'div' ];
	$custom  = $element->settings['custom_text'] ?? '';

	if ( $custom !== '' && in_array( $element->name, $targets, true ) ) {
		$html .= '<div class="brx-custom-text">' . esc_html( $custom ) . '</div>';
	}

	return $html;
}, 10, 2 );