Element Settings

The Settings tab is everything about the element that isn't controls, markup or styles:
what it's called, where it appears in the Add panel, what tag it renders as, and what it's
allowed to contain.

It's the longest tab in Element Studio and most of it can be left alone. The fields below
are grouped the way the tab groups them.

Identity

Slug — the element's fully qualified class name, shown read-only:
OxygenElementsDocsDemoCard. It's the namespace from your saving location plus the
PascalCase form of the name you gave it, and it's how every other part of Oxygen refers to
the element — nesting rules, the MCP tools, saved page data. It is fixed at creation.

Name — what users see on the Add-panel tile and in the structure tree.

Class Name — the class Oxygen puts on the wrapper, and what your
Default CSS targets. New elements get a generated one like
autogenerated-oe-docsdemocard; replacing it with something readable (oxy-testimonial) is
worth doing, but do it before you write any CSS. The studio warns you why: "Updating the
Class Name will make the previous class obsolete. You'll need to update your CSS."

Category — which Add-panel group the element appears in. Oxygen's are Basic,
Advanced, Dynamic and Other.

UI Icon — the icon on the Add-panel tile, chosen from Oxygen's icon set. Use local
icon lets you supply your own instead.

UI Order — a number that positions the tile within its category. Lower sorts earlier.

Badge Background / Badge Text / Badge Label — an optional badge on the tile, for
marking an element as new or beta. Clear Badge removes it.

HTML Tag options

Default Tag — the wrapper element Oxygen renders. div unless you have a reason.

Tag Options — the list of tags a user may switch to. Oxygen's own elements typically
offer div, span, p, h1…h6, footer, header, nav, aside, which is what makes an element
usable semantically without forking it.

Get the Tag from a Control's path — points at a control instead, so the tag is chosen by
whatever that control's value is. Use it when the tag is a real design decision rather than
an accessibility escape hatch.

Nesting rules

These decide where the element may be placed and what may be placed inside it. Element
Type is the main one — the tab notes "Only change to create complex elements", which is
fair: most elements are final and should stay that way.

container-restricted is the interesting one. It's how a Slider only accepts Slides and a
Tabs element only accepts Tabs — the parent declares the restriction, and the children opt
in through the two fields below.

Element to be a direct child of — restricts this element to being an immediate child of
the elements you name. A Slide names the Slider here.

Element to be a descendant of — looser: the element must be somewhere inside one of
the named elements, at any depth.

Disallow if others are present — prevents the element being added to a page that already
contains one of the named elements. Oxygen's Popup uses this to stop a popup inside a popup.

Inline Editable / Inline Editable Block Path — for elements that wrap a component
the user should be able to edit in place on the canvas. It requires a component chooser
control in the element, and the block path names it.

Misc options

Required plugins — names plugins the element depends on. Without them, the element
renders a message saying what's missing instead of erroring.

Is Pro Only — restricts the element to licensed installs.

Element depends on global scripts to work — declares that the element needs Oxygen's
global scripts present.

Experimental Element? — marks the element as experimental.

Bypass Pointer Events — "Use this if clicking on the element doesn't activate it, but
instead clicks something inside of it." The fix for elements whose own markup swallows the
click that should select them in the builder.

Disable AI — excludes the element from AI-assisted editing.

Share props with SSR children — makes this element's property values readable from a
child element's ssr.php. Needed when a parent holds settings its server-rendered children
have to see.

Disable Wrapper HTML Tag (frontend-only) — drops the wrapper on the front end, so the
element outputs only its template. The tab's own warning is the important part: "This
breaks JavaScript functionality that relies on the tag being present (Ex: .bde-themeless-template-content-area-4881530-120)."
Anything you initialise per instance stops working.

Builder Only — the element renders in the builder and not on the front end.

Add panel rules

Always hide element from the Add Panel — the element still exists and can still be
placed programmatically or as a child of something else, but users can't find it in the
panel. This is what child elements like Slides use, since they only make sense inside their
parent.

Allowed post type — limits the element to particular post types.

Default Properties

Import captures the currently selected instance's settings and stores them as the
element's defaults, so every new instance starts styled. The tab spells out the
prerequisite: the active element on the canvas has to be an instance of the element you're
editing.

This is the fastest way to give an element sensible defaults — build one, style it until it
looks right, then import. Current Default Properties shows what's stored.

Available In

Elements declare which builders they appear in. On an Oxygen install this reads oxygen;
elements shared with Breakdance list both:

static function availableIn()
{
    return ['breakdance', 'oxygen'];
}

If you build only for Oxygen, oxygen alone is correct and honest. It costs nothing either
way on a site that only runs one of the two.