From a497ad1afecec75f8b839f05114d03dff92f7366 Mon Sep 17 00:00:00 2001
From: castellon <alexcastellon077@gmail.com>
Date: Fri, 27 Feb 2026 10:08:37 +0100
Subject: [PATCH 1/4] Fix carousel editor

---
 .../carousel/frontblocks-advanced-option.js   | 253 ++++++++-
 .../carousel/frontblocks-advanced-option.jsx  | 495 +++++++++++++-----
 .../carousel/frontblocks-carousel-editor.css  |  52 ++
 includes/Frontend/Carousel.php                |  18 +
 4 files changed, 659 insertions(+), 159 deletions(-)
 create mode 100644 assets/carousel/frontblocks-carousel-editor.css

diff --git a/assets/carousel/frontblocks-advanced-option.js b/assets/carousel/frontblocks-advanced-option.js
index c61355e..c0de668 100644
--- a/assets/carousel/frontblocks-advanced-option.js
+++ b/assets/carousel/frontblocks-advanced-option.js
@@ -2,7 +2,10 @@
 
 // Add custom controls to the Advanced panel of GenerateBlocks Grid block
 var addFilter = wp.hooks.addFilter;
-var Fragment = wp.element.Fragment;
+var _wp$element = wp.element,
+  Fragment = _wp$element.Fragment,
+  useEffect = _wp$element.useEffect,
+  useRef = _wp$element.useRef;
 var _wp$blockEditor = wp.blockEditor,
   InspectorControls = _wp$blockEditor.InspectorControls,
   PanelColorSettings = _wp$blockEditor.PanelColorSettings;
@@ -12,22 +15,50 @@ var _wp$components = wp.components,
   PanelBody = _wp$components.PanelBody,
   ToggleControl = _wp$components.ToggleControl;
 var __ = wp.i18n.__;
