WP Manifestindependent plugin directory
manifest / builders / oxystudio-elements

OxyStudio Elements

Custom Element Studio components for Oxygen

by Sinawi Web Design · github.com/laithsinawi/oxystudio-elements

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/laithsinawi/oxystudio-elements/archive/refs/heads/master.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/laithsinawi/oxystudio-elements ↗

Custom Element Studio components for Oxygen (beta 5+) with Swiper support and ACF-friendly helpers.

Setup

  • Install/activate this plugin inside WordPress.
  • Element Studio will save elements/macros/presets into the elements, macros, and presets folders in this plugin.
  • Swiper assets and a small init helper are enqueued on the frontend automatically.

Creating the ACF-powered slider element

  1. In ACF, create a Repeater (e.g., slider_items) with subfields like image, heading, content, link.
  2. In Element Studio, create a new element under the namespace \OxyStudio\Elements\Swiper.
  3. In the Render tab, add a container with data-oxystudio-swiper and your slide markup inside an Oxygen Repeater set to “ACF Repeater > Current Post > slider_items.”
  4. Expose controls for slider options and map them to data attributes on the container:
    • data-autoplay (true/false), data-autoplay-delay (ms)
    • data-loop, data-speed (ms), data-slides-per-view, data-space-between
    • data-breakpoints for JSON (e.g., {"768":{"slidesPerView":2}})
  5. Add optional nav/pagination inside the container:
    • Next/Prev buttons: data-swiper-next, data-swiper-prev
    • Pagination element: data-swiper-pagination

The included assets/js/swiper-init.js reads these data attributes and instantiates Swiper instances automatically.

Namespaces reserved

  • \OxyStudio\Elements\Swiper — sliders/carousels
  • \OxyStudio\Elements\Hero — hero blocks
  • \OxyStudio\Elements\ACF — ACF utilities or wrappers

Notes

  • Asset handles: oxystudio-swiper (Swiper CDN), oxystudio-elements (CSS overrides), oxystudio-swiper-init (JS init).
  • If you need custom Swiper options per instance, add JSON to data-swiper-options and it will be merged.
  • The plugin also supports Breakdance as a fallback while Oxygen v5 is in beta.

Current work status (2025-12-21)

  • Test site root: /Users/laithsinawi/Local Sites/expediawineclubcruises/app/public (LocalWP). Active plugin copy lives at wp-content/plugins/OxyStudio-Elements/ there.
  • Backup created before style-control changes: wp-content/plugins/OxyStudio-Elements-backup-20251221-084518.zip.
  • Swiper element (elements/OxyStudio_Swiper_Slider/) updates: removed nav arrows, pagination positioned inside slider; overlay/background z-index fixed; inline CSS vars set on wrapper.
  • Added a Styles section (dots active/inactive colors, text color, button bg/text + hover) to element.php; html.twig extracts color picker values safely and writes vars; css.twig consumes vars and enforces text/overlay stacking.
  • Outstanding: style control colors may still be overridden; verify the wrapper inline style reflects chosen values and adjust specificity if needed. No other errors currently after the array-to-string fix.