Element Studio is intended for developers who wish to build elements for Breakdance. Additionally, please note that we are unable to guarantee support for issues related to Element Studio
This guide provides an overview of the Element Studio interface, focusing on the creation and configuration of custom elements in a WordPress environment using Element Studio.
Element Studio is a built-in IDE for creating elements for Breakdance. It provides a visual interface for creating elements using HTML, CSS, and Twig.
Documentation for Element Studio is by example. Almost all of the elements included with Breakdance can be opened up in Element Studio so you can see how they were created. You can even make copies of these elements to add your custom modifications to them.
Element Studio generates PHP code. If you make a mistake or something goes wrong, it could be impossible to open Breakdance until the change that caused the problem is reverted. We advise you to use Git and commit regularly so it’s easy to revert any changes if something goes wrong.
Before beginning with Element Studio, please ensure you’ve completed the initial setup.
Open Element Studio from the builder by navigating to the “Settings” menu and selecting “Element Studio”.
With Element Studio open, you’ll then be able to edit existing elements, macros, and presets in Element Studio or create new ones.
Element Studio allows for configuring both content and design aspects of elements. These controls are accessible via the content controls tab and the design controls tab, respectively.
Element Studio supports dynamic integration with CSS and HTML using the Twig templating engine. This feature allows for real-time updates in element styling and behavior based on user interactions or predefined conditions.
Twig syntax is used to integrate dynamic content and styles within the elements created. This integration extends to defining HTML tags and CSS properties that react to changes in content control settings.
You can learn more about Twig through their documentation: https://twig.symfony.com/doc/.
Here is a list of some pre-defined Breakdance tags for Twig. You’ll want to wrap each of these tags in %%. For example: %%TAGNAME%%:
To access property data from a parent element in a child element, use the $parentPropertiesData array.
Example: $productId = $parentPropertiesData['content']['content']['product'] ?? null;
Additional examples can be seen in the ssr.php file of some elements, such as the Product Cart Button element. That particular element inherits data from the Product Builder element.
This overview introduces the basic operations within Element Studio, from element creation to advanced dynamic integrations. For more detailed operations and specific use cases, refer to further tutorials and documentation on Element Studio.