Help create widget

Developers
1

I need your help, I don’t know where I’m going wrong when applying CSS to a widget, the same is applied to all instances of the same widgets present in the editor and on the front. Below is a simple example of what I’m trying.

if ( ! class_exists(‘JungleWeb_H3_Widget’) ) {
class JungleWeb_H3_Widget extends \Bricks\Element {
public $category = ‘jungle-web-bricks-forms’;
public $name = ‘jungleweb-h3’;
public $icon = ‘fas fa-heading’;
public $nestable = false;

    public function get_label() {
        return esc_html__( 'H3 Personalizado', 'jungle-web' );
    }

    public function get_keywords() {
        return [ 'h3', 'heading', 'titulo', 'jungle' ];
    }

    public function set_control_groups() {
        $this->control_groups['settings'] = [
            'title' => esc_html__( 'Configurações', 'jungle-web' ),
            'tab'   => 'content',
        ];

        $this->control_groups['style'] = [
            'title' => esc_html__( 'Estilo', 'jungle-web' ),
            'tab'   => 'style',
        ];
    }

    public function set_controls() {
        $this->controls['h3_content'] = [
            'tab'     => 'content',
            'group'   => 'settings',
            'label'   => esc_html__( 'Texto do H3', 'jungle-web' ),
            'type'    => 'text',
            'default' => 'Este é um título H3',
        ];

        $this->controls['h3_typography'] = [
            'tab'   => 'style',
            'group' => 'style',
            'label' => esc_html__( 'Tipografia', 'jungle-web' ),
            'type'  => 'typography',
            'css'   => [
                [ 'selector' => '{{ELEMENT}} h3' ],
            ],
        ];

        $this->controls['h3_color'] = [
            'tab'   => 'style',
            'group' => 'style',
            'label' => esc_html__( 'Cor do Texto', 'jungle-web' ),
            'type'  => 'color',
            'css'   => [
                [ 'property' => 'color', 'selector' => '{{ELEMENT}} h3' ],
            ],
        ];
    }

    public function render() {
        // O Bricks vai aplicar os atributos automaticamente no _root
        $this->set_attribute('_root', 'class', 'jungleweb-h3');

        echo '<div ' . $this->render_attributes('_root') . '>';
        echo '<h3>' . esc_html( $this->settings['h3_content'] ) . '</h3>';
        echo '</div>';
    }
}

\Bricks\Elements::register_element(
    __FILE__,
    'jungleweb-h3',
    'JungleWeb_H3_Widget'
);

}