Overview
Element Studio is Breakdance's built-in editor for creating custom elements with controls, HTML, CSS, Twig, and JavaScript. It generates PHP element classes in a WordPress plugin, so your elements can appear in the Add panel alongside Breakdance's own elements.
Element Studio is intended for developers. Support for issues related to Element Studio cannot be guaranteed. Generated PHP errors can prevent Breakdance from opening; keep your plugin in Git and commit regularly so you can revert changes.
Open Element Studio
- Complete Initial Setup to give your elements their own plugin and saving location.
- Open a page in Breakdance and choose Element Studio from the top bar menu.
- Choose New element, enter a name, and select your custom saving location. Use Open element to edit an existing element.
The same panel offers Open macro, New macro, Open preset, and New preset. Creating an element writes its initial files immediately; Save writes subsequent edits. Delete removes its files, including files that saved pages may still use.
Element Files and Tabs
An element normally has four files: element.php, html.twig, css.twig, and default.css. Its registered namespace and class form its slug, such as MyBreakdanceElementsNoticeCard.
| Tab | Purpose |
|---|---|
| Content, Design | Controls that users edit. Add sections, then controls inside each section. |
| HTML | Twig markup and server-rendered output. |
| CSS, Default CSS | Instance styles and shared base styles. |
| HTML Attributes | Attributes and classes on the wrapper. |
| Property Paths | Dynamic paths, responsive values, render triggers, and spacing bars. |
| Dependencies | Scripts and styles required by the element. |
| Actions | JavaScript responding to builder events. |
| Settings | Identity, tags, icons, nesting, availability, and defaults. |
Learn from Existing Elements
Almost all built-in Breakdance elements can be opened in Element Studio. Inspect their controls, templates, and settings, or copy the relevant parts into your own plugin. Changes stored in Breakdance's own plugin folders can be overwritten by updates.
Twig connects control values to HTML and CSS. The HTML reference covers 124, 256146, .bde-themeless-template-content-area-256146-124, and %%SSR%%, as well as reading parent properties through $parentPropertiesData. See the Twig documentation for its template syntax and Macros and Presets for sharing template code and controls between elements.