Element API - Style Section Assistance

Hello,

Based off of the Primer and Reference I’m trying to create a custom element.
I’ve hit a bit of a wall trying to get the Style Section/CSS to work. I have the custom element displaying the standard Design elements(“Margin”, “Padding”, “Border”, etc…) but when I adjust the slider’s nothing renders. I suspect either the Render function or the Style function aren’t referenced properly.

The element as a whole just returns a shortcode. I removed any css classes associated with the shortcode to be sure there were no conflicts there.

Currently have it like this:

function manager_element_style() {
 
	ob_start();
	?>
	    
.$_el {
    margin:     $content_margin;
    padding:    $content_padding;
}

<?php

return ob_get_clean();

}

Here is the render function. One note: the API Primer says I need to add a cs_attr_class() in the cs_atts() but I’ve found it critical errors my site as the function does not exist.

function manager_element_renders($data) {

	extract($data);

	$atts = cs_atts([
		'Item'         => $Item,
		'Location'     => $Location,
		'ItemSettings' => $ItemSettings,
	]);


	$return = do_shortcode("[item " . $item . $display . " ]");
	
	return  "<div $atts> $return </div>";
	
}```

Apologies here, this was why I asked about you building in Pro 5 at first I should of realized this would confuse you at some point. Somewhere in 5.1 we lost the $_el custom element styling and thus a lot of custom elements, but I’m happy to say this system is coming back in Pro 6.3 / CS 7.3. I unfortunately can’t give you a workaround as I had to open up the API to support this again. Everything you are writing for the style property is fine though. The cs_attr_class function is also coming back. We plan on starting the Beta next week though I encourage you to enter the Beta forum. Thanks

So what is the process then for hooking these controls up to our smart element? Do we use TSS and is there documentation on it?

We have the controls on the smart object and we have our smart object working. I can see the styles coming over in the data. We just don’t see how we are to get those values into the CSS so that the controls effect our smart element.

Currently you would use Element CSS / not through style as the TSS api is not open. We build using TSS behind the scenes. But yes in 6.3 you’ll use TSS like the doc lays out a bit and the docs for Pro5 will work the same in Pro6. There are some changes I’ll layout in the docs and in an older element migration doc, but there’s a shim in place for 6.3 where the old syntax is still supported. .$_el is now & for example to be more similar to SCSS. There’s more helpers in place now too. For the margin example you’ll be able to do the following for your custom element to include element styles. Let me know if this helps.

    @include margin( get-base(layout_div_margin), get(layout_div_margin));

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.