+
+/**
+ * Returns the document that renders block content.
+ * WordPress 6.x uses an <iframe> for the editor canvas.
+ */
+function getEditorDocument() {
+  var iframe = document.querySelector('iframe[name="editor-canvas"]');
+  return iframe && iframe.contentDocument && iframe.contentDocument.body ? iframe.contentDocument : document;
+}
+
+/**
+ * Find the grid DOM element for a given block.
+ *
+ * KEY INSIGHT from inspecting the real DOM:
+ *   - For generateblocks/element (Grid): the [data-block] wrapper IS the
+ *     gb-element element.  Do NOT search inside – that returns a child item.
+ *   - For generateblocks/grid: look for .gb-grid-wrapper inside.
+ *   - For core/group: the [data-block] wrapper itself has is-layout-grid.
+ */
+function findGridEl(blockEl, name) {
+  if (name === 'generateblocks/element') {
+    return blockEl; // blockEl IS the gb-element grid
+  }
+  if (name === 'generateblocks/grid') {
+    if (blockEl.classList.contains('gb-grid-wrapper')) return blockEl;
+    return blockEl.querySelector('.gb-grid-wrapper') || null;
+  }
+  if (name === 'core/group') {
+    if (blockEl.classList.contains('is-layout-grid')) return blockEl;
+    return blockEl.querySelector('.is-layout-grid') || null;
+  }
+  return null;
+}
 function addCustomCarouselPanel(BlockEdit) {
   return function (props) {
-    // Support grid blocks, element blocks with grid display, and core/group blocks
     if (props.name !== 'generateblocks/grid' && props.name !== 'generateblocks/element' && props.name !== 'core/group') {
       return /*#__PURE__*/React.createElement(BlockEdit, props);
     }
-
-    // For element blocks, only show carousel options if it has grid display
     if (props.name === 'generateblocks/element') {
       var styles = props.attributes.styles || {};
       if (styles.display !== 'grid') {
         return /*#__PURE__*/React.createElement(BlockEdit, props);
       }
     }
-
-    // For core/group blocks, only show carousel options if it has grid layout
     if (props.name === 'core/group') {
       var layout = props.attributes.layout || {};
       if (layout.type !== 'grid') {
@@ -47,18 +78,198 @@ function addCustomCarouselPanel(BlockEdit) {
       frblResponsiveToView = _props$attributes$frb5 === void 0 ? '1' : _props$attributes$frb5,
       _props$attributes$frb6 = _props$attributes.frblAutoplay,
       frblAutoplay = _props$attributes$frb6 === void 0 ? '' : _props$attributes$frb6,
-      _props$attributes$frbGap = _props$attributes.frblGap,
-      frblGap = _props$attributes$frbGap === void 0 ? '20' : _props$attributes$frbGap,
-      _props$attributes$frb7 = _props$attributes.frblButtons,
-      frblButtons = _props$attributes$frb7 === void 0 ? 'arrows' : _props$attributes$frb7,
-      _props$attributes$frb8 = _props$attributes.frblRewind,
-      frblRewind = _props$attributes$frb8 === void 0 ? true : _props$attributes$frb8,
+      _props$attributes$frb7 = _props$attributes.frblGap,
+      frblGap = _props$attributes$frb7 === void 0 ? '20' : _props$attributes$frb7,
+      _props$attributes$frb8 = _props$attributes.frblButtons,
+      frblButtons = _props$attributes$frb8 === void 0 ? 'arrows' : _props$attributes$frb8,
+      _props$attributes$frb9 = _props$attributes.frblRewind,
+      frblRewind = _props$attributes$frb9 === void 0 ? true : _props$attributes$frb9,
       frblButtonColor = _props$attributes.frblButtonColor,
       frblButtonBgColor = _props$attributes.frblButtonBgColor,
-      _props$attributes$frb9 = _props$attributes.frblButtonsPosition,
-      frblButtonsPosition = _props$attributes$frb9 === void 0 ? 'side' : _props$attributes$frb9,
-      _props$attributes$frb0 = _props$attributes.frblDisableOnDesktop,
-      frblDisableOnDesktop = _props$attributes$frb0 === void 0 ? false : _props$attributes$frb0;
+      _props$attributes$frb0 = _props$attributes.frblButtonsPosition,
+      frblButtonsPosition = _props$attributes$frb0 === void 0 ? 'side' : _props$attributes$frb0,
+      _props$attributes$frb1 = _props$attributes.frblDisableOnDesktop,
+      frblDisableOnDesktop = _props$attributes$frb1 === void 0 ? false : _props$attributes$frb1;
+
+    // ── Editor carousel preview ──────────────────────────────────────────
+    var stateRef = useRef(null);
+    useEffect(function () {
+      var mounted = true;
+      var timer = null;
+      function cleanup() {
+        if (!stateRef.current) return;
+        var _stateRef$current = stateRef.current,
+          originalParent = _stateRef$current.originalParent,
+          wrapper = _stateRef$current.wrapper,
+          gridEl = _stateRef$current.gridEl,
+          clones = _stateRef$current.clones;
+        try {
+          // Remove clones first
+          (clones || []).forEach(function (c) {
+            return c.parentNode && c.parentNode.removeChild(c);
+          });
+          if (wrapper.parentNode) {
+            originalParent.replaceChild(gridEl, wrapper);
+          }
+          // Remove ALL inline styles we added
+          ['display', 'flex-wrap', 'gap', 'transition', 'will-change', 'transform'].forEach(function (p) {
+            return gridEl.style.removeProperty(p);
+          });
+
+          // Remove slide sizing from children
+          var uuidRe = /^[0-9a-f]{8}-[0-9a-f]{4}-/;
+          Array.from(gridEl.children).filter(function (el) {
+            return uuidRe.test(el.dataset.block || '');
+          }).forEach(function (slide) {
+            slide.style.removeProperty('flex-shrink');
+            slide.style.removeProperty('width');
+            slide.style.removeProperty('min-width');
+          });
+        } catch (e) {}
+        stateRef.current = null;
+      }
+      function init() {
+        if (!mounted) return;
+        cleanup();
+        var editorDoc = getEditorDocument();
+
+        // Both the outer root wrapper and the inner gb-element share the same
+        // data-block UUID in GenerateBlocks 2.x. Use data-type to select the
+        // correct inner element.
+        var blockEl = editorDoc.querySelector("[data-block=\"".concat(props.clientId, "\"][data-type=\"").concat(props.name, "\"]"));
+        if (!blockEl) return;
+        var gridEl = findGridEl(blockEl, props.name);
+        if (!gridEl || gridEl.closest('.frbl-editor-carousel')) return;
+
+        // Slides = direct children that are real blocks.
+        // Filter by UUID pattern to exclude block-list-appender (data-block="true").
+        var uuidRe = /^[0-9a-f]{8}-[0-9a-f]{4}-/;
+        var slides = Array.from(gridEl.children).filter(function (el) {
+          return uuidRe.test(el.dataset.block || '');
+        });
+        if (slides.length === 0) return;
+        var perView = Math.max(1, parseInt(frblItemsToView) || 4);
+        var gap = Math.max(0, parseInt(frblGap) || 20);
+
+        // ── Create the overflow:hidden wrapper ───────────────────────
+        var originalParent = gridEl.parentNode;
+        var wrapper = editorDoc.createElement('div');
+        wrapper.className = 'frbl-editor-carousel';
+        originalParent.replaceChild(wrapper, gridEl);
+        wrapper.appendChild(gridEl);
+
+        // ── Apply flex layout to the grid element itself ─────────────
+        gridEl.style.display = 'flex';
+        gridEl.style.flexWrap = 'nowrap';
+        gridEl.style.gap = gap + 'px';
+        gridEl.style.transition = 'transform 400ms ease';
+        gridEl.style.willChange = 'transform';
+
+        // ── Size each slide ──────────────────────────────────────────
+        var totalWidth = wrapper.offsetWidth || 600;
+        var slideWidth = Math.floor((totalWidth - gap * (perView - 1)) / perView);
+        slides.forEach(function (slide) {
+          slide.style.flexShrink = '0';
+          slide.style.width = slideWidth + 'px';
+          slide.style.minWidth = slideWidth + 'px';
+        });
+
+        // ── Trailing loop clones ─────────────────────────────────────
+        // Add perView clones from the start after the last real slide so
+        // the next-arrow transition looks smooth before snapping back.
+        var clones = [];
+        var directAppender = Array.from(gridEl.children).find(function (c) {
+          return c.classList.contains('block-list-appender');
+        });
+        for (var i = 0; i < perView; i++) {
+          var clone = slides[i % slides.length].cloneNode(true);
+          clone.removeAttribute('data-block');
+          clone.setAttribute('aria-hidden', 'true');
+          clone.classList.add('frbl-slide-clone');
+          clone.style.flexShrink = '0';
+          clone.style.width = slideWidth + 'px';
+          clone.style.minWidth = slideWidth + 'px';
+          clone.style.pointerEvents = 'none';
+          gridEl.insertBefore(clone, directAppender || null);
+          clones.push(clone);
+        }
+
+        // ── Slide navigation (infinite loop) ─────────────────────────
+        var idx = 0;
+        var looping = false;
+        function slideTo(n) {
+          if (looping) return;
+          if (n < 0) {
+            // Backwards wrap: jump to end of real slides silently, then animate back one.
+            gridEl.style.transition = 'none';
+            idx = slides.length;
+            gridEl.style.transform = "translateX(-".concat(idx * (slideWidth + gap), "px)");
+            void gridEl.offsetWidth; // force reflow
+            gridEl.style.transition = 'transform 400ms ease';
+            idx = slides.length - 1;
+            gridEl.style.transform = "translateX(-".concat(idx * (slideWidth + gap), "px)");
+            return;
+          }
+          idx = n;
+          gridEl.style.transform = "translateX(-".concat(idx * (slideWidth + gap), "px)");
+
+          // After animating into the trailing clones zone, silently snap back to real position.
+          if (idx >= slides.length) {
+            looping = true;
+            setTimeout(function () {
+              gridEl.style.transition = 'none';
+              idx = idx % slides.length;
+              gridEl.style.transform = "translateX(-".concat(idx * (slideWidth + gap), "px)");
+              void gridEl.offsetWidth;
+              gridEl.style.transition = 'transform 400ms ease';
+              looping = false;
+            }, 420);
+          }
+        }
+
+        // ── Badge ────────────────────────────────────────────────────
+        var badge = editorDoc.createElement('div');
+        badge.className = 'frbl-editor-badge';
+        badge.textContent = '🎠 Carousel Preview';
+        wrapper.appendChild(badge);
+
+        // ── Arrows ───────────────────────────────────────────────────
+        var btnColor = frblButtonColor || '#fff';
+        var btnBg = frblButtonBgColor || 'rgba(0,0,0,0.45)';
+        ['prev', 'next'].forEach(function (dir) {
+          var btn = editorDoc.createElement('button');
+          btn.type = 'button';
+          btn.className = "frbl-editor-arrow frbl-editor-arrow-".concat(dir);
+          btn.setAttribute('aria-label', dir === 'prev' ? 'Previous slide' : 'Next slide');
+          btn.style.backgroundColor = btnBg;
+          var d = dir === 'prev' ? 'M6 1L1 6L6 11' : 'M1 11L6 6L1 1';
+          btn.innerHTML = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"".concat(d, "\" stroke=\"").concat(btnColor, "\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");
+          btn.addEventListener('click', function (e) {
+            e.stopPropagation();
+            slideTo(dir === 'prev' ? idx - 1 : idx + 1);
+          });
+          wrapper.appendChild(btn);
+        });
+        stateRef.current = {
+          originalParent: originalParent,
+          wrapper: wrapper,
+          gridEl: gridEl,
+          clones: clones
+        };
+      }
+      if (frblGridOption !== 'none') {
+        timer = setTimeout(init, 300);
+      } else {
+        cleanup();
+      }
+      return function () {
+        mounted = false;
+        if (timer) clearTimeout(timer);
+        cleanup();
+      };
+    }, [frblGridOption, frblItemsToView, frblGap, frblButtonColor, frblButtonBgColor, props.clientId]);
+    // ── Inspector panel ──────────────────────────────────────────────────
+
     return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BlockEdit, props), /*#__PURE__*/React.createElement(InspectorControls, null, /*#__PURE__*/React.createElement(PanelBody, {
       title: __('Carousel Settings', 'frontblocks'),
       initialOpen: true
@@ -76,7 +287,7 @@ function addCustomCarouselPanel(BlockEdit) {
         value: 'slider'
       }],
       onChange: function onChange(value) {
-        props.setAttributes({
+        return props.setAttributes({
           frblGridOption: value
         });
       },
@@ -134,7 +345,7 @@ function addCustomCarouselPanel(BlockEdit) {
         });
       },
       help: __('Space between slides in pixels. Leave empty for 20.', 'frontblocks')
-    }), frblGridOption === 'slider' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToggleControl, {
+    }), frblGridOption === 'slider' && /*#__PURE__*/React.createElement(ToggleControl, {
       label: __('Rewind', 'frontblocks'),
       checked: frblRewind,
       onChange: function onChange(value) {
@@ -142,7 +353,7 @@ function addCustomCarouselPanel(BlockEdit) {
           frblRewind: value
         });
       }
-    })), /*#__PURE__*/React.createElement(SelectControl, {
+    }), /*#__PURE__*/React.createElement(SelectControl, {
       label: __('Buttons', 'frontblocks'),
       value: frblButtons,
       options: [{
@@ -160,7 +371,7 @@ function addCustomCarouselPanel(BlockEdit) {
           frblButtons: value
         });
       }
-    }), frblButtons === 'arrows' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectControl, {
+    }), frblButtons === 'arrows' && /*#__PURE__*/React.createElement(SelectControl, {
       label: __('Buttons Position', 'frontblocks'),
       value: frblButtonsPosition,
       options: [{
@@ -175,7 +386,7 @@ function addCustomCarouselPanel(BlockEdit) {
           frblButtonsPosition: value
         });
       }
-    })), /*#__PURE__*/React.createElement(PanelColorSettings, {
+    }), /*#__PURE__*/React.createElement(PanelColorSettings, {
       title: __('Button Colors', 'frontblocks'),
       colorSettings: [{
         value: frblButtonColor,
diff --git a/assets/carousel/frontblocks-advanced-option.jsx b/assets/carousel/frontblocks-advanced-option.jsx
index 6bfd2ef..0647f2d 100644
--- a/assets/carousel/frontblocks-advanced-option.jsx
+++ b/assets/carousel/frontblocks-advanced-option.jsx
@@ -1,164 +1,383 @@
 // Add custom controls to the Advanced panel of GenerateBlocks Grid block
 const { addFilter } = wp.hooks;
-const { Fragment } = wp.element;
+const { Fragment, useEffect, useRef } = wp.element;
 const { InspectorControls, PanelColorSettings } = wp.blockEditor;
 const { SelectControl, TextControl, PanelBody, ToggleControl } = wp.components;
 const { __ } = wp.i18n;
 
-function addCustomCarouselPanel(BlockEdit) {
-	return (props) => {
-		// Support grid blocks, element blocks with grid display, and core/group blocks
-		if (props.name !== 'generateblocks/grid' && 
-		    props.name !== 'generateblocks/element' && 
-		    props.name !== 'core/group') {
-			return <BlockEdit {...props} />;
+/**
+ * Returns the document that renders block content.
+ * WordPress 6.x uses an <iframe> for the editor canvas.
+ */
+function getEditorDocument() {
+	const iframe = document.querySelector( 'iframe[name="editor-canvas"]' );
+	return ( iframe && iframe.contentDocument && iframe.contentDocument.body )
+		? iframe.contentDocument
+		: document;
+}
+
+/**
+ * Find the grid DOM element for a given block.
+ *
+ * KEY INSIGHT from inspecting the real DOM:
+ *   - For generateblocks/element (Grid): the [data-block] wrapper IS the
+ *     gb-element element.  Do NOT search inside – that returns a child item.
+ *   - For generateblocks/grid: look for .gb-grid-wrapper inside.
+ *   - For core/group: the [data-block] wrapper itself has is-layout-grid.
+ */
+function findGridEl( blockEl, name ) {
+	if ( name === 'generateblocks/element' ) {
+		return blockEl; // blockEl IS the gb-element grid
+	}
+	if ( name === 'generateblocks/grid' ) {
+		if ( blockEl.classList.contains( 'gb-grid-wrapper' ) ) return blockEl;
+		return blockEl.querySelector( '.gb-grid-wrapper' ) || null;
+	}
+	if ( name === 'core/group' ) {
+		if ( blockEl.classList.contains( 'is-layout-grid' ) ) return blockEl;
+		return blockEl.querySelector( '.is-layout-grid' ) || null;
+	}
+	return null;
+}
+
+function addCustomCarouselPanel( BlockEdit ) {
+	return ( props ) => {
+		if (
+			props.name !== 'generateblocks/grid' &&
+			props.name !== 'generateblocks/element' &&
+			props.name !== 'core/group'
+		) {
+			return <BlockEdit { ...props } />;
 		}
 
-		// For element blocks, only show carousel options if it has grid display
-		if (props.name === 'generateblocks/element') {
+		if ( props.name === 'generateblocks/element' ) {
 			const styles = props.attributes.styles || {};
-			if (styles.display !== 'grid') {
-				return <BlockEdit {...props} />;
+			if ( styles.display !== 'grid' ) {
+				return <BlockEdit { ...props } />;
 			}
 		}
 
-		// For core/group blocks, only show carousel options if it has grid layout
-		if (props.name === 'core/group') {
+		if ( props.name === 'core/group' ) {
 			const layout = props.attributes.layout || {};
-			if (layout.type !== 'grid') {
-				return <BlockEdit {...props} />;
+			if ( layout.type !== 'grid' ) {
+				return <BlockEdit { ...props } />;
 			}
 		}
 
-	const {
-			frblGridOption = 'none',
-			frblItemsToView = '4',
-			frblLaptopToView = '3',
-			frblTabletToView = '2',
+		const {
+			frblGridOption      = 'none',
+			frblItemsToView     = '4',
+			frblLaptopToView    = '3',
+			frblTabletToView    = '2',
 			frblResponsiveToView = '1',
-			frblAutoplay = '',
-			frblGap = '20',
-			frblButtons = 'arrows',
-			frblRewind = true,
+			frblAutoplay        = '',
+			frblGap             = '20',
+			frblButtons         = 'arrows',
+			frblRewind          = true,
 			frblButtonColor,
 			frblButtonBgColor,
 			frblButtonsPosition = 'side',
 			frblDisableOnDesktop = false,
-	} = props.attributes;
+		} = props.attributes;
+
+		// ── Editor carousel preview ──────────────────────────────────────────
+		const stateRef = useRef( null );
+
+		useEffect( () => {
+			let mounted = true;
+			let timer   = null;
+
+			function cleanup() {
+				if ( ! stateRef.current ) return;
+				const { originalParent, wrapper, gridEl, clones } = stateRef.current;
+				try {
+					// Remove clones first
+					( clones || [] ).forEach( ( c ) => c.parentNode && c.parentNode.removeChild( c ) );
+
+					if ( wrapper.parentNode ) {
+						originalParent.replaceChild( gridEl, wrapper );
+					}
+					// Remove ALL inline styles we added
+					[
+						'display', 'flex-wrap', 'gap',
+						'transition', 'will-change', 'transform',
+					].forEach( ( p ) => gridEl.style.removeProperty( p ) );
+
+					// Remove slide sizing from children
+					const uuidRe = /^[0-9a-f]{8}-[0-9a-f]{4}-/;
+					Array.from( gridEl.children )
+						.filter( ( el ) => uuidRe.test( el.dataset.block || '' ) )
+						.forEach( ( slide ) => {
+							slide.style.removeProperty( 'flex-shrink' );
+							slide.style.removeProperty( 'width' );
+							slide.style.removeProperty( 'min-width' );
+						} );
+				} catch ( e ) {}
+				stateRef.current = null;
+			}
+
+			function init() {
+				if ( ! mounted ) return;
+				cleanup();
+
+				const editorDoc = getEditorDocument();
+
+				// Both the outer root wrapper and the inner gb-element share the same
+				// data-block UUID in GenerateBlocks 2.x. Use data-type to select the
+				// correct inner element.
+				const blockEl = editorDoc.querySelector(
+					`[data-block="${ props.clientId }"][data-type="${ props.name }"]`
+				);
+				if ( ! blockEl ) return;
+
+				const gridEl = findGridEl( blockEl, props.name );
+				if ( ! gridEl || gridEl.closest( '.frbl-editor-carousel' ) ) return;
+
+				// Slides = direct children that are real blocks.
+				// Filter by UUID pattern to exclude block-list-appender (data-block="true").
+				const uuidRe = /^[0-9a-f]{8}-[0-9a-f]{4}-/;
+				const slides = Array.from( gridEl.children ).filter(
+					( el ) => uuidRe.test( el.dataset.block || '' )
+				);
+				if ( slides.length === 0 ) return;
+
+				const perView = Math.max( 1, parseInt( frblItemsToView ) || 4 );
+				const gap     = Math.max( 0, parseInt( frblGap ) || 20 );
+
+				// ── Create the overflow:hidden wrapper ───────────────────────
+				const originalParent = gridEl.parentNode;
+				const wrapper        = editorDoc.createElement( 'div' );
+				wrapper.className    = 'frbl-editor-carousel';
+				originalParent.replaceChild( wrapper, gridEl );
+				wrapper.appendChild( gridEl );
+
+				// ── Apply flex layout to the grid element itself ─────────────
+				gridEl.style.display    = 'flex';
+				gridEl.style.flexWrap   = 'nowrap';
+				gridEl.style.gap        = gap + 'px';
+				gridEl.style.transition = 'transform 400ms ease';
+				gridEl.style.willChange = 'transform';
+
+				// ── Size each slide ──────────────────────────────────────────
+				const totalWidth = wrapper.offsetWidth || 600;
+				const slideWidth = Math.floor(
+					( totalWidth - gap * ( perView - 1 ) ) / perView
+				);
+
+				slides.forEach( ( slide ) => {
+					slide.style.flexShrink = '0';
+					slide.style.width      = slideWidth + 'px';
+					slide.style.minWidth   = slideWidth + 'px';
+				} );
+
+				// ── Trailing loop clones ─────────────────────────────────────
+				// Add perView clones from the start after the last real slide so
+				// the next-arrow transition looks smooth before snapping back.
+				const clones = [];
+				const directAppender = Array.from( gridEl.children ).find(
+					( c ) => c.classList.contains( 'block-list-appender' )
+				);
+				for ( let i = 0; i < perView; i++ ) {
+					const clone = slides[ i % slides.length ].cloneNode( true );
+					clone.removeAttribute( 'data-block' );
+					clone.setAttribute( 'aria-hidden', 'true' );
+					clone.classList.add( 'frbl-slide-clone' );
+					clone.style.flexShrink    = '0';
+					clone.style.width         = slideWidth + 'px';
+					clone.style.minWidth      = slideWidth + 'px';
+					clone.style.pointerEvents = 'none';
+					gridEl.insertBefore( clone, directAppender || null );
+					clones.push( clone );
+				}
+
+				// ── Slide navigation (infinite loop) ─────────────────────────
+				let idx     = 0;
+				let looping = false;
+
+				function slideTo( n ) {
+					if ( looping ) return;
+
+					if ( n < 0 ) {
+						// Backwards wrap: jump to end of real slides silently, then animate back one.
+						gridEl.style.transition = 'none';
+						idx = slides.length;
+						gridEl.style.transform = `translateX(-${ idx * ( slideWidth + gap ) }px)`;
+						void gridEl.offsetWidth; // force reflow
+						gridEl.style.transition = 'transform 400ms ease';
+						idx = slides.length - 1;
+						gridEl.style.transform = `translateX(-${ idx * ( slideWidth + gap ) }px)`;
+						return;
+					}
+
+					idx = n;
+					gridEl.style.transform = `translateX(-${ idx * ( slideWidth + gap ) }px)`;
+
+					// After animating into the trailing clones zone, silently snap back to real position.
+					if ( idx >= slides.length ) {
+						looping = true;
+						setTimeout( () => {
+							gridEl.style.transition = 'none';
+							idx = idx % slides.length;
+							gridEl.style.transform = `translateX(-${ idx * ( slideWidth + gap ) }px)`;
+							void gridEl.offsetWidth;
+							gridEl.style.transition = 'transform 400ms ease';
+							looping = false;
+						}, 420 );
+					}
+				}
+
+				// ── Badge ────────────────────────────────────────────────────
+				const badge       = editorDoc.createElement( 'div' );
+				badge.className   = 'frbl-editor-badge';
+				badge.textContent = '🎠 Carousel Preview';
+				wrapper.appendChild( badge );
+
+				// ── Arrows ───────────────────────────────────────────────────
+				const btnColor = frblButtonColor   || '#fff';
+				const btnBg    = frblButtonBgColor || 'rgba(0,0,0,0.45)';
+
+				[ 'prev', 'next' ].forEach( ( dir ) => {
+					const btn   = editorDoc.createElement( 'button' );
+					btn.type    = 'button';
+					btn.className = `frbl-editor-arrow frbl-editor-arrow-${ dir }`;
+					btn.setAttribute( 'aria-label', dir === 'prev' ? 'Previous slide' : 'Next slide' );
+					btn.style.backgroundColor = btnBg;
+					const d = dir === 'prev' ? 'M6 1L1 6L6 11' : 'M1 11L6 6L1 1';
+					btn.innerHTML = `<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${ d }" stroke="${ btnColor }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+					btn.addEventListener( 'click', ( e ) => {
+						e.stopPropagation();
+						slideTo( dir === 'prev' ? idx - 1 : idx + 1 );
+					} );
+					wrapper.appendChild( btn );
+				} );
+
+				stateRef.current = { originalParent, wrapper, gridEl, clones };
+			}
+
+			if ( frblGridOption !== 'none' ) {
+				timer = setTimeout( init, 300 );
+			} else {
+				cleanup();
+			}
+
+			return () => {
+				mounted = false;
+				if ( timer ) clearTimeout( timer );
+				cleanup();
+			};
+		}, [
+			frblGridOption, frblItemsToView, frblGap,
+			frblButtonColor, frblButtonBgColor, props.clientId,
+		] );
+		// ── Inspector panel ──────────────────────────────────────────────────
 
 		return (
 			<Fragment>
-				<BlockEdit {...props} />
+				<BlockEdit { ...props } />
 				<InspectorControls>
 					<PanelBody
-						title={__('Carousel Settings', 'frontblocks')}
-						initialOpen={true}
+						title={ __( 'Carousel Settings', 'frontblocks' ) }
+						initialOpen={ true }
 					>
-					<SelectControl
-						label={__('FrontBlocks Grid Option', 'frontblocks')}
-						value={frblGridOption}
-						options={[
-							{ label: __('None', 'frontblocks'), value: 'none' },
-							{ label: __('Carousel', 'frontblocks'), value: 'carousel' },
-							{ label: __('Slider', 'frontblocks'), value: 'slider' }
-						]}
-						onChange={(value) => {
-							props.setAttributes({ frblGridOption: value });
-						}}
-						help={__('This option gives the option to make carousel in your grid block.', 'frontblocks')}
-				/>
-				{frblGridOption !== 'none' && (
-					<>
-					<TextControl
-						label={__('Items to view (Desktop)', 'frontblocks')}
-						value={frblItemsToView}
-						onChange={(value) => props.setAttributes({ frblItemsToView: value })}
-						help={__('Number of items to show on desktop (>1200px)', 'frontblocks')}
-					/>
-					<TextControl
-						label={__('Items to view (Laptop)', 'frontblocks')}
-						value={frblLaptopToView}
-						onChange={(value) => props.setAttributes({ frblLaptopToView: value })}
-						help={__('Number of items to show on laptop (992px-1199px)', 'frontblocks')}
-					/>
-					<TextControl
-						label={__('Items to view (Tablet)', 'frontblocks')}
-						value={frblTabletToView}
-						onChange={(value) => props.setAttributes({ frblTabletToView: value })}
-						help={__('Number of items to show on tablet (768px-991px)', 'frontblocks')}
-					/>
-					<TextControl
-						label={__('Items to view (Mobile)', 'frontblocks')}
-						value={frblResponsiveToView}
-						onChange={(value) => props.setAttributes({ frblResponsiveToView: value })}
-						help={__('Number of items to show on mobile (<768px)', 'frontblocks')}
-				/>
-					<TextControl
-						label={__('Autoplay (seconds)', 'frontblocks')}
-						value={frblAutoplay}
-						onChange={(value) => props.setAttributes({ frblAutoplay: value })}
-					/>
-					<TextControl
-						label={__('Gap (px)', 'frontblocks')}
-						value={frblGap}
-						onChange={(value) => props.setAttributes({ frblGap: value })}
-						help={__('Space between slides in pixels. Leave empty for 20.', 'frontblocks')}
-					/>
-					{frblGridOption === 'slider' && (
-						<>
-							<ToggleControl
-								label={__('Rewind', 'frontblocks')}
-								checked={frblRewind}
-								onChange={(value) => props.setAttributes({ frblRewind: value })}
-							/>
-						</>
-				)}
-					<SelectControl
-						label={__('Buttons', 'frontblocks')}
-						value={frblButtons}
-						options={[
-							{ label: __('None', 'frontblocks'), value: 'none' },
-							{ label: __('Bullets', 'frontblocks'), value: 'bullets' },
-							{ label: __('Arrows', 'frontblocks'), value: 'arrows' }
-						]}
-						onChange={(value) => props.setAttributes({ frblButtons: value })}
-					/>
-					{frblButtons === 'arrows' && (
-						<>
-							<SelectControl
-								label={__('Buttons Position', 'frontblocks')}
-								value={frblButtonsPosition}
-								options={[
-									{ label: __('Side', 'frontblocks'), value: 'side' },
-									{ label: __('Bottom', 'frontblocks'), value: 'bottom' },
-								]}
-								onChange={(value) => props.setAttributes({ frblButtonsPosition: value })}
-							/>
-						</>
-				)}
-					<PanelColorSettings
-						title={__('Button Colors', 'frontblocks')}
-						colorSettings={[
-							{
-								value: frblButtonColor,
-								onChange: (color) => props.setAttributes({ frblButtonColor: color }),
-								label: __('Color button', 'frontblocks'),
-							},
-							{
-								value: frblButtonBgColor,
-								onChange: (color) => props.setAttributes({ frblButtonBgColor: color }),
-								label: __('Color background button', 'frontblocks'),
-							},
-					]}
-					/>
-					<ToggleControl
-						label={__('Disable on Desktop', 'frontblocks')}
-						checked={frblDisableOnDesktop}
-						onChange={(value) => props.setAttributes({ frblDisableOnDesktop: value })}
-						help={__('If enabled, carousel/slider will only work on mobile devices.', 'frontblocks')}
-					/>
-					</>
-				)}
+						<SelectControl
+							label={ __( 'FrontBlocks Grid Option', 'frontblocks' ) }
+							value={ frblGridOption }
+							options={ [
+								{ label: __( 'None',     'frontblocks' ), value: 'none'     },
+								{ label: __( 'Carousel', 'frontblocks' ), value: 'carousel' },
+								{ label: __( 'Slider',   'frontblocks' ), value: 'slider'   },
+							] }
+							onChange={ ( value ) => props.setAttributes( { frblGridOption: value } ) }
+							help={ __( 'This option gives the option to make carousel in your grid block.', 'frontblocks' ) }
+						/>
+						{ frblGridOption !== 'none' && (
+							<>
+								<TextControl
+									label={ __( 'Items to view (Desktop)', 'frontblocks' ) }
+									value={ frblItemsToView }
+									onChange={ ( value ) => props.setAttributes( { frblItemsToView: value } ) }
+									help={ __( 'Number of items to show on desktop (>1200px)', 'frontblocks' ) }
+								/>
+								<TextControl
+									label={ __( 'Items to view (Laptop)', 'frontblocks' ) }
+									value={ frblLaptopToView }
+									onChange={ ( value ) => props.setAttributes( { frblLaptopToView: value } ) }
+									help={ __( 'Number of items to show on laptop (992px-1199px)', 'frontblocks' ) }
+								/>
+								<TextControl
+									label={ __( 'Items to view (Tablet)', 'frontblocks' ) }
+									value={ frblTabletToView }
+									onChange={ ( value ) => props.setAttributes( { frblTabletToView: value } ) }
+									help={ __( 'Number of items to show on tablet (768px-991px)', 'frontblocks' ) }
+								/>
+								<TextControl
+									label={ __( 'Items to view (Mobile)', 'frontblocks' ) }
+									value={ frblResponsiveToView }
+									onChange={ ( value ) => props.setAttributes( { frblResponsiveToView: value } ) }
+									help={ __( 'Number of items to show on mobile (<768px)', 'frontblocks' ) }
+								/>
+								<TextControl
+									label={ __( 'Autoplay (seconds)', 'frontblocks' ) }
+									value={ frblAutoplay }
+									onChange={ ( value ) => props.setAttributes( { frblAutoplay: value } ) }
+								/>
+								<TextControl
+									label={ __( 'Gap (px)', 'frontblocks' ) }
+									value={ frblGap }
+									onChange={ ( value ) => props.setAttributes( { frblGap: value } ) }
+									help={ __( 'Space between slides in pixels. Leave empty for 20.', 'frontblocks' ) }
+								/>
+								{ frblGridOption === 'slider' && (
+									<ToggleControl
+										label={ __( 'Rewind', 'frontblocks' ) }
+										checked={ frblRewind }
+										onChange={ ( value ) => props.setAttributes( { frblRewind: value } ) }
+									/>
+								) }
+								<SelectControl
+									label={ __( 'Buttons', 'frontblocks' ) }
+									value={ frblButtons }
+									options={ [
+										{ label: __( 'None',    'frontblocks' ), value: 'none'    },
+										{ label: __( 'Bullets', 'frontblocks' ), value: 'bullets' },
+										{ label: __( 'Arrows',  'frontblocks' ), value: 'arrows'  },
+									] }
+									onChange={ ( value ) => props.setAttributes( { frblButtons: value } ) }
+								/>
+								{ frblButtons === 'arrows' && (
+									<SelectControl
+										label={ __( 'Buttons Position', 'frontblocks' ) }
+										value={ frblButtonsPosition }
+										options={ [
+											{ label: __( 'Side',   'frontblocks' ), value: 'side'   },
+											{ label: __( 'Bottom', 'frontblocks' ), value: 'bottom' },
+										] }
+										onChange={ ( value ) => props.setAttributes( { frblButtonsPosition: value } ) }
+									/>
+								) }
+								<PanelColorSettings
+									title={ __( 'Button Colors', 'frontblocks' ) }
+									colorSettings={ [
+										{
+											value:    frblButtonColor,
+											onChange: ( color ) => props.setAttributes( { frblButtonColor: color } ),
+											label:    __( 'Color button', 'frontblocks' ),
+										},
+										{
+											value:    frblButtonBgColor,
+											onChange: ( color ) => props.setAttributes( { frblButtonBgColor: color } ),
+											label:    __( 'Color background button', 'frontblocks' ),
+										},
+									] }
+								/>
+								<ToggleControl
+									label={ __( 'Disable on Desktop', 'frontblocks' ) }
+									checked={ frblDisableOnDesktop }
+									onChange={ ( value ) => props.setAttributes( { frblDisableOnDesktop: value } ) }
+									help={ __( 'If enabled, carousel/slider will only work on mobile devices.', 'frontblocks' ) }
+								/>
+							</>
+						) }
 					</PanelBody>
 				</InspectorControls>
 			</Fragment>
@@ -167,7 +386,7 @@ function addCustomCarouselPanel(BlockEdit) {
 }
 
 addFilter(
-    'editor.BlockEdit',
-    'frontblocks/gb-grid-carousel-panel',
-    addCustomCarouselPanel
-);
\ No newline at end of file
+	'editor.BlockEdit',
+	'frontblocks/gb-grid-carousel-panel',
+	addCustomCarouselPanel
+);
diff --git a/assets/carousel/frontblocks-carousel-editor.css b/assets/carousel/frontblocks-carousel-editor.css
new file mode 100644
index 0000000..9e59901
--- /dev/null
+++ b/assets/carousel/frontblocks-carousel-editor.css
@@ -0,0 +1,52 @@
+/* Editor-only carousel preview styles */
+
+.frbl-editor-carousel {
+	position: relative;
+	overflow: hidden;
+	width: 100%;
+}
+
+/* Badge */
+.frbl-editor-badge {
+	position: absolute;
+	top: 6px;
+	left: 8px;
+	background: rgba(0, 0, 0, 0.55);
+	color: #fff;
+	font-size: 11px;
+	line-height: 1;
+	padding: 4px 8px;
+	border-radius: 4px;
+	pointer-events: none;
+	z-index: 10;
+}
+
+/* Navigation arrows */
+.frbl-editor-arrow {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: 10;
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	border: none;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+	transition: opacity 0.2s;
+}
+
+.frbl-editor-arrow:hover {
+	opacity: 0.8;
+}
+
+.frbl-editor-arrow-prev {
+	left: 8px;
+}
+
+.frbl-editor-arrow-next {
+	right: 8px;
+}
diff --git a/includes/Frontend/Carousel.php b/includes/Frontend/Carousel.php
index 421afc3..e5320e6 100644
--- a/includes/Frontend/Carousel.php
+++ b/includes/Frontend/Carousel.php
@@ -33,12 +33,30 @@ public function __construct() {
 	 */
 	private function init_hooks() {
 		add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
+		add_action( 'enqueue_block_assets', array( $this, 'enqueue_block_canvas_assets' ) );
 		add_filter( 'render_block_generateblocks/grid', array( $this, 'add_custom_attributes_to_grid_block' ), 10, 2 );
 		add_filter( 'render_block_generateblocks/element', array( $this, 'add_custom_attributes_to_element_block' ), 10, 2 );
 		add_filter( 'render_block_core/group', array( $this, 'add_custom_attributes_to_core_group_block' ), 10, 2 );
 		add_action( 'init', array( $this, 'register_custom_attributes' ), 5 );
 	}
 
+	/**
+	 * Enqueue carousel CSS in the editor canvas (iframe).
+	 *
+	 * @return void
+	 */
+	public function enqueue_block_canvas_assets() {
+		if ( ! is_admin() ) {
+			return;
+		}
+		wp_enqueue_style(
+			'frontblocks-carousel-editor',
+			FRBL_PLUGIN_URL . 'assets/carousel/frontblocks-carousel-editor.css',
+			array(),
+			FRBL_VERSION
+		);
+	}
+
 	/**
 	 * Enqueue block editor assets.
 	 *

From 5299aa38459d887cedb4c7079380d98a587cc41b Mon Sep 17 00:00:00 2001
From: castellon <alexcastellon077@gmail.com>
Date: Fri, 27 Feb 2026 10:38:28 +0100
Subject: [PATCH 2/4] Fix in native blocks

---
 .../carousel/frontblocks-advanced-option.js   | 75 +++++++++++++------
 .../carousel/frontblocks-advanced-option.jsx  | 63 ++++++++++------
 .../carousel/frontblocks-carousel-editor.css  | 14 ----
 3 files changed, 90 insertions(+), 62 deletions(-)

diff --git a/assets/carousel/frontblocks-advanced-option.js b/assets/carousel/frontblocks-advanced-option.js
index c0de668..394187a 100644
--- a/assets/carousel/frontblocks-advanced-option.js
+++ b/assets/carousel/frontblocks-advanced-option.js
@@ -1,5 +1,8 @@
 "use strict";
 
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 // Add custom controls to the Advanced panel of GenerateBlocks Grid block
 var addFilter = wp.hooks.addFilter;
 var _wp$element = wp.element,
@@ -24,27 +27,56 @@ function getEditorDocument() {
   var iframe = document.querySelector('iframe[name="editor-canvas"]');
   return iframe && iframe.contentDocument && iframe.contentDocument.body ? iframe.contentDocument : document;
 }
+var UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-/;
+
+/**
+ * Walk an element's subtree to find the container whose DIRECT children
+ * are actual blocks (UUID data-block).  Stops at depth 4.
+ */
+function findSlidesParent(el, depth) {
+  if (depth === 0) return null;
+  if (Array.from(el.children).some(function (c) {
+    return UUID_RE.test(c.dataset.block || '');
+  })) {
+    return el;
+  }
+  var _iterator = _createForOfIteratorHelper(el.children),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var child = _step.value;
+      var found = findSlidesParent(child, depth - 1);
+      if (found) return found;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return null;
+}
 
 /**
  * Find the grid DOM element for a given block.
  *
- * KEY INSIGHT from inspecting the real DOM:
- *   - For generateblocks/element (Grid): the [data-block] wrapper IS the
- *     gb-element element.  Do NOT search inside – that returns a child item.
- *   - For generateblocks/grid: look for .gb-grid-wrapper inside.
- *   - For core/group: the [data-block] wrapper itself has is-layout-grid.
+ * For generateblocks/element: [data-block][data-type] IS the gb-element.
+ *   Do NOT search inside – that returns a child item.
+ * For generateblocks/grid:  look for .gb-grid-wrapper inside.
+ * For core/group: walk the subtree to find the element whose children
+ *   are the real blocks, because WP nests them differently across versions.
  */
 function findGridEl(blockEl, name) {
   if (name === 'generateblocks/element') {
-    return blockEl; // blockEl IS the gb-element grid
+    return blockEl;
   }
   if (name === 'generateblocks/grid') {
     if (blockEl.classList.contains('gb-grid-wrapper')) return blockEl;
-    return blockEl.querySelector('.gb-grid-wrapper') || null;
+    var grid = blockEl.querySelector('.gb-grid-wrapper');
+    return grid || null;
   }
   if (name === 'core/group') {
-    if (blockEl.classList.contains('is-layout-grid')) return blockEl;
-    return blockEl.querySelector('.is-layout-grid') || null;
+    // Walk up to 4 levels deep to find where the child blocks live.
+    return findSlidesParent(blockEl, 4) || blockEl;
   }
   return null;
 }
@@ -117,9 +149,8 @@ function addCustomCarouselPanel(BlockEdit) {
           });
 
           // Remove slide sizing from children
-          var uuidRe = /^[0-9a-f]{8}-[0-9a-f]{4}-/;
           Array.from(gridEl.children).filter(function (el) {
-            return uuidRe.test(el.dataset.block || '');
+            return UUID_RE.test(el.dataset.block || '');
           }).forEach(function (slide) {
             slide.style.removeProperty('flex-shrink');
             slide.style.removeProperty('width');
@@ -133,19 +164,21 @@ function addCustomCarouselPanel(BlockEdit) {
         cleanup();
         var editorDoc = getEditorDocument();
 
-        // Both the outer root wrapper and the inner gb-element share the same
-        // data-block UUID in GenerateBlocks 2.x. Use data-type to select the
-        // correct inner element.
+        // GB 2.x wraps blocks in a root element that shares the same data-block UUID.
+        // Using data-type ensures we pick the inner element that actually IS the block.
+        // For native blocks (core/group) there is no double-wrapper, so the fallback
+        // to plain [data-block] is safe.
         var blockEl = editorDoc.querySelector("[data-block=\"".concat(props.clientId, "\"][data-type=\"").concat(props.name, "\"]"));
+        if (!blockEl) {
+          blockEl = editorDoc.querySelector("[data-block=\"".concat(props.clientId, "\"]"));
+        }
         if (!blockEl) return;
         var gridEl = findGridEl(blockEl, props.name);
         if (!gridEl || gridEl.closest('.frbl-editor-carousel')) return;
 
-        // Slides = direct children that are real blocks.
-        // Filter by UUID pattern to exclude block-list-appender (data-block="true").
-        var uuidRe = /^[0-9a-f]{8}-[0-9a-f]{4}-/;
+        // Slides = direct children that are real blocks (UUID data-block).
         var slides = Array.from(gridEl.children).filter(function (el) {
-          return uuidRe.test(el.dataset.block || '');
+          return UUID_RE.test(el.dataset.block || '');
         });
         if (slides.length === 0) return;
         var perView = Math.max(1, parseInt(frblItemsToView) || 4);
@@ -227,12 +260,6 @@ function addCustomCarouselPanel(BlockEdit) {
           }
         }
 
-        // ── Badge ────────────────────────────────────────────────────
-        var badge = editorDoc.createElement('div');
-        badge.className = 'frbl-editor-badge';
-        badge.textContent = '🎠 Carousel Preview';
-        wrapper.appendChild(badge);
-
         // ── Arrows ───────────────────────────────────────────────────
         var btnColor = frblButtonColor || '#fff';
         var btnBg = frblButtonBgColor || 'rgba(0,0,0,0.45)';
diff --git a/assets/carousel/frontblocks-advanced-option.jsx b/assets/carousel/frontblocks-advanced-option.jsx
index 0647f2d..e42ed58 100644
--- a/assets/carousel/frontblocks-advanced-option.jsx
+++ b/assets/carousel/frontblocks-advanced-option.jsx
@@ -16,26 +16,45 @@ function getEditorDocument() {
 		: document;
 }
 
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-/;
+
+/**
+ * Walk an element's subtree to find the container whose DIRECT children
+ * are actual blocks (UUID data-block).  Stops at depth 4.
+ */
+function findSlidesParent( el, depth ) {
+	if ( depth === 0 ) return null;
+	if ( Array.from( el.children ).some( ( c ) => UUID_RE.test( c.dataset.block || '' ) ) ) {
+		return el;
+	}
+	for ( const child of el.children ) {
+		const found = findSlidesParent( child, depth - 1 );
+		if ( found ) return found;
+	}
+	return null;
+}
+
 /**
  * Find the grid DOM element for a given block.
  *
- * KEY INSIGHT from inspecting the real DOM:
- *   - For generateblocks/element (Grid): the [data-block] wrapper IS the
- *     gb-element element.  Do NOT search inside – that returns a child item.
- *   - For generateblocks/grid: look for .gb-grid-wrapper inside.
- *   - For core/group: the [data-block] wrapper itself has is-layout-grid.
+ * For generateblocks/element: [data-block][data-type] IS the gb-element.
+ *   Do NOT search inside – that returns a child item.
+ * For generateblocks/grid:  look for .gb-grid-wrapper inside.
+ * For core/group: walk the subtree to find the element whose children
+ *   are the real blocks, because WP nests them differently across versions.
  */
 function findGridEl( blockEl, name ) {
 	if ( name === 'generateblocks/element' ) {
-		return blockEl; // blockEl IS the gb-element grid
+		return blockEl;
 	}
 	if ( name === 'generateblocks/grid' ) {
 		if ( blockEl.classList.contains( 'gb-grid-wrapper' ) ) return blockEl;
-		return blockEl.querySelector( '.gb-grid-wrapper' ) || null;
+		const grid = blockEl.querySelector( '.gb-grid-wrapper' );
+		return grid || null;
 	}
 	if ( name === 'core/group' ) {
-		if ( blockEl.classList.contains( 'is-layout-grid' ) ) return blockEl;
-		return blockEl.querySelector( '.is-layout-grid' ) || null;
+		// Walk up to 4 levels deep to find where the child blocks live.
+		return findSlidesParent( blockEl, 4 ) || blockEl;
 	}
 	return null;
 }
@@ -104,9 +123,8 @@ function addCustomCarouselPanel( BlockEdit ) {
 					].forEach( ( p ) => gridEl.style.removeProperty( p ) );
 
 					// Remove slide sizing from children
-					const uuidRe = /^[0-9a-f]{8}-[0-9a-f]{4}-/;
 					Array.from( gridEl.children )
-						.filter( ( el ) => uuidRe.test( el.dataset.block || '' ) )
+						.filter( ( el ) => UUID_RE.test( el.dataset.block || '' ) )
 						.forEach( ( slide ) => {
 							slide.style.removeProperty( 'flex-shrink' );
 							slide.style.removeProperty( 'width' );
@@ -122,22 +140,24 @@ function addCustomCarouselPanel( BlockEdit ) {
 
 				const editorDoc = getEditorDocument();
 
-				// Both the outer root wrapper and the inner gb-element share the same
-				// data-block UUID in GenerateBlocks 2.x. Use data-type to select the
-				// correct inner element.
-				const blockEl = editorDoc.querySelector(
+				// GB 2.x wraps blocks in a root element that shares the same data-block UUID.
+				// Using data-type ensures we pick the inner element that actually IS the block.
+				// For native blocks (core/group) there is no double-wrapper, so the fallback
+				// to plain [data-block] is safe.
+				let blockEl = editorDoc.querySelector(
 					`[data-block="${ props.clientId }"][data-type="${ props.name }"]`
 				);
+				if ( ! blockEl ) {
+					blockEl = editorDoc.querySelector( `[data-block="${ props.clientId }"]` );
+				}
 				if ( ! blockEl ) return;
 
 				const gridEl = findGridEl( blockEl, props.name );
 				if ( ! gridEl || gridEl.closest( '.frbl-editor-carousel' ) ) return;
 
-				// Slides = direct children that are real blocks.
-				// Filter by UUID pattern to exclude block-list-appender (data-block="true").
-				const uuidRe = /^[0-9a-f]{8}-[0-9a-f]{4}-/;
+				// Slides = direct children that are real blocks (UUID data-block).
 				const slides = Array.from( gridEl.children ).filter(
-					( el ) => uuidRe.test( el.dataset.block || '' )
+					( el ) => UUID_RE.test( el.dataset.block || '' )
 				);
 				if ( slides.length === 0 ) return;
 
@@ -226,11 +246,6 @@ function addCustomCarouselPanel( BlockEdit ) {
 					}
 				}
 
-				// ── Badge ────────────────────────────────────────────────────
-				const badge       = editorDoc.createElement( 'div' );
-				badge.className   = 'frbl-editor-badge';
-				badge.textContent = '🎠 Carousel Preview';
-				wrapper.appendChild( badge );
 
 				// ── Arrows ───────────────────────────────────────────────────
 				const btnColor = frblButtonColor   || '#fff';
diff --git a/assets/carousel/frontblocks-carousel-editor.css b/assets/carousel/frontblocks-carousel-editor.css
index 9e59901..bb70eaf 100644
--- a/assets/carousel/frontblocks-carousel-editor.css
+++ b/assets/carousel/frontblocks-carousel-editor.css
@@ -6,20 +6,6 @@
 	width: 100%;
 }
 
-/* Badge */
-.frbl-editor-badge {
-	position: absolute;
-	top: 6px;
-	left: 8px;
-	background: rgba(0, 0, 0, 0.55);
-	color: #fff;
-	font-size: 11px;
-	line-height: 1;
-	padding: 4px 8px;
-	border-radius: 4px;
-	pointer-events: none;
-	z-index: 10;
-}
 
 /* Navigation arrows */
 .frbl-editor-arrow {

From bda035a2ad0bbf4d3c813fac60b85ef609139575 Mon Sep 17 00:00:00 2001
From: castellon <alexcastellon077@gmail.com>
Date: Fri, 27 Feb 2026 11:43:06 +0100
Subject: [PATCH 3/4] Fix problems

---
 assets/admin/settings.css                     | 596 ++----------------
 .../carousel/frontblocks-advanced-option.js   | 217 ++++---
 .../carousel/frontblocks-advanced-option.jsx  | 260 ++++----
 .../carousel/frontblocks-carousel-editor.css  |  26 +-
 assets/carousel/frontblocks-carousel.css      |  12 +
 .../frontblocks-shape-animation-option.js     | 123 +---
 6 files changed, 344 insertions(+), 890 deletions(-)

diff --git a/assets/admin/settings.css b/assets/admin/settings.css
index f7bc5b5..b7dfb3b 100644
--- a/assets/admin/settings.css
+++ b/assets/admin/settings.css
@@ -520,6 +520,9 @@ video {
 .frbl-settings-wrapper .tw--ml-1 {
   margin-left: -0.25rem;
 }
+.frbl-settings-wrapper .tw-mb-0 {
+  margin-bottom: 0px;
+}
 .frbl-settings-wrapper .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -529,24 +532,24 @@ video {
 .frbl-settings-wrapper .tw-mb-8 {
   margin-bottom: 2rem;
 }
-.frbl-settings-wrapper .tw-ml-2 {
-  margin-left: 0.5rem;
-}
 .frbl-settings-wrapper .tw-ml-3 {
   margin-left: 0.75rem;
 }
-.frbl-settings-wrapper .tw-ml-auto {
-  margin-left: auto;
-}
 .frbl-settings-wrapper .tw-mr-2 {
   margin-right: 0.5rem;
 }
-.frbl-settings-wrapper .tw-mt-1 {
-  margin-top: 0.25rem;
+.frbl-settings-wrapper .tw-mt-0 {
+  margin-top: 0px;
 }
 .frbl-settings-wrapper .tw-mt-2 {
   margin-top: 0.5rem;
 }
+.frbl-settings-wrapper .tw-mt-4 {
+  margin-top: 1rem;
+}
+.frbl-settings-wrapper .tw-mt-6 {
+  margin-top: 1.5rem;
+}
 .frbl-settings-wrapper .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -574,15 +577,12 @@ video {
 .frbl-settings-wrapper .tw-max-w-5xl {
   max-width: 64rem;
 }
+.frbl-settings-wrapper .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .frbl-settings-wrapper .tw-flex-shrink-0 {
   flex-shrink: 0;
 }
-.frbl-settings-wrapper .tw-flex-grow {
-  flex-grow: 1;
-}
-.frbl-settings-wrapper .tw-items-start {
-  align-items: flex-start;
-}
 .frbl-settings-wrapper .tw-items-center {
   align-items: center;
 }
@@ -592,24 +592,19 @@ video {
 .frbl-settings-wrapper .tw-gap-2 {
   gap: 0.5rem;
 }
-.frbl-settings-wrapper .tw-gap-3 {
-  gap: 0.75rem;
-}
 .frbl-settings-wrapper :is(.tw-space-x-2 > :not([hidden]) ~ :not([hidden])) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.frbl-settings-wrapper :is(.tw-space-y-4 > :not([hidden]) ~ :not([hidden])) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
 .frbl-settings-wrapper :is(.tw-space-y-6 > :not([hidden]) ~ :not([hidden])) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
+.frbl-settings-wrapper .tw-overflow-auto {
+  overflow: auto;
+}
 .frbl-settings-wrapper .tw-overflow-hidden {
   overflow: hidden;
 }
@@ -646,24 +641,16 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
-.frbl-settings-wrapper .tw-border-green-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
-}
 .frbl-settings-wrapper .tw-border-red-200 {
   --tw-border-opacity: 1;
   border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
 }
-.frbl-settings-wrapper .tw-border-red-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
-}
 .frbl-settings-wrapper .tw-border-transparent {
   border-color: transparent;
 }
-.frbl-settings-wrapper .tw-border-yellow-300 {
+.frbl-settings-wrapper .tw-border-yellow-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
+  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
 }
 .frbl-settings-wrapper .tw-border-yellow-400 {
   --tw-border-opacity: 1;
@@ -677,10 +664,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
-.frbl-settings-wrapper .tw-bg-green-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
-}
 .frbl-settings-wrapper .tw-bg-primary-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(228 230 253 / var(--tw-bg-opacity, 1));
@@ -689,10 +672,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(104 125 249 / var(--tw-bg-opacity, 1));
 }
-.frbl-settings-wrapper .tw-bg-red-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
-}
 .frbl-settings-wrapper .tw-bg-red-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
@@ -701,10 +680,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
-.frbl-settings-wrapper .tw-bg-yellow-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
-}
 .frbl-settings-wrapper .tw-bg-yellow-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
@@ -720,12 +695,12 @@ video {
 .frbl-settings-wrapper .tw-to-white {
   --tw-gradient-to: #fff var(--tw-gradient-to-position);
 }
-.frbl-settings-wrapper .tw-p-3 {
-  padding: 0.75rem;
-}
 .frbl-settings-wrapper .tw-p-4 {
   padding: 1rem;
 }
+.frbl-settings-wrapper .tw-p-6 {
+  padding: 1.5rem;
+}
 .frbl-settings-wrapper .tw-px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -742,6 +717,10 @@ video {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.frbl-settings-wrapper .tw-py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
 .frbl-settings-wrapper .tw-py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -754,15 +733,16 @@ video {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
-.frbl-settings-wrapper .tw-pr-4 {
-  padding-right: 1rem;
-}
 .frbl-settings-wrapper .tw-pt-6 {
   padding-top: 1.5rem;
 }
 .frbl-settings-wrapper .tw-text-center {
   text-align: center;
 }
+.frbl-settings-wrapper .tw-text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .frbl-settings-wrapper .tw-text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -771,6 +751,10 @@ video {
   font-size: 1rem;
   line-height: 1.5rem;
 }
+.frbl-settings-wrapper .tw-text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
 .frbl-settings-wrapper .tw-text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -808,13 +792,13 @@ video {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
-.frbl-settings-wrapper .tw-text-gray-900 {
+.frbl-settings-wrapper .tw-text-gray-700 {
   --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
-.frbl-settings-wrapper .tw-text-green-800 {
+.frbl-settings-wrapper .tw-text-gray-900 {
   --tw-text-opacity: 1;
-  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
 .frbl-settings-wrapper .tw-text-primary-500 {
   --tw-text-opacity: 1;
@@ -828,10 +812,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity, 1));
 }
-.frbl-settings-wrapper .tw-text-red-800 {
-  --tw-text-opacity: 1;
-  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
-}
 .frbl-settings-wrapper .tw-text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -844,19 +824,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(161 98 7 / var(--tw-text-opacity, 1));
 }
-.frbl-settings-wrapper .tw-text-yellow-800 {
-  --tw-text-opacity: 1;
-  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
-}
 .frbl-settings-wrapper .tw-underline {
   text-decoration-line: underline;
 }
-.frbl-settings-wrapper .tw-no-underline {
-  text-decoration-line: none;
-}
-.frbl-settings-wrapper .tw-opacity-50 {
-  opacity: 0.5;
-}
 .frbl-settings-wrapper .tw-shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1051,10 +1021,6 @@ video {
     margin-bottom: calc(1rem * var(--tw-space-y-reverse));
   }
 }
-.frbl-settings-wrapper .hover\:tw-bg-primary-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(205 208 251 / var(--tw-bg-opacity, 1));
-}
 .frbl-settings-wrapper .hover\:tw-bg-primary-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(85 101 237 / var(--tw-bg-opacity, 1));
@@ -1063,9 +1029,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(85 101 237 / var(--tw-text-opacity, 1));
 }
-.frbl-settings-wrapper .hover\:tw-no-underline:hover {
-  text-decoration-line: none;
-}
 .frbl-settings-wrapper .focus\:tw-border-transparent:focus {
   border-color: transparent;
 }
@@ -1100,486 +1063,3 @@ video {
   }
 }
 
-/* Custom styles for license fields */
-.frbl-settings-wrapper .tw-text-base:not(button) {
-	font-size: 1rem;
-	line-height: 1.5rem;
-	width: 100%;
-}
-
-.frbl-settings-wrapper .tw-flex {
-	display: flex;
-	column-gap: 20px;
-}
-
-/* Submit button width */
-.frbl-settings-wrapper .tw-w-1\/2 {
-	width: 50%;
-}
-
-/* Features Grid Layout */
-.frbl-section-wrapper {
-	margin-bottom: 3rem;
-}
-
-.frbl-features-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-	gap: 1.25rem;
-}
-
-/* Feature Card Styles */
-.frbl-feature-card {
-	position: relative;
-	background: #ffffff;
-	border: 1px solid #e5e7eb;
-	border-radius: 12px;
-	padding: 1.5rem;
-	transition: all 0.2s ease;
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-	min-height: 80px;
-}
-
-.frbl-feature-card:hover {
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-	transform: translateY(-2px);
-	border-color: #687df9;
-}
-
-/* PRO Badge */
-.frbl-pro-badge {
-	position: absolute;
-	top: 0;
-	left: 0;
-	background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
-	color: #ffffff;
-	font-size: 0.625rem;
-	font-weight: 700;
-	letter-spacing: 0.05em;
-	padding: 0.25rem 0.75rem;
-	border-radius: 0 0 12px 0;
-	box-shadow: 0 2px 4px rgba(236, 72, 153, 0.3);
-	z-index: 10;
-}
-
-/* Feature Card Content */
-.frbl-feature-content {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 1rem;
-	min-height: 3rem;
-}
-
-/* Feature Icon */
-.frbl-feature-icon {
-	flex-shrink: 0;
-	width: 2.5rem;
-	height: 2.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
-	border-radius: 10px;
-	color: #687df9;
-	transition: all 0.2s ease;
-}
-
-.frbl-feature-card:hover .frbl-feature-icon {
-	background: linear-gradient(135deg, #e0e3fc 0%, #d0d4fb 100%);
-	transform: scale(1.05);
-}
-
-.frbl-feature-icon svg {
-	width: 1.5rem;
-	height: 1.5rem;
-	stroke-width: 2;
-}
-
-/* Feature Info */
-.frbl-feature-info {
-	flex: 1;
-	min-width: 0;
-	display: flex;
-	align-items: center;
-}
-
-.frbl-feature-title {
-	font-size: 0.9375rem;
-	font-weight: 600;
-	color: #1f2937;
-	margin: 0;
-	line-height: 1.5;
-}
-
-.frbl-feature-description {
-	font-size: 0.8125rem;
-	color: #6b7280;
-	margin: 0.25rem 0 0 0;
-	line-height: 1.4;
-}
-
-/* Active Feature Cards */
-.frbl-feature-card.frbl-feature-active {
-	background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
-	border-color: #d1fae5;
-}
-
-.frbl-feature-card.frbl-feature-active:hover {
-	border-color: #10b981;
-}
-
-.frbl-feature-card.frbl-feature-active .frbl-feature-icon {
-	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
-	color: #10b981;
-}
-
-.frbl-feature-card.frbl-feature-active:hover .frbl-feature-icon {
-	background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
-}
-
-/* Active cards need vertical layout for description */
-.frbl-feature-card.frbl-feature-active .frbl-feature-info {
-	flex-direction: column;
-	align-items: flex-start;
-}
-
-/* Active cards don't have toggle, so don't use space-between */
-.frbl-feature-card.frbl-feature-active .frbl-feature-content {
-	justify-content: flex-start;
-}
-
-/* Feature Toggle */
-.frbl-feature-toggle {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-}
-
-/* PRO Card Styles */
-.frbl-feature-card.frbl-feature-pro {
-	background: linear-gradient(135deg, #ffffff 0%, #fef3f2 100%);
-	border-color: #fee2e2;
-}
-
-.frbl-feature-card.frbl-feature-pro:hover {
-	border-color: #ec4899;
-}
-
-.frbl-feature-card.frbl-feature-pro .frbl-feature-icon {
-	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
-	color: #ec4899;
-}
-
-.frbl-feature-card.frbl-feature-pro:hover .frbl-feature-icon {
-	background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
-}
-
-/* Disabled state for PRO features without license */
-.frbl-feature-card.frbl-feature-pro .frbl-toggle:has(input:disabled) {
-	opacity: 0.6;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-	.frbl-features-grid {
-		grid-template-columns: 1fr;
-	}
-	
-	.frbl-feature-card {
-		padding: 1.25rem;
-	}
-}
-
-@media (min-width: 768px) and (max-width: 1024px) {
-	.frbl-features-grid {
-		grid-template-columns: repeat(2, 1fr);
-	}
-}
-
-
-/* =============================================
-   License Management Styles (Complete & Independent)
-   Based on FormsCRM but standalone for FrontBlocks
-   ============================================= */
-
-/* License Wrapper - Grid Layout */
-.formscrm-license-wrapper {
-	display: grid;
-	grid-template-columns: 1fr 320px;
-	gap: 24px;
-	max-width: 1200px;
-	margin: 20px 0;
-}
-
-@media (max-width: 900px) {
-	.formscrm-license-wrapper {
-		grid-template-columns: 1fr;
-	}
-}
-
-/* Main Card */
-.formscrm-card {
-	background: #fff;
-	border: 1px solid #e5e7eb;
-	border-radius: 12px;
-	padding: 32px;
-	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-}
-
-.formscrm-card-header {
-	margin-bottom: 24px;
-	padding-bottom: 20px;
-	border-bottom: 1px solid #e5e7eb;
-}
-
-.formscrm-card-header h2 {
-	margin: 0 0 8px 0;
-	font-size: 1.5rem;
-	font-weight: 600;
-	color: #1f2937;
-}
-
-.formscrm-card-header p {
-	margin: 0;
-	color: #6b7280;
-	font-size: 0.875rem;
-}
-
-/* Form Elements */
-.formscrm-form-group {
-	margin-bottom: 24px;
-}
-
-.formscrm-label {
-	display: block;
-	font-weight: 600;
-	color: #374151;
-	margin-bottom: 8px;
-	font-size: 0.875rem;
-}
-
-.formscrm-input-group {
-	display: flex;
-	gap: 12px;
-	align-items: center;
-}
-
-.formscrm-input {
-	flex: 1;
-	padding: 12px 16px;
-	border: 1px solid #d1d5db;
-	border-radius: 8px;
-	font-size: 1rem;
-	transition: all 0.2s;
-	background: #fff;
-}
-
-.formscrm-input:focus {
-	outline: none;
-	border-color: #8b5cf6;
-	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
-}
-
-.formscrm-input[readonly] {
-	background: #f9fafb;
-	color: #6b7280;
-	cursor: not-allowed;
-}
-
-/* Deactivate Label */
-.formscrm-deactivate-label {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 12px 16px;
-	background: #fef2f2;
-	border: 1px solid #fecaca;
-	border-radius: 8px;
-	cursor: pointer;
-	transition: background 0.2s;
-	white-space: nowrap;
-}
-
-.formscrm-deactivate-label:hover {
-	background: #fee2e2;
-}
-
-.formscrm-deactivate-label input {
-	margin: 0;
-}
-
-.formscrm-deactivate-label span {
-	font-size: 0.875rem;
-	font-weight: 600;
-	color: #dc2626;
-}
-
-/* Help Text */
-.formscrm-help-text {
-	margin: 8px 0 0 0;
-	font-size: 0.75rem;
-	color: #9ca3af;
-}
-
-/* Status Box */
-.formscrm-status-box {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	padding: 14px 18px;
-	border-radius: 8px;
-	border: 2px solid;
-}
-
-.formscrm-status-active {
-	background: #dcfce7;
-	border-color: #86efac;
-	color: #166534;
-}
-
-.formscrm-status-expired {
-	background: #fee2e2;
-	border-color: #fca5a5;
-	color: #991b1b;
-}
-
-.formscrm-status-inactive {
-	background: #fef9c3;
-	border-color: #fde047;
-	color: #854d0e;
-}
-
-.formscrm-status-icon {
-	display: flex;
-	flex-shrink: 0;
-}
-
-.formscrm-icon,
-.fcod-icon {
-	width: 22px;
-	height: 22px;
-}
-
-.formscrm-status-text {
-	font-weight: 700;
-	font-size: 1rem;
-}
-
-/* Notices */
-.formscrm-notice {
-	padding: 14px 18px;
-	border-radius: 8px;
-	margin-bottom: 20px;
-}
-
-.formscrm-notice p {
-	margin: 0;
-	font-size: 0.875rem;
-	line-height: 1.5;
-}
-
-.formscrm-notice a {
-	font-weight: 600;
-	text-decoration: underline;
-}
-
-.formscrm-notice-info {
-	background: #f0f9ff;
-	border: 1px solid #bfdbfe;
-	color: #1e40af;
-}
-
-.formscrm-notice-info a {
-	color: #1d4ed8;
-}
-
-.formscrm-notice-error {
-	background: #fef2f2;
-	border: 1px solid #fecaca;
-	color: #991b1b;
-}
-
-.formscrm-notice-error a {
-	color: #dc2626;
-}
-
-/* Form Actions */
-.formscrm-form-actions {
-	margin-top: 24px;
-	padding-top: 24px;
-	border-top: 1px solid #e5e7eb;
-}
-
-/* Buttons - FrontBlocks Purple Style */
-.formscrm-button {
-	display: inline-flex;
-	align-items: center;
-	padding: 12px 24px;
-	border-radius: 8px;
-	font-size: 1rem;
-	font-weight: 600;
-	cursor: pointer;
-	transition: all 0.2s;
-	border: none;
-}
-
-.formscrm-button-primary {
-	background: #8b5cf6;
-	color: #fff;
-}
-
-.formscrm-button-primary:hover {
-	background: #7c3aed;
-	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-/* Info Card (Sidebar) */
-.formscrm-info-card {
-	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-	border: 1px solid #e2e8f0;
-	border-radius: 12px;
-	padding: 24px;
-	height: fit-content;
-}
-
-.formscrm-info-card h3 {
-	margin: 0 0 12px 0;
-	font-size: 1.125rem;
-	font-weight: 700;
-	color: #1e293b;
-}
-
-.formscrm-info-card p {
-	margin: 0 0 16px 0;
-	font-size: 0.875rem;
-	color: #64748b;
-	line-height: 1.5;
-}
-
-/* Benefits List */
-.formscrm-benefits-list {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-.formscrm-benefits-list li {
-	position: relative;
-	padding-left: 28px;
-	margin-bottom: 10px;
-	font-size: 0.875rem;
-	color: #475569;
-}
-
-.formscrm-benefits-list li::before {
-	content: "✓";
-	position: absolute;
-	left: 0;
-	top: 0;
-	color: #8b5cf6;
-	font-weight: 700;
-	font-size: 1.125rem;
-}
diff --git a/assets/carousel/frontblocks-advanced-option.js b/assets/carousel/frontblocks-advanced-option.js
index 394187a..9ace701 100644
--- a/assets/carousel/frontblocks-advanced-option.js
+++ b/assets/carousel/frontblocks-advanced-option.js
@@ -131,30 +131,38 @@ function addCustomCarouselPanel(BlockEdit) {
       function cleanup() {
         if (!stateRef.current) return;
         var _stateRef$current = stateRef.current,
-          originalParent = _stateRef$current.originalParent,
-          wrapper = _stateRef$current.wrapper,
           gridEl = _stateRef$current.gridEl,
-          clones = _stateRef$current.clones;
+          slides = _stateRef$current.slides,
+          spacer = _stateRef$current.spacer,
+          prevBtn = _stateRef$current.prevBtn,
+          nextBtn = _stateRef$current.nextBtn,
+          resizeObs = _stateRef$current.resizeObs,
+          scrollFn = _stateRef$current.scrollFn;
+
+        // Disconnect observer and scroll listener.
+        if (resizeObs) resizeObs.disconnect();
+        var editorDoc = getEditorDocument();
+        var editorScrollEl = editorDoc.documentElement || editorDoc.body;
+        if (scrollFn) editorScrollEl.removeEventListener('scroll', scrollFn, true);
+
+        // Remove arrows from outer window body (completely outside React).
+        [prevBtn, nextBtn].forEach(function (btn) {
+          if (btn && btn.parentNode) btn.parentNode.removeChild(btn);
+        });
+
+        // Remove right spacer element.
+        if (spacer && spacer.parentNode) spacer.parentNode.removeChild(spacer);
+
+        // Restore gridEl styles.
         try {
-          // Remove clones first
-          (clones || []).forEach(function (c) {
-            return c.parentNode && c.parentNode.removeChild(c);
-          });
-          if (wrapper.parentNode) {
-            originalParent.replaceChild(gridEl, wrapper);
-          }
-          // Remove ALL inline styles we added
-          ['display', 'flex-wrap', 'gap', 'transition', 'will-change', 'transform'].forEach(function (p) {
+          gridEl.classList.remove('frbl-carousel-noscrollbar');
+          ['display', 'flex-wrap', 'gap', 'overflow-x', 'scroll-behavior', 'padding-left', 'padding-right'].forEach(function (p) {
             return gridEl.style.removeProperty(p);
           });
-
-          // Remove slide sizing from children
-          Array.from(gridEl.children).filter(function (el) {
-            return UUID_RE.test(el.dataset.block || '');
-          }).forEach(function (slide) {
-            slide.style.removeProperty('flex-shrink');
-            slide.style.removeProperty('width');
-            slide.style.removeProperty('min-width');
+          slides.forEach(function (slide) {
+            ['flex-shrink', 'width', 'min-width', 'margin-left', 'margin-right', 'grid-column'].forEach(function (p) {
+              return slide.style.removeProperty(p);
+            });
           });
         } catch (e) {}
         stateRef.current = null;
@@ -165,16 +173,14 @@ function addCustomCarouselPanel(BlockEdit) {
         var editorDoc = getEditorDocument();
 
         // GB 2.x wraps blocks in a root element that shares the same data-block UUID.
-        // Using data-type ensures we pick the inner element that actually IS the block.
-        // For native blocks (core/group) there is no double-wrapper, so the fallback
-        // to plain [data-block] is safe.
+        // Use data-type to select the correct inner element; fall back for native blocks.
         var blockEl = editorDoc.querySelector("[data-block=\"".concat(props.clientId, "\"][data-type=\"").concat(props.name, "\"]"));
         if (!blockEl) {
           blockEl = editorDoc.querySelector("[data-block=\"".concat(props.clientId, "\"]"));
         }
         if (!blockEl) return;
         var gridEl = findGridEl(blockEl, props.name);
-        if (!gridEl || gridEl.closest('.frbl-editor-carousel')) return;
+        if (!gridEl) return;
 
         // Slides = direct children that are real blocks (UUID data-block).
         var slides = Array.from(gridEl.children).filter(function (el) {
@@ -183,105 +189,128 @@ function addCustomCarouselPanel(BlockEdit) {
         if (slides.length === 0) return;
         var perView = Math.max(1, parseInt(frblItemsToView) || 4);
         var gap = Math.max(0, parseInt(frblGap) || 20);
+        var btnColor = frblButtonColor || '#fff';
+        var btnBg = frblButtonBgColor || 'rgba(0,0,0,0.45)';
 
-        // ── Create the overflow:hidden wrapper ───────────────────────
-        var originalParent = gridEl.parentNode;
-        var wrapper = editorDoc.createElement('div');
-        wrapper.className = 'frbl-editor-carousel';
-        originalParent.replaceChild(wrapper, gridEl);
-        wrapper.appendChild(gridEl);
+        // Measure content-box width before any style changes.
+        var editorWin = editorDoc.defaultView || window;
+        var ARROW_W = 40; // px reserved on each side for arrow buttons.
+        var cs = editorWin.getComputedStyle(gridEl);
+        var innerW = gridEl.getBoundingClientRect().width - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0);
+        var totalWidth = Math.round(innerW) || 600;
+        // Content area after reserving space for both arrow buttons.
+        var contentW = totalWidth - ARROW_W * 2;
+        var slideWidth = Math.round((contentW - gap * (perView - 1)) / perView);
+        var step = slideWidth + gap;
 
-        // ── Apply flex layout to the grid element itself ─────────────
+        // ── Apply scroll-based layout directly to gridEl ─────────────
+        // No DOM restructuring → no React reconciliation conflicts.
+        gridEl.classList.add('frbl-carousel-noscrollbar');
         gridEl.style.display = 'flex';
         gridEl.style.flexWrap = 'nowrap';
         gridEl.style.gap = gap + 'px';
-        gridEl.style.transition = 'transform 400ms ease';
-        gridEl.style.willChange = 'transform';
-
-        // ── Size each slide ──────────────────────────────────────────
-        var totalWidth = wrapper.offsetWidth || 600;
-        var slideWidth = Math.floor((totalWidth - gap * (perView - 1)) / perView);
+        gridEl.style.overflowX = 'scroll';
+        gridEl.style.scrollBehavior = 'smooth';
+        // paddingLeft creates left space for the prev arrow.
+        // paddingRight is NOT used because Chrome ignores it in scroll extent;
+        // a spacer flex child is appended instead to guarantee right-side space.
+        gridEl.style.paddingLeft = ARROW_W + 'px';
+        gridEl.style.paddingRight = '0';
         slides.forEach(function (slide) {
           slide.style.flexShrink = '0';
           slide.style.width = slideWidth + 'px';
           slide.style.minWidth = slideWidth + 'px';
+          slide.style.marginLeft = '0';
+          slide.style.marginRight = '0';
+          slide.style.gridColumn = 'unset';
         });
 
-        // ── Trailing loop clones ─────────────────────────────────────
-        // Add perView clones from the start after the last real slide so
-        // the next-arrow transition looks smooth before snapping back.
-        var clones = [];
-        var directAppender = Array.from(gridEl.children).find(function (c) {
-          return c.classList.contains('block-list-appender');
-        });
-        for (var i = 0; i < perView; i++) {
-          var clone = slides[i % slides.length].cloneNode(true);
-          clone.removeAttribute('data-block');
-          clone.setAttribute('aria-hidden', 'true');
-          clone.classList.add('frbl-slide-clone');
-          clone.style.flexShrink = '0';
-          clone.style.width = slideWidth + 'px';
-          clone.style.minWidth = slideWidth + 'px';
-          clone.style.pointerEvents = 'none';
-          gridEl.insertBefore(clone, directAppender || null);
-          clones.push(clone);
-        }
+        // Right-side spacer: Chrome does not include padding-right in horizontal
+        // scroll extent, so we use a real flex child to guarantee right space.
+        var appender = gridEl.querySelector('.block-list-appender');
+        var spacer = editorDoc.createElement('span');
+        spacer.setAttribute('data-frbl-spacer', '1');
+        spacer.style.cssText = "display:block;flex-shrink:0;width:".concat(ARROW_W, "px;min-width:").concat(ARROW_W, "px;");
+        gridEl.insertBefore(spacer, appender || null);
 
-        // ── Slide navigation (infinite loop) ─────────────────────────
+        // ── Navigation (scrollLeft, infinite loop) ───────────────────
         var idx = 0;
-        var looping = false;
-        function slideTo(n) {
-          if (looping) return;
+        function scrollTo(n) {
+          var total = slides.length;
+          if (n >= total) {
+            // Forward past last: instant snap to 0 then continue.
+            gridEl.style.scrollBehavior = 'auto';
+            gridEl.scrollLeft = 0;
+            void gridEl.offsetWidth;
+            gridEl.style.scrollBehavior = 'smooth';
+            idx = 0;
+            return;
+          }
           if (n < 0) {
-            // Backwards wrap: jump to end of real slides silently, then animate back one.
-            gridEl.style.transition = 'none';
-            idx = slides.length;
-            gridEl.style.transform = "translateX(-".concat(idx * (slideWidth + gap), "px)");
-            void gridEl.offsetWidth; // force reflow
-            gridEl.style.transition = 'transform 400ms ease';
-            idx = slides.length - 1;
-            gridEl.style.transform = "translateX(-".concat(idx * (slideWidth + gap), "px)");
+            // Back past first: instant snap to last.
+            gridEl.style.scrollBehavior = 'auto';
+            gridEl.scrollLeft = Math.round((total - 1) * step);
+            void gridEl.offsetWidth;
+            gridEl.style.scrollBehavior = 'smooth';
+            idx = total - 1;
             return;
           }
           idx = n;
-          gridEl.style.transform = "translateX(-".concat(idx * (slideWidth + gap), "px)");
-
-          // After animating into the trailing clones zone, silently snap back to real position.
-          if (idx >= slides.length) {
-            looping = true;
-            setTimeout(function () {
-              gridEl.style.transition = 'none';
-              idx = idx % slides.length;
-              gridEl.style.transform = "translateX(-".concat(idx * (slideWidth + gap), "px)");
-              void gridEl.offsetWidth;
-              gridEl.style.transition = 'transform 400ms ease';
-              looping = false;
-            }, 420);
-          }
+          gridEl.scrollLeft = Math.round(idx * step);
         }
 
-        // ── Arrows ───────────────────────────────────────────────────
-        var btnColor = frblButtonColor || '#fff';
-        var btnBg = frblButtonBgColor || 'rgba(0,0,0,0.45)';
-        ['prev', 'next'].forEach(function (dir) {
-          var btn = editorDoc.createElement('button');
+        // ── Arrows in OUTER document body ────────────────────────────
+        // Placing them outside the iframe means React never touches them.
+        var iframe = document.querySelector('iframe[name="editor-canvas"]');
+        function updateArrowPos() {
+          if (!stateRef.current) return;
+          var ifrRect = iframe ? iframe.getBoundingClientRect() : {
+            top: 0,
+            left: 0
+          };
+          var rect = gridEl.getBoundingClientRect(); // coords in iframe viewport
+          var midY = Math.round(ifrRect.top + rect.top + rect.height / 2 - 16);
+          prevBtn.style.top = midY + 'px';
+          prevBtn.style.left = Math.round(ifrRect.left + rect.left + 8) + 'px';
+          nextBtn.style.top = midY + 'px';
+          nextBtn.style.right = Math.round(window.innerWidth - (ifrRect.left + rect.right) + 8) + 'px';
+        }
+        function makeArrow(dir) {
+          var btn = document.createElement('button');
           btn.type = 'button';
           btn.className = "frbl-editor-arrow frbl-editor-arrow-".concat(dir);
           btn.setAttribute('aria-label', dir === 'prev' ? 'Previous slide' : 'Next slide');
-          btn.style.backgroundColor = btnBg;
+          btn.style.cssText = "position:fixed;z-index:99999;background-color:".concat(btnBg, ";");
           var d = dir === 'prev' ? 'M6 1L1 6L6 11' : 'M1 11L6 6L1 1';
-          btn.innerHTML = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"".concat(d, "\" stroke=\"").concat(btnColor, "\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");
+          btn.innerHTML = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" fill=\"none\"><path d=\"".concat(d, "\" stroke=\"").concat(btnColor, "\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");
           btn.addEventListener('click', function (e) {
             e.stopPropagation();
-            slideTo(dir === 'prev' ? idx - 1 : idx + 1);
+            scrollTo(dir === 'prev' ? idx - 1 : idx + 1);
           });
-          wrapper.appendChild(btn);
+          document.body.appendChild(btn);
+          return btn;
+        }
+        var prevBtn = makeArrow('prev');
+        var nextBtn = makeArrow('next');
+        updateArrowPos();
+
+        // Keep arrows positioned correctly when the editor scrolls or resizes.
+        var resizeObs = new ResizeObserver(updateArrowPos);
+        resizeObs.observe(gridEl);
+        var editorScrollEl = editorDoc.documentElement || editorDoc.body;
+        var scrollFn = updateArrowPos;
+        editorScrollEl.addEventListener('scroll', scrollFn, {
+          passive: true,
+          capture: true
         });
         stateRef.current = {
-          originalParent: originalParent,
-          wrapper: wrapper,
           gridEl: gridEl,
-          clones: clones
+          slides: slides,
+          spacer: spacer,
+          prevBtn: prevBtn,
+          nextBtn: nextBtn,
+          resizeObs: resizeObs,
+          scrollFn: scrollFn
         };
       }
       if (frblGridOption !== 'none') {
diff --git a/assets/carousel/frontblocks-advanced-option.jsx b/assets/carousel/frontblocks-advanced-option.jsx
index e42ed58..0a08574 100644
--- a/assets/carousel/frontblocks-advanced-option.jsx
+++ b/assets/carousel/frontblocks-advanced-option.jsx
@@ -106,31 +106,40 @@ function addCustomCarouselPanel( BlockEdit ) {
 			let mounted = true;
 			let timer   = null;
 
-			function cleanup() {
-				if ( ! stateRef.current ) return;
-				const { originalParent, wrapper, gridEl, clones } = stateRef.current;
-				try {
-					// Remove clones first
-					( clones || [] ).forEach( ( c ) => c.parentNode && c.parentNode.removeChild( c ) );
-
-					if ( wrapper.parentNode ) {
-						originalParent.replaceChild( gridEl, wrapper );
-					}
-					// Remove ALL inline styles we added
-					[
-						'display', 'flex-wrap', 'gap',
-						'transition', 'will-change', 'transform',
-					].forEach( ( p ) => gridEl.style.removeProperty( p ) );
-
-					// Remove slide sizing from children
-					Array.from( gridEl.children )
-						.filter( ( el ) => UUID_RE.test( el.dataset.block || '' ) )
-						.forEach( ( slide ) => {
-							slide.style.removeProperty( 'flex-shrink' );
-							slide.style.removeProperty( 'width' );
-							slide.style.removeProperty( 'min-width' );
-						} );
+		function cleanup() {
+			if ( ! stateRef.current ) return;
+			const { gridEl, slides, spacer, prevBtn, nextBtn, resizeObs, scrollFn } = stateRef.current;
+
+			// Disconnect observer and scroll listener.
+			if ( resizeObs ) resizeObs.disconnect();
+			const editorDoc = getEditorDocument();
+			const editorScrollEl = editorDoc.documentElement || editorDoc.body;
+			if ( scrollFn ) editorScrollEl.removeEventListener( 'scroll', scrollFn, true );
+
+			// Remove arrows from outer window body (completely outside React).
+			[ prevBtn, nextBtn ].forEach( ( btn ) => {
+				if ( btn && btn.parentNode ) btn.parentNode.removeChild( btn );
+			} );
+
+			// Remove right spacer element.
+			if ( spacer && spacer.parentNode ) spacer.parentNode.removeChild( spacer );
+
+			// Restore gridEl styles.
+			try {
+				gridEl.classList.remove( 'frbl-carousel-noscrollbar' );
+				[
+					'display', 'flex-wrap', 'gap',
+					'overflow-x', 'scroll-behavior',
+					'padding-left', 'padding-right',
+				].forEach( ( p ) => gridEl.style.removeProperty( p ) );
+
+					slides.forEach( ( slide ) => {
+						[ 'flex-shrink', 'width', 'min-width',
+						  'margin-left', 'margin-right', 'grid-column',
+						].forEach( ( p ) => slide.style.removeProperty( p ) );
+					} );
 				} catch ( e ) {}
+
 				stateRef.current = null;
 			}
 
@@ -141,9 +150,7 @@ function addCustomCarouselPanel( BlockEdit ) {
 				const editorDoc = getEditorDocument();
 
 				// GB 2.x wraps blocks in a root element that shares the same data-block UUID.
-				// Using data-type ensures we pick the inner element that actually IS the block.
-				// For native blocks (core/group) there is no double-wrapper, so the fallback
-				// to plain [data-block] is safe.
+				// Use data-type to select the correct inner element; fall back for native blocks.
 				let blockEl = editorDoc.querySelector(
 					`[data-block="${ props.clientId }"][data-type="${ props.name }"]`
 				);
@@ -153,7 +160,7 @@ function addCustomCarouselPanel( BlockEdit ) {
 				if ( ! blockEl ) return;
 
 				const gridEl = findGridEl( blockEl, props.name );
-				if ( ! gridEl || gridEl.closest( '.frbl-editor-carousel' ) ) return;
+				if ( ! gridEl ) return;
 
 				// Slides = direct children that are real blocks (UUID data-block).
 				const slides = Array.from( gridEl.children ).filter(
@@ -161,112 +168,127 @@ function addCustomCarouselPanel( BlockEdit ) {
 				);
 				if ( slides.length === 0 ) return;
 
-				const perView = Math.max( 1, parseInt( frblItemsToView ) || 4 );
-				const gap     = Math.max( 0, parseInt( frblGap ) || 20 );
-
-				// ── Create the overflow:hidden wrapper ───────────────────────
-				const originalParent = gridEl.parentNode;
-				const wrapper        = editorDoc.createElement( 'div' );
-				wrapper.className    = 'frbl-editor-carousel';
-				originalParent.replaceChild( wrapper, gridEl );
-				wrapper.appendChild( gridEl );
-
-				// ── Apply flex layout to the grid element itself ─────────────
-				gridEl.style.display    = 'flex';
-				gridEl.style.flexWrap   = 'nowrap';
-				gridEl.style.gap        = gap + 'px';
-				gridEl.style.transition = 'transform 400ms ease';
-				gridEl.style.willChange = 'transform';
-
-				// ── Size each slide ──────────────────────────────────────────
-				const totalWidth = wrapper.offsetWidth || 600;
-				const slideWidth = Math.floor(
-					( totalWidth - gap * ( perView - 1 ) ) / perView
-				);
-
-				slides.forEach( ( slide ) => {
-					slide.style.flexShrink = '0';
-					slide.style.width      = slideWidth + 'px';
-					slide.style.minWidth   = slideWidth + 'px';
-				} );
-
-				// ── Trailing loop clones ─────────────────────────────────────
-				// Add perView clones from the start after the last real slide so
-				// the next-arrow transition looks smooth before snapping back.
-				const clones = [];
-				const directAppender = Array.from( gridEl.children ).find(
-					( c ) => c.classList.contains( 'block-list-appender' )
-				);
-				for ( let i = 0; i < perView; i++ ) {
-					const clone = slides[ i % slides.length ].cloneNode( true );
-					clone.removeAttribute( 'data-block' );
-					clone.setAttribute( 'aria-hidden', 'true' );
-					clone.classList.add( 'frbl-slide-clone' );
-					clone.style.flexShrink    = '0';
-					clone.style.width         = slideWidth + 'px';
-					clone.style.minWidth      = slideWidth + 'px';
-					clone.style.pointerEvents = 'none';
-					gridEl.insertBefore( clone, directAppender || null );
-					clones.push( clone );
-				}
-
-				// ── Slide navigation (infinite loop) ─────────────────────────
-				let idx     = 0;
-				let looping = false;
-
-				function slideTo( n ) {
-					if ( looping ) return;
-
+				const perView    = Math.max( 1, parseInt( frblItemsToView ) || 4 );
+				const gap        = Math.max( 0, parseInt( frblGap ) || 20 );
+				const btnColor   = frblButtonColor   || '#fff';
+				const btnBg      = frblButtonBgColor || 'rgba(0,0,0,0.45)';
+
+				// Measure content-box width before any style changes.
+				const editorWin  = editorDoc.defaultView || window;
+			const ARROW_W    = 40; // px reserved on each side for arrow buttons.
+			const cs         = editorWin.getComputedStyle( gridEl );
+			const innerW     = gridEl.getBoundingClientRect().width
+				- ( parseFloat( cs.paddingLeft )  || 0 )
+				- ( parseFloat( cs.paddingRight ) || 0 );
+			const totalWidth = Math.round( innerW ) || 600;
+			// Content area after reserving space for both arrow buttons.
+			const contentW   = totalWidth - ARROW_W * 2;
+			const slideWidth = Math.round( ( contentW - gap * ( perView - 1 ) ) / perView );
+			const step       = slideWidth + gap;
+
+			// ── Apply scroll-based layout directly to gridEl ─────────────
+			// No DOM restructuring → no React reconciliation conflicts.
+			gridEl.classList.add( 'frbl-carousel-noscrollbar' );
+			gridEl.style.display        = 'flex';
+			gridEl.style.flexWrap       = 'nowrap';
+			gridEl.style.gap            = gap + 'px';
+			gridEl.style.overflowX      = 'scroll';
+			gridEl.style.scrollBehavior = 'smooth';
+			// paddingLeft creates left space for the prev arrow.
+			// paddingRight is NOT used because Chrome ignores it in scroll extent;
+			// a spacer flex child is appended instead to guarantee right-side space.
+			gridEl.style.paddingLeft    = ARROW_W + 'px';
+			gridEl.style.paddingRight   = '0';
+
+			slides.forEach( ( slide ) => {
+				slide.style.flexShrink  = '0';
+				slide.style.width       = slideWidth + 'px';
+				slide.style.minWidth    = slideWidth + 'px';
+				slide.style.marginLeft  = '0';
+				slide.style.marginRight = '0';
+				slide.style.gridColumn  = 'unset';
+			} );
+
+			// Right-side spacer: Chrome does not include padding-right in horizontal
+			// scroll extent, so we use a real flex child to guarantee right space.
+			const appender = gridEl.querySelector( '.block-list-appender' );
+			const spacer   = editorDoc.createElement( 'span' );
+			spacer.setAttribute( 'data-frbl-spacer', '1' );
+			spacer.style.cssText = `display:block;flex-shrink:0;width:${ ARROW_W }px;min-width:${ ARROW_W }px;`;
+			gridEl.insertBefore( spacer, appender || null );
+
+			// ── Navigation (scrollLeft, infinite loop) ───────────────────
+				let idx = 0;
+
+				function scrollTo( n ) {
+					const total = slides.length;
+					if ( n >= total ) {
+						// Forward past last: instant snap to 0 then continue.
+						gridEl.style.scrollBehavior = 'auto';
+						gridEl.scrollLeft = 0;
+						void gridEl.offsetWidth;
+						gridEl.style.scrollBehavior = 'smooth';
+						idx = 0;
+						return;
+					}
 					if ( n < 0 ) {
-						// Backwards wrap: jump to end of real slides silently, then animate back one.
-						gridEl.style.transition = 'none';
-						idx = slides.length;
-						gridEl.style.transform = `translateX(-${ idx * ( slideWidth + gap ) }px)`;
-						void gridEl.offsetWidth; // force reflow
-						gridEl.style.transition = 'transform 400ms ease';
-						idx = slides.length - 1;
-						gridEl.style.transform = `translateX(-${ idx * ( slideWidth + gap ) }px)`;
+						// Back past first: instant snap to last.
+						gridEl.style.scrollBehavior = 'auto';
+						gridEl.scrollLeft = Math.round( ( total - 1 ) * step );
+						void gridEl.offsetWidth;
+						gridEl.style.scrollBehavior = 'smooth';
+						idx = total - 1;
 						return;
 					}
-
 					idx = n;
-					gridEl.style.transform = `translateX(-${ idx * ( slideWidth + gap ) }px)`;
-
-					// After animating into the trailing clones zone, silently snap back to real position.
-					if ( idx >= slides.length ) {
-						looping = true;
-						setTimeout( () => {
-							gridEl.style.transition = 'none';
-							idx = idx % slides.length;
-							gridEl.style.transform = `translateX(-${ idx * ( slideWidth + gap ) }px)`;
-							void gridEl.offsetWidth;
-							gridEl.style.transition = 'transform 400ms ease';
-							looping = false;
-						}, 420 );
-					}
+					gridEl.scrollLeft = Math.round( idx * step );
 				}
 
+				// ── Arrows in OUTER document body ────────────────────────────
+				// Placing them outside the iframe means React never touches them.
+				const iframe = document.querySelector( 'iframe[name="editor-canvas"]' );
+
+				function updateArrowPos() {
+					if ( ! stateRef.current ) return;
+					const ifrRect = iframe ? iframe.getBoundingClientRect() : { top: 0, left: 0 };
+					const rect    = gridEl.getBoundingClientRect(); // coords in iframe viewport
+					const midY    = Math.round( ifrRect.top + rect.top + rect.height / 2 - 16 );
 
-				// ── Arrows ───────────────────────────────────────────────────
-				const btnColor = frblButtonColor   || '#fff';
-				const btnBg    = frblButtonBgColor || 'rgba(0,0,0,0.45)';
+					prevBtn.style.top   = midY + 'px';
+					prevBtn.style.left  = Math.round( ifrRect.left + rect.left + 8 ) + 'px';
+					nextBtn.style.top   = midY + 'px';
+					nextBtn.style.right = Math.round( window.innerWidth - ( ifrRect.left + rect.right ) + 8 ) + 'px';
+				}
 
-				[ 'prev', 'next' ].forEach( ( dir ) => {
-					const btn   = editorDoc.createElement( 'button' );
-					btn.type    = 'button';
+				function makeArrow( dir ) {
+					const btn = document.createElement( 'button' );
+					btn.type  = 'button';
 					btn.className = `frbl-editor-arrow frbl-editor-arrow-${ dir }`;
 					btn.setAttribute( 'aria-label', dir === 'prev' ? 'Previous slide' : 'Next slide' );
-					btn.style.backgroundColor = btnBg;
+					btn.style.cssText = `position:fixed;z-index:99999;background-color:${ btnBg };`;
 					const d = dir === 'prev' ? 'M6 1L1 6L6 11' : 'M1 11L6 6L1 1';
-					btn.innerHTML = `<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${ d }" stroke="${ btnColor }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+					btn.innerHTML = `<svg width="7" height="12" viewBox="0 0 7 12" fill="none"><path d="${ d }" stroke="${ btnColor }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
 					btn.addEventListener( 'click', ( e ) => {
 						e.stopPropagation();
-						slideTo( dir === 'prev' ? idx - 1 : idx + 1 );
+						scrollTo( dir === 'prev' ? idx - 1 : idx + 1 );
 					} );
-					wrapper.appendChild( btn );
-				} );
+					document.body.appendChild( btn );
+					return btn;
+				}
+
+				const prevBtn = makeArrow( 'prev' );
+				const nextBtn = makeArrow( 'next' );
+				updateArrowPos();
+
+				// Keep arrows positioned correctly when the editor scrolls or resizes.
+				const resizeObs = new ResizeObserver( updateArrowPos );
+				resizeObs.observe( gridEl );
+
+				const editorScrollEl = editorDoc.documentElement || editorDoc.body;
+				const scrollFn       = updateArrowPos;
+				editorScrollEl.addEventListener( 'scroll', scrollFn, { passive: true, capture: true } );
 
-				stateRef.current = { originalParent, wrapper, gridEl, clones };
+				stateRef.current = { gridEl, slides, spacer, prevBtn, nextBtn, resizeObs, scrollFn };
 			}
 
 			if ( frblGridOption !== 'none' ) {
diff --git a/assets/carousel/frontblocks-carousel-editor.css b/assets/carousel/frontblocks-carousel-editor.css
index bb70eaf..169b031 100644
--- a/assets/carousel/frontblocks-carousel-editor.css
+++ b/assets/carousel/frontblocks-carousel-editor.css
@@ -1,18 +1,16 @@
 /* Editor-only carousel preview styles */
 
-.frbl-editor-carousel {
-	position: relative;
-	overflow: hidden;
-	width: 100%;
+/* Hide the native scrollbar on the carousel grid element */
+.frbl-carousel-noscrollbar {
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+}
+.frbl-carousel-noscrollbar::-webkit-scrollbar {
+	display: none;
 }
 
-
-/* Navigation arrows */
+/* Navigation arrows – rendered in the outer document body as position:fixed */
 .frbl-editor-arrow {
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	z-index: 10;
 	width: 32px;
 	height: 32px;
 	border-radius: 50%;
@@ -28,11 +26,3 @@
 .frbl-editor-arrow:hover {
 	opacity: 0.8;
 }
-
-.frbl-editor-arrow-prev {
-	left: 8px;
-}
-
-.frbl-editor-arrow-next {
-	right: 8px;
-}
diff --git a/assets/carousel/frontblocks-carousel.css b/assets/carousel/frontblocks-carousel.css
index ca4e3f0..7feb3c6 100644
--- a/assets/carousel/frontblocks-carousel.css
+++ b/assets/carousel/frontblocks-carousel.css
@@ -262,3 +262,15 @@
   min-width: 0;
   flex-shrink: 0;
 }
+
+/**
+ * GenerateBlocks (and any other plugin) may inject column-gap via generated
+ * utility classes on the carousel slides container.  Glide manages its own
+ * spacing through margin-right on each slide, so any external column-gap
+ * breaks the width calculation and must be zeroed out.
+ */
+.frontblocks-carousel,
+.frontblocks .glide__slides {
+  column-gap: 0 !important;
+  gap: 0 !important;
+}
diff --git a/assets/shape-animations/frontblocks-shape-animation-option.js b/assets/shape-animations/frontblocks-shape-animation-option.js
index 7a272f0..a0218a3 100644
--- a/assets/shape-animations/frontblocks-shape-animation-option.js
+++ b/assets/shape-animations/frontblocks-shape-animation-option.js
@@ -18,9 +18,9 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
   var _wp$components = wp.components,
     PanelBody = _wp$components.PanelBody,
     ToggleControl = _wp$components.ToggleControl,
+    TextareaControl = _wp$components.TextareaControl,
     Button = _wp$components.Button,
-    Notice = _wp$components.Notice,
-    FormFileUpload = _wp$components.FormFileUpload;
+    Notice = _wp$components.Notice;
 
   /**
    * Add custom SVG animation controls to GenerateBlocks Shape block.
@@ -45,14 +45,6 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
         _useState4 = _slicedToArray(_useState3, 2),
         jsonPreview = _useState4[0],
         setJsonPreview = _useState4[1];
-      var _useState5 = useState(''),
-        _useState6 = _slicedToArray(_useState5, 2),
-        fileName = _useState6[0],
-        setFileName = _useState6[1];
-      var _useState7 = useState(0),
-        _useState8 = _slicedToArray(_useState7, 2),
-        fileInputKey = _useState8[0],
-        setFileInputKey = _useState8[1];
 
       // Detect if JSON is Lottie format.
       var isLottieJson = function isLottieJson(parsed) {
@@ -100,46 +92,19 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
         }
       };
 
-      // Handle file upload.
-      var handleFileUpload = function handleFileUpload(event) {
-        var file = event.target.files[0];
-        if (!file) {
-          return;
-        }
-        
-        // Check if it's a JSON file.
-        if (!file.name.endsWith('.json')) {
-          setJsonError(__('Please select a JSON file', 'frontblocks'));
-          setFileInputKey(function(prev) { return prev + 1; });
-          return;
+      // Handle JSON change.
+      var handleJsonChange = function handleJsonChange(value) {
+        setAttributes({
+          frblCustomSvgAnimationJson: value
+        });
+        if (value.trim()) {
+          validateJson(value);
+        } else {
+          setJsonError('');
+          setJsonPreview(null);
         }
-        
-        setFileName(file.name);
-        
-        // Read file content.
-        var reader = new FileReader();
-        reader.onload = function(e) {
-          var content = e.target.result;
-          setAttributes({ frblCustomSvgAnimationJson: content });
-          validateJson(content);
-          setFileInputKey(function(prev) { return prev + 1; });
-        };
-        reader.onerror = function() {
-          setJsonError(__('Error reading file', 'frontblocks'));
-          setFileInputKey(function(prev) { return prev + 1; });
-        };
-        reader.readAsText(file);
-      };
-      
-      // Clear imported JSON.
-      var handleClear = function handleClear() {
-        setAttributes({ frblCustomSvgAnimationJson: '' });
-        setJsonError('');
-        setJsonPreview(null);
-        setFileName('');
-        setFileInputKey(function(prev) { return prev + 1; });
       };
-      
+
       // Example JSON template.
       var exampleJson = JSON.stringify({
         "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"48\" height=\"48\" fill=\"currentColor\"><path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\"/></svg>",
@@ -152,20 +117,6 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
           "trigger": "load"
         }
       }, null, 2);
-      
-      // Download example JSON.
-      var handleDownloadExample = function handleDownloadExample() {
-        var blob = new Blob([exampleJson], { type: 'application/json' });
-        var url = URL.createObjectURL(blob);
-        var a = document.createElement('a');
-        a.href = url;
-        a.download = 'example-animation.json';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-      };
-      
       return wp.element.createElement(Fragment, {}, wp.element.createElement(BlockEdit, props), wp.element.createElement(InspectorControls, {}, wp.element.createElement(PanelBody, {
         title: __('FrontBlocks Custom SVG Animation', 'frontblocks'),
         initialOpen: false
@@ -181,36 +132,16 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
       }), frblCustomSvgAnimationEnabled && wp.element.createElement(Fragment, {}, wp.element.createElement('p', {
         style: {
           fontSize: '12px',
-          marginBottom: '12px',
+          marginBottom: '8px',
           color: '#757575'
         }
-      }, __('Import a JSON file with your animation configuration:', 'frontblocks')), wp.element.createElement(FormFileUpload, {
-        key: fileInputKey,
-        accept: '.json',
-        onChange: handleFileUpload,
-        render: function(ref) {
-          return wp.element.createElement(Button, {
-            isSecondary: true,
-            onClick: ref.openFileDialog,
-            style: { marginBottom: '8px', width: '100%' }
-          }, fileName ? __('Change JSON file', 'frontblocks') : __('Import JSON file', 'frontblocks'));
-        }
-      }), fileName && wp.element.createElement('div', {
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          marginBottom: '12px',
-          padding: '8px',
-          background: '#f6f7f7',
-          borderRadius: '4px',
-          fontSize: '12px'
-        }
-      }, wp.element.createElement('span', {}, '📄 ' + fileName), wp.element.createElement(Button, {
-        isSmall: true,
-        isDestructive: true,
-        onClick: handleClear
-      }, __('Clear', 'frontblocks'))), jsonError && wp.element.createElement(Notice, {
+      }, __('Paste your JSON configuration below:', 'frontblocks')), wp.element.createElement(TextareaControl, {
+        label: __('JSON Configuration', 'frontblocks'),
+        value: frblCustomSvgAnimationJson,
+        onChange: handleJsonChange,
+        rows: 10,
+        help: __('JSON with svg and animation properties', 'frontblocks')
+      }), jsonError && wp.element.createElement(Notice, {
         status: 'error',
         isDismissible: false
       }, jsonError), jsonPreview && wp.element.createElement(Notice, {
@@ -227,7 +158,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
           fontWeight: '600',
           marginBottom: '8px'
         }
-      }, __('📋 Download example JSON', 'frontblocks')), wp.element.createElement('pre', {
+      }, __('📋 Show example JSON', 'frontblocks')), wp.element.createElement('pre', {
         style: {
           background: '#f6f7f7',
           padding: '12px',
@@ -237,23 +168,13 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
           maxHeight: '300px'
         }
       }, exampleJson), wp.element.createElement(Button, {
-        isSecondary: true,
-        isSmall: true,
-        onClick: handleDownloadExample,
-        style: {
-          marginTop: '8px',
-          marginRight: '8px'
-        }
-      }, __('Download example', 'frontblocks')), wp.element.createElement(Button, {
         isSecondary: true,
         isSmall: true,
         onClick: function onClick() {
           setAttributes({
             frblCustomSvgAnimationJson: exampleJson
           });
-          setFileName('example-animation.json');
           validateJson(exampleJson);
-          setFileInputKey(function(prev) { return prev + 1; });
         },
         style: {
           marginTop: '8px'

From cb504cadf77de9376a68ba875b304bc23f5f4df2 Mon Sep 17 00:00:00 2001
From: castellon <alexcastellon077@gmail.com>
Date: Fri, 27 Feb 2026 12:25:04 +0100
Subject: [PATCH 4/4] Fix bullets

---
 assets/carousel/frontblocks-carousel.css | 44 +++++++++++-------------
 assets/carousel/frontblocks-carousel.js  | 17 +++++----
 2 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/assets/carousel/frontblocks-carousel.css b/assets/carousel/frontblocks-carousel.css
index 7feb3c6..254f7d2 100644
--- a/assets/carousel/frontblocks-carousel.css
+++ b/assets/carousel/frontblocks-carousel.css
@@ -7,7 +7,7 @@
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
-  overflow: hidden;
+  overflow: visible;
   margin: 0;
   padding: 0;
 }
@@ -123,45 +123,41 @@
 }
 
 .frontblocks .glide__bullets {
-  position: absolute;
-  z-index: 2;
-  bottom: -1em;
-  left: 50%;
-  display: inline-flex;
+  display: flex;
+  justify-content: center;
   list-style: none;
-  transform: translateX(-50%);
   gap: 2px;
+  margin: 0.75em 0 0;
+  padding: 0;
 }
 
 .frontblocks .glide__bullet {
-  background-color: rgba(255, 255, 255, 0.5);
-  width: 14px;
-  height: 14px;
-  padding: 10px;
+  box-sizing: content-box;
+  width: 10px;
+  height: 10px;
+  padding: 0;
   border-radius: 50%;
-  border: 2px solid transparent;
-  background-clip: content-box;
-  transition: all 300ms ease-in-out;
+  border: none;
+  background-color: var(--frbl-bullet-bg, rgba(0, 0, 0, 0.25));
   cursor: pointer;
-  line-height: 0;
-  margin: 0;
+  transition: background-color 300ms ease-in-out, transform 300ms ease-in-out;
+  margin: 0 2px;
+  flex-shrink: 0;
 }
 
 .frontblocks .glide__bullet:focus {
-  outline: 2px solid white;
+  outline: 2px solid var(--frbl-bullet-color, rgba(0, 0, 0, 0.8));
   outline-offset: 2px;
 }
 
-.frontblocks .glide__bullet:hover,
-.frontblocks .glide__bullet:focus {
-  border: 2px solid white;
-  background-color: rgba(255, 255, 255, 0.5);
-  background-clip: content-box;
+.frontblocks .glide__bullet:hover {
+  background-color: var(--frbl-bullet-color, rgba(0, 0, 0, 0.8));
+  transform: scale(1.2);
 }
 
 .frontblocks .glide__bullet--active {
-  background-color: white;
-  background-clip: content-box;
+  background-color: var(--frbl-bullet-color, rgba(0, 0, 0, 0.8));
+  transform: scale(1.2);
 }
 
 .frontblocks.glide--swipeable {
diff --git a/assets/carousel/frontblocks-carousel.js b/assets/carousel/frontblocks-carousel.js
index 39d894d..d0c39c3 100644
--- a/assets/carousel/frontblocks-carousel.js
+++ b/assets/carousel/frontblocks-carousel.js
@@ -72,20 +72,19 @@ window.addEventListener('load', function (event) {
                     bullet.classList.add('glide__bullet');
                     bullet.setAttribute('data-glide-dir', '=' + i);
                     bullet.setAttribute('aria-label', 'Go to slide ' + (i + 1));
-                    bullet.style.backgroundColor = carouselbuttonsBackgroundColor;
                     bullets.appendChild(bullet);
                 }
 
                 wrapperParent.appendChild(bullets);
 
-                // Add custom CSS for active bullet color
-                const style = document.createElement('style');
-                style.textContent = `
-					.frontblocks .glide__bullet.glide__bullet--active {
-						background-color: ${carouselbuttonsColor};
-					}
-				`;
-                document.head.appendChild(style);
+                // Set bullet colors via CSS custom properties on the wrapper.
+                // This avoids specificity conflicts with the stylesheet.
+                if (carouselbuttonsColor) {
+                    wrapperParent.style.setProperty('--frbl-bullet-color', carouselbuttonsColor);
+                }
+                if (carouselbuttonsBackgroundColor && carouselbuttonsBackgroundColor !== 'transparent') {
+                    wrapperParent.style.setProperty('--frbl-bullet-bg', carouselbuttonsBackgroundColor);
+                }
             }
 
             if (carouselbuttons == 'arrows') {