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.