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 );
3

I have this same question. The “solution” does not render in the builder. This is not useful in practical application.

4

I dont know

it seems to work for me :slight_smile:

do you know php ? check this example.

and this is made for this

5

I know PHP well enough to have customized or written from scratch several dozen themes. I copied your exact code. The new element is added on the frontend, but it does not impact the editor in any way. Tested on 1.12 and 2.0.

Edit: I see the file on Github uses bricks/element/render_attributes, which does render in the editor. Unfortunately, changing the value does not trigger the element to re-render, so I’m still stuck.

7

you need to spend some time to read how custom elements are made because registering the custom controls are the exacly same how we make custom elements

my recommendation would be to make custom elements first understand how controls works and then try adding controls to the native bricks elements…etc

you still dont told anything about what you are trying to do, why not make your own custom elements or your custom components

I feel like you just wasting time on something very edge case that only you want

anyway…

8

you need to spend some time to read how custom elements are made because registering the custom controls are the exacly same how we make custom elements

I already read those articles. The documentation fails to mention the exceptions when the filters are not run (such as nav menus and text/headings that are rendered as contenteditable with render_builder()).

The fact remains that the code you posted on May 14 as “ok found the issue and solution this works well” does not render in the builder. I’m happy it works for your needs, but I can’t imagine when that would be useful to most people searching this question.

I’ll update this if I do find a straight-forward, consistent method for altering the HTML of any given element, but after a lot of digging and experimentation, to do something simple like toggle a class name based on a custom control value or alter some other HTML (and have that visible in the builder), shockingly, I would need to create a number of custom elements to replace those that are built in, as filters are insufficient. I will post this as a Feature Request.