Adding Custom Controls to the Existing Bricks Builder Elements

This action and filter adds a custom text field to specific elements in the builder interface (section, container, block, div) and outputs the text on the frontend when set.

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