WP Manifestindependent plugin directory
manifest / builders / spry-breakdance-elements

Spry Breakdance Elements

Custom Elements for Breakdance

by Spry Web Tech · github.com/sprywebtech/spry-breakdance-elements · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/sprywebtech/spry-breakdance-elements/archive/refs/heads/main.zip
Readme github.com/sprywebtech/spry-breakdance-elements ↗

A reusable WordPress plugin that collects custom Breakdance elements in one place. Install this single plugin on client sites, then update it as new elements are added.

Included elements

Flip Box

A responsive, accessible, and customizable two-sided card. It uses CSS Grid to overlap the faces, so it does not depend on absolute positioning or conflict with Breakdance's default .bde-div positioning.

Install

  1. In WordPress, go to Plugins → Add New → Upload Plugin.
  2. Upload spry-breakdance-elements.zip, install it, and activate it.
  3. Open Breakdance and search the Add panel for Flip Box. It appears in the Other category with an SWT badge.

Flip Box settings

The Content tab includes separate front and back content, the optional back button, and an accessibility label.

The Design tab includes card dimensions, padding, Breakdance's combined Borders controls (border, radius, and shadow), face colors, typography sizing, button styling, horizontal or vertical flip direction, duration, and perspective.

Interaction and responsive behavior

  • Pointer devices: flips on hover.
  • Touch devices: tap to focus and flip; tap elsewhere to close.
  • Keyboard: tab to the card and use the CTA normally.
  • Reduced motion: honors the visitor's operating-system preference.
  • Mobile: expands to the available width and scales padding and heading size.

No JavaScript or external dependencies are loaded.

Compatibility

Built against the current Breakdance Element Studio plugin format. Breakdance must be active for the elements to register.

Adding another element

  1. Create and save the element through Element Studio so its generated directory name under elements/ remains canonical.
  2. Add the element's element.php, html.twig, css.twig, and default.css files.
  3. Use the shared SpryWebTechBreakdanceElements namespace and a unique element class.
  4. Bump the plugin version and document the change in CHANGELOG.md.

Do not keep a manually named element directory alongside the directory generated by Element Studio. Both copies will be loaded and can register the same class, causing Breakdance element-loading errors.

Breakdance discovers every valid element directory through the single save location registered in plugin.php, so additional elements do not need their own WordPress plugins.

License

GPL-2.0-or-later. See LICENSE.