Custom Elements

Developers
,
1

Hey everyone, I was looking at the docs on how to create custom elements and the problem I have come across is, one I can’t get the style tab to work and it doesn’t explain when you have under the CSS => [‘selector’ => ‘.your-class’ ] how exactly that works because it seems I can’t apply styles on the content tab.

Have a look at this video I recorded on loom also I’m not sure where to start with the code to understand bricks, would appreciate some guidance on this.

What I would like to two main things know is where in the bricks code I should start to learn about the code better and how the custom elements work because the style tab doesn’t seem to work for me.

2

so the reason the styles tab doesn’t work is because you’ve added set the Property $css_selector.

you have to remove this line from your code and it should work (if your render method is correct):

public $css_selector = '.pxl-text'

$css_selector By default all CSS control settings are applied to the element wrapper: .bricks-element-wrapper. If you want the default CSS selector to target a child HTML element, set this selector here.

This is from the documentation and deprecated. Bricks doesn’t add the class .bricks-element-wrapper to the element anymore. But Bricks adds an ID and a class of .brxe-{your-element-name} to your element, and this is where your styles apply.

But it only works if you add the render_attributes method to your root-element. Somehting like this:
<div {$this->render_attributes( '_root' )}>"

What you are telling bricks is to look for your class (.pxl-text) inside of the root element. so the selector bricks applies the values of your styles-tab to, is something like #brxe-hqjzjz .pl-text.

Does this help?
Cheers Suat

3

Hi Suat, thanks for your reply.

I am a bit confused on this one because I don’t fully grasp how I can use the selectors that are set in controls in CSS. I was looking at a plugin Bricksable to check how elements are made but the selectors they put are not exactly the same as in CSS file and just a bit confused about how this all works together, I don’t know if you can create a short video or provide more details, I would approach that.

4

Here you go. It’s a bit long and I’m not a native english speaker, but I think this should be helpful:

Cheers Suat

2 Likes
5

Thank you for doing this, please don’t delete it because I am going to watch this fully.

1 Like
6

Thank you for explaining this Suat, I understand OOP, and MVC so I get what the properties or methods do. The only downside is that the Docs are not good and where you look at the code, is not always clear but now I know how to get my scripts to work is great.

The one thing I didn’t get is public $script = [‘ufTestScript’] because I couldn’t see that script being enqueued as I see you have a test.js file. is the $script like a function in js file that is being called?

1 Like
7

yeah i forgot to record that part, where I actually open the test.js file.
Yeah so public $scripts is an array of function names, that get called inside the builder. In my case it is a simple function called ufTestScript.

This is the content of the test.js file:

function ufTestScript(){
 console.log('Hello World!')
}

This doesn’t mean the function gets called on the frontend, automatically. It is just inside the builder. You have to write your own logic for the frontend, with something like this:

function ufTestScript(){
 console.log('Hello World!')
}

document.addEventListener("DOMContentLoaded", (event) => {
 ufTestScript();
});
1 Like
8

OK I see, it makes sense. Thanks for explaining this to me, much appreciated. :muscle:

1 Like