Styles tab does not work in custom elements

Developers
1

I created a custom element following Create Your Own Elements – Bricks Academy

I know I can create custom controls and that works fine. However, the styles in the second tab STYLE are not working by default.

Is that something expected and only the custom controls I create should work?
Am I missing something in the config?

Having all those standard sets there would be awesome for every custom element.

Thanks!

2

Hi @deryckoe,

Welcome back to the forum :slight_smile: Nice seeing you here!

The controls below “Style” should indeed work by default for custom elements. The CSS gets applied to the root element.

Not sure what’s going wrong in your setup, but that’s not the expected behavior. If the element’s script is short enough you could share it here so I can try replicating it locally. Otherwise, you may share temporary admin access to help@bricksbuilder.io and we’ll investigate the issue. Please make sure to include a link to this thread in the email.

3

Hi @charaf thanks! It’s nice to be back.

You are right. It works. It was just I was doing it wrong. Here’s my working (and minimal) code.

class Smile extends \Bricks\Element {
	public $category = 'general';
	public $name = 'doe-smile';
	public $icon = 'ti-face-smile';
	public $css_selector = '.doe-smile-wrapper';

	public function get_label(): string {
		return esc_html__( 'Smile', 'bricks' );
	}

	public function render(): void {
		$this->set_attribute( 'child', 'class', 'doe-smile-wrapper' );
		echo "<div {$this->render_attributes( '_root' )}><div {$this->render_attributes('child')}>Now you can smile</div></div>";
	}
}

Some styles were applied to _root and some styles to doe-smile-wrapper. Before fixing this I was assigning doe-smile-wrapper to the root. Bricks by default print margins, etc to root and padding, typography, etc to the child element. I did not had a child element (until now) so those styles were printed in dynamic CSS but never applied.

If I want to have all in the root element, without child, this code works too.

class Smile extends \Bricks\Element {
	public $category = 'general';
	public $name = 'doe-smile';
	public $icon = 'ti-face-smile';

	public function get_label(): string {
		return esc_html__( 'Smile', 'bricks' );
	}

	public function render(): void {
		echo "<div {$this->render_attributes( '_root' )}>Now you can smile</div>";
	}
}

I removed $css_selector and the child (not required but makes no sense anymore) in the render method.

Thanks. Reading your answer gave me the certainty I was doing things wrong and made me go for a solution.

1 Like
4

Awesome, glad it’s all good now!

1 Like