Custom Bricks Builder Control for the Existing Element ouputs same brxe id to the custom controls dom as data

• To output the current Bricks element’s HTML ID together with the custom text.
• The output should still be in a separate DOM node.
• The ID should match the ID assigned by Bricks (not a random value).
• Your code should support all your $targets (section, container, block, div).

The $element object passed into bricks/frontend/render_element has a public property called id (which is the unique Bricks element ID).
This property is always available for any element.

So you just need to output that value together with your custom text.
(If you want the actual DOM ID attribute, it is always in this format: brxe-{element_id}.
Example: If $element->id is abc123, the DOM id is brxe-abc123.)

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 ) ) {
        // Get the element's unique ID as assigned by Bricks
        $element_id = $element->id;
        // The actual DOM id attribute is always "brxe-{$element_id}"
        $dom_id = 'brxe-' . $element_id;

        $html .= sprintf(
            '<div class="brx-custom-text" data-brxe-id="%s">ID: %s<br>%s</div>',
            esc_attr($dom_id),
            esc_html($dom_id),
            esc_html($custom)
        );
    }

    return $html;
}, 10, 2 );