The code control embeds a code editor utilizing the amazing Ace editor library. Set the mode
parameter to css
, html
or javascript
for proper syntax highlighting and error notifications.
class Prefix_Element_Code extends BricksElement { // Set builder controls public function set_controls() { $this->controls['exampleHtml'] = [ 'tab' => 'content', 'label' => esc_html__( 'HTML', 'bricks' ), 'type' => 'code', 'mode' => 'html', // css/html/javascript 'default' => '<h4>Example H4 HTML title</h4>', ]; } // Render element HTML public function render() { echo isset( $this->settings['exampleHtml'] ) ? $this->settings['exampleHtml'] : esc_html__( 'No HTML provided.', 'bricks' ); } }
You don’t need to define your own element CSS and JS controls. Those are already available when editing any section/row/column/element under the Style tab CSS control group.