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.
here is my attempt
this adds the control but not rendering/outputing what am I missing ?
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 );