Code Control

Last Modified: June 6, 2020

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.