From 4ac091abb4beec21d34a1779308c53d6fafe3d90 Mon Sep 17 00:00:00 2001 From: castellon Date: Fri, 20 Feb 2026 11:02:44 +0100 Subject: [PATCH 1/3] Fix javascript and css --- .../carousel/frontblocks-advanced-option.js | 11 ++ .../carousel/frontblocks-advanced-option.jsx | 7 + assets/carousel/frontblocks-carousel.css | 141 +++++------------- assets/carousel/frontblocks-carousel.js | 22 +-- includes/Frontend/Carousel.php | 14 ++ 5 files changed, 76 insertions(+), 119 deletions(-) diff --git a/assets/carousel/frontblocks-advanced-option.js b/assets/carousel/frontblocks-advanced-option.js index a5191eb..c61355e 100644 --- a/assets/carousel/frontblocks-advanced-option.js +++ b/assets/carousel/frontblocks-advanced-option.js @@ -47,6 +47,8 @@ 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, @@ -123,6 +125,15 @@ function addCustomCarouselPanel(BlockEdit) { frblAutoplay: value }); } + }), /*#__PURE__*/React.createElement(TextControl, { + label: __('Gap (px)', 'frontblocks'), + value: frblGap, + onChange: function onChange(value) { + return props.setAttributes({ + frblGap: value + }); + }, + help: __('Space between slides in pixels. Leave empty for 20.', 'frontblocks') }), frblGridOption === 'slider' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToggleControl, { label: __('Rewind', 'frontblocks'), checked: frblRewind, diff --git a/assets/carousel/frontblocks-advanced-option.jsx b/assets/carousel/frontblocks-advanced-option.jsx index ae46d89..6bfd2ef 100644 --- a/assets/carousel/frontblocks-advanced-option.jsx +++ b/assets/carousel/frontblocks-advanced-option.jsx @@ -37,6 +37,7 @@ function addCustomCarouselPanel(BlockEdit) { frblTabletToView = '2', frblResponsiveToView = '1', frblAutoplay = '', + frblGap = '20', frblButtons = 'arrows', frblRewind = true, frblButtonColor, @@ -97,6 +98,12 @@ function addCustomCarouselPanel(BlockEdit) { value={frblAutoplay} onChange={(value) => props.setAttributes({ frblAutoplay: value })} /> + props.setAttributes({ frblGap: value })} + help={__('Space between slides in pixels. Leave empty for 20.', 'frontblocks')} + /> {frblGridOption === 'slider' && ( <> * { @@ -191,20 +210,20 @@ /* Ensure inner container doesn't interfere with carousel */ .wp-block-group.frontblocks-carousel > .wp-block-group__inner-container { - display: block; - grid-template-columns: none; - gap: 0; + display: block !important; + grid-template-columns: none !important; + gap: 0 !important; width: 100%; } /* Override grid styles for direct children in carousel mode */ .glide__slides.wp-block-group, .glide__slides.wp-block-group.is-layout-grid { - display: flex; - grid-template-columns: none; - gap: 0; - column-gap: 0; - row-gap: 0; + display: flex !important; + grid-template-columns: none !important; + gap: 0 !important; + column-gap: 0 !important; + row-gap: 0 !important; } /* Ensure slides have proper width */ @@ -212,91 +231,3 @@ min-width: 0; flex-shrink: 0; } - -/* Force full width for single slide view */ -.frontblocks-carousel[data-view="1"] .glide__slide { - margin-left: 0; - margin-right: 0; -} - -/* Remove gaps when showing one slide */ -.frontblocks-carousel[data-view="1"].glide__slides { - gap: 0; -} - -/* Responsive single slide view */ -@media only screen and (max-width: 768px) { - .frontblocks-carousel[data-mobile-view="1"] .glide__slide { - width: 100%; - flex: 0 0 100%; - max-width: 100%; - margin-left: 0; - margin-right: 0; - } -} - -@media only screen and (min-width: 769px) and (max-width: 1024px) { - .frontblocks-carousel[data-tablet-view="1"] .glide__slide { - width: 100%; - flex: 0 0 100%; - max-width: 100%; - margin-left: 0; - margin-right: 0; - } -} - -@media only screen and (min-width: 1025px) and (max-width: 1440px) { - .frontblocks-carousel[data-laptop-view="1"] .glide__slide { - width: 100%; - flex: 0 0 100%; - max-width: 100%; - margin-left: 0; - margin-right: 0; - } -} - -/* Handle alignfull content within carousel slides */ -.glide__slide > .wp-block-cover.alignfull, -.glide__slide > .alignfull { - width: 100%; - max-width: none; - margin-left: 0; - margin-right: 0; -} - -/* Ensure cover blocks maintain minimum height */ -.glide__slide .wp-block-cover { - min-height: 430px; - display: flex; - align-items: center; - justify-content: center; -} - -/* Prevent carousel from overflowing viewport */ -.glide { - position: relative; - overflow: visible; - min-height: 430px; -} - -.glide__track { - overflow: hidden; - width: 100%; - position: relative; - z-index: 1; -} - -.glide__slides { - position: relative; - z-index: 1; - height: auto; - min-height: 430px; -} - -.glide__slide { - position: relative; - z-index: 1; - height: auto; - opacity: 1; - visibility: visible; -} diff --git a/assets/carousel/frontblocks-carousel.js b/assets/carousel/frontblocks-carousel.js index 8d5008e..84517a4 100644 --- a/assets/carousel/frontblocks-carousel.js +++ b/assets/carousel/frontblocks-carousel.js @@ -37,8 +37,8 @@ window.addEventListener('load', function (event) { const carouselLaptopView = item.getAttribute('data-laptop-view') ? parseInt(item.getAttribute('data-laptop-view')) : 3; const carouselTabletView = item.getAttribute('data-tablet-view') ? parseInt(item.getAttribute('data-tablet-view')) : 2; const carouselMobileView = item.getAttribute('data-mobile-view') ? parseInt(item.getAttribute('data-mobile-view')) : 1; - const autoplayValue = item.getAttribute('data-autoplay'); - const carouselAutoplay = autoplayValue && autoplayValue !== '' ? parseInt(autoplayValue) : 0; + const carouselAutoplay = item.getAttribute('data-autoplay') ? item.getAttribute('data-autoplay') : 0; + const carouselGap = item.getAttribute('data-gap') ? parseInt(item.getAttribute('data-gap'), 10) : 20; const carouselRewind = item.getAttribute('data-rewind') ? item.getAttribute('data-rewind') : false; const carouselbuttonsColor = item.getAttribute('data-buttons-color') ? item.getAttribute('data-buttons-color') : 'black'; const carouselbuttonsBackgroundColor = item.getAttribute('data-buttons-background-color') ? item.getAttribute('data-buttons-background-color') : 'transparent'; @@ -109,28 +109,22 @@ window.addEventListener('load', function (event) { arrows.innerHTML = arrowsHTML; wrapperParent.appendChild(arrows); } - // Calculate gap based on perView - use 0 gap when showing 1 slide - const calculateGap = (view) => view === 1 ? 0 : 20; - const glideFrontBlocks = new Glide(wrapperParent, { type: carouselType, perView: carouselView, startAt: 0, - autoplay: carouselAutoplay === 0 ? false : carouselAutoplay, - gap: calculateGap(carouselView), + autoplay: carouselAutoplay === 0 ? 2500 : carouselAutoplay, + gap: isNaN(carouselGap) ? 20 : carouselGap, rewind: carouselRewind, breakpoints: { 768: { - perView: carouselMobileView, - gap: calculateGap(carouselMobileView) + perView: carouselMobileView }, 1024: { - perView: carouselTabletView, - gap: calculateGap(carouselTabletView) + perView: carouselTabletView }, 1440: { - perView: carouselLaptopView, - gap: calculateGap(carouselLaptopView) + perView: carouselLaptopView } } }); @@ -153,4 +147,4 @@ window.addEventListener('load', function (event) { glideFrontBlocks.mount(); }); } -}); \ No newline at end of file +}); diff --git a/includes/Frontend/Carousel.php b/includes/Frontend/Carousel.php index 742fd40..7a45d18 100644 --- a/includes/Frontend/Carousel.php +++ b/includes/Frontend/Carousel.php @@ -75,6 +75,7 @@ public function add_custom_attributes_to_grid_block( $block_content, $block ) { $tablet_to_view = isset( $attrs['frblTabletToView'] ) ? (int) $attrs['frblTabletToView'] : 2; $responsive_to_view = isset( $attrs['frblResponsiveToView'] ) ? (int) $attrs['frblResponsiveToView'] : 1; $autoplay = isset( $attrs['frblAutoplay'] ) ? ( (int) $attrs['frblAutoplay'] * 1000 ) : ''; + $gap = isset( $attrs['frblGap'] ) && $attrs['frblGap'] !== '' ? (int) $attrs['frblGap'] : 20; $rewind = isset( $attrs['frblRewind'] ) ? (bool) $attrs['frblRewind'] : true; $buttons = isset( $attrs['frblButtons'] ) ? sanitize_text_field( $attrs['frblButtons'] ) : 'arrows'; $button_color = isset( $attrs['frblButtonColor'] ) ? sanitize_text_field( $attrs['frblButtonColor'] ) : ''; @@ -99,6 +100,7 @@ public function add_custom_attributes_to_grid_block( $block_content, $block ) { ' data-tablet-view="' . esc_attr( $tablet_to_view ) . '"' . ' data-mobile-view="' . esc_attr( $responsive_to_view ) . '"' . ' data-autoplay="' . esc_attr( $autoplay ) . '"' . + ' data-gap="' . esc_attr( $gap ) . '"' . ' data-buttons="' . esc_attr( $buttons ) . '"' . ' data-buttons-color="' . esc_attr( $button_color ) . '"' . ' data-buttons-background-color="' . esc_attr( $button_bg_color ) . '"' . @@ -139,6 +141,7 @@ public function add_custom_attributes_to_element_block( $block_content, $block ) $tablet_to_view = isset( $attrs['frblTabletToView'] ) ? (int) $attrs['frblTabletToView'] : 2; $responsive_to_view = isset( $attrs['frblResponsiveToView'] ) ? (int) $attrs['frblResponsiveToView'] : 1; $autoplay = isset( $attrs['frblAutoplay'] ) ? ( (int) $attrs['frblAutoplay'] * 1000 ) : ''; + $gap = isset( $attrs['frblGap'] ) && $attrs['frblGap'] !== '' ? (int) $attrs['frblGap'] : 20; $rewind = isset( $attrs['frblRewind'] ) ? (bool) $attrs['frblRewind'] : true; $buttons = isset( $attrs['frblButtons'] ) ? sanitize_text_field( $attrs['frblButtons'] ) : 'arrows'; $button_color = isset( $attrs['frblButtonColor'] ) ? sanitize_text_field( $attrs['frblButtonColor'] ) : ''; @@ -163,6 +166,7 @@ public function add_custom_attributes_to_element_block( $block_content, $block ) ' data-tablet-view="' . esc_attr( $tablet_to_view ) . '"' . ' data-mobile-view="' . esc_attr( $responsive_to_view ) . '"' . ' data-autoplay="' . esc_attr( $autoplay ) . '"' . + ' data-gap="' . esc_attr( $gap ) . '"' . ' data-buttons="' . esc_attr( $buttons ) . '"' . ' data-buttons-color="' . esc_attr( $button_color ) . '"' . ' data-buttons-background-color="' . esc_attr( $button_bg_color ) . '"' . @@ -203,6 +207,7 @@ public function add_custom_attributes_to_core_group_block( $block_content, $bloc $tablet_to_view = isset( $attrs['frblTabletToView'] ) ? (int) $attrs['frblTabletToView'] : 2; $responsive_to_view = isset( $attrs['frblResponsiveToView'] ) ? (int) $attrs['frblResponsiveToView'] : 1; $autoplay = isset( $attrs['frblAutoplay'] ) ? ( (int) $attrs['frblAutoplay'] * 1000 ) : ''; + $gap = isset( $attrs['frblGap'] ) && $attrs['frblGap'] !== '' ? (int) $attrs['frblGap'] : 20; $rewind = isset( $attrs['frblRewind'] ) ? (bool) $attrs['frblRewind'] : true; $buttons = isset( $attrs['frblButtons'] ) ? sanitize_text_field( $attrs['frblButtons'] ) : 'arrows'; $button_color = isset( $attrs['frblButtonColor'] ) ? sanitize_text_field( $attrs['frblButtonColor'] ) : ''; @@ -227,6 +232,7 @@ public function add_custom_attributes_to_core_group_block( $block_content, $bloc ' data-tablet-view="' . esc_attr( $tablet_to_view ) . '"' . ' data-mobile-view="' . esc_attr( $responsive_to_view ) . '"' . ' data-autoplay="' . esc_attr( $autoplay ) . '"' . + ' data-gap="' . esc_attr( $gap ) . '"' . ' data-buttons="' . esc_attr( $buttons ) . '"' . ' data-buttons-color="' . esc_attr( $button_color ) . '"' . ' data-buttons-background-color="' . esc_attr( $button_bg_color ) . '"' . @@ -299,6 +305,10 @@ public function register_custom_attributes_for_grid_block( $block_args, $block_t 'type' => 'string', 'default' => '', ); + $block_args['attributes']['frblGap'] = array( + 'type' => 'string', + 'default' => '20', + ); $block_args['attributes']['frblRewind'] = array( 'type' => 'boolean', 'default' => true, @@ -370,6 +380,10 @@ function( settings, name ) { type: 'string', default: '' }, + frblGap: { + type: 'string', + default: '20' + }, frblButtons: { type: 'string', default: 'arrows' From fb208438645dbba6670db1c004fee9ad485ed417 Mon Sep 17 00:00:00 2001 From: castellon Date: Fri, 20 Feb 2026 11:14:21 +0100 Subject: [PATCH 2/3] Fix phpstan --- assets/carousel/frontblocks-carousel.js | 5 +++-- includes/Frontend/Carousel.php | 6 +++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/assets/carousel/frontblocks-carousel.js b/assets/carousel/frontblocks-carousel.js index 84517a4..6c1f4f4 100644 --- a/assets/carousel/frontblocks-carousel.js +++ b/assets/carousel/frontblocks-carousel.js @@ -37,7 +37,8 @@ window.addEventListener('load', function (event) { const carouselLaptopView = item.getAttribute('data-laptop-view') ? parseInt(item.getAttribute('data-laptop-view')) : 3; const carouselTabletView = item.getAttribute('data-tablet-view') ? parseInt(item.getAttribute('data-tablet-view')) : 2; const carouselMobileView = item.getAttribute('data-mobile-view') ? parseInt(item.getAttribute('data-mobile-view')) : 1; - const carouselAutoplay = item.getAttribute('data-autoplay') ? item.getAttribute('data-autoplay') : 0; + const autoplayAttr = item.getAttribute('data-autoplay'); + const carouselAutoplay = (autoplayAttr !== '' && autoplayAttr !== null && autoplayAttr !== undefined) ? parseInt(autoplayAttr, 10) : 0; const carouselGap = item.getAttribute('data-gap') ? parseInt(item.getAttribute('data-gap'), 10) : 20; const carouselRewind = item.getAttribute('data-rewind') ? item.getAttribute('data-rewind') : false; const carouselbuttonsColor = item.getAttribute('data-buttons-color') ? item.getAttribute('data-buttons-color') : 'black'; @@ -113,7 +114,7 @@ window.addEventListener('load', function (event) { type: carouselType, perView: carouselView, startAt: 0, - autoplay: carouselAutoplay === 0 ? 2500 : carouselAutoplay, + autoplay: carouselAutoplay > 0 ? carouselAutoplay : false, gap: isNaN(carouselGap) ? 20 : carouselGap, rewind: carouselRewind, breakpoints: { diff --git a/includes/Frontend/Carousel.php b/includes/Frontend/Carousel.php index 7a45d18..421afc3 100644 --- a/includes/Frontend/Carousel.php +++ b/includes/Frontend/Carousel.php @@ -75,7 +75,7 @@ public function add_custom_attributes_to_grid_block( $block_content, $block ) { $tablet_to_view = isset( $attrs['frblTabletToView'] ) ? (int) $attrs['frblTabletToView'] : 2; $responsive_to_view = isset( $attrs['frblResponsiveToView'] ) ? (int) $attrs['frblResponsiveToView'] : 1; $autoplay = isset( $attrs['frblAutoplay'] ) ? ( (int) $attrs['frblAutoplay'] * 1000 ) : ''; - $gap = isset( $attrs['frblGap'] ) && $attrs['frblGap'] !== '' ? (int) $attrs['frblGap'] : 20; + $gap = isset( $attrs['frblGap'] ) && '' !== $attrs['frblGap'] ? (int) $attrs['frblGap'] : 20; $rewind = isset( $attrs['frblRewind'] ) ? (bool) $attrs['frblRewind'] : true; $buttons = isset( $attrs['frblButtons'] ) ? sanitize_text_field( $attrs['frblButtons'] ) : 'arrows'; $button_color = isset( $attrs['frblButtonColor'] ) ? sanitize_text_field( $attrs['frblButtonColor'] ) : ''; @@ -141,7 +141,7 @@ public function add_custom_attributes_to_element_block( $block_content, $block ) $tablet_to_view = isset( $attrs['frblTabletToView'] ) ? (int) $attrs['frblTabletToView'] : 2; $responsive_to_view = isset( $attrs['frblResponsiveToView'] ) ? (int) $attrs['frblResponsiveToView'] : 1; $autoplay = isset( $attrs['frblAutoplay'] ) ? ( (int) $attrs['frblAutoplay'] * 1000 ) : ''; - $gap = isset( $attrs['frblGap'] ) && $attrs['frblGap'] !== '' ? (int) $attrs['frblGap'] : 20; + $gap = isset( $attrs['frblGap'] ) && '' !== $attrs['frblGap'] ? (int) $attrs['frblGap'] : 20; $rewind = isset( $attrs['frblRewind'] ) ? (bool) $attrs['frblRewind'] : true; $buttons = isset( $attrs['frblButtons'] ) ? sanitize_text_field( $attrs['frblButtons'] ) : 'arrows'; $button_color = isset( $attrs['frblButtonColor'] ) ? sanitize_text_field( $attrs['frblButtonColor'] ) : ''; @@ -207,7 +207,7 @@ public function add_custom_attributes_to_core_group_block( $block_content, $bloc $tablet_to_view = isset( $attrs['frblTabletToView'] ) ? (int) $attrs['frblTabletToView'] : 2; $responsive_to_view = isset( $attrs['frblResponsiveToView'] ) ? (int) $attrs['frblResponsiveToView'] : 1; $autoplay = isset( $attrs['frblAutoplay'] ) ? ( (int) $attrs['frblAutoplay'] * 1000 ) : ''; - $gap = isset( $attrs['frblGap'] ) && $attrs['frblGap'] !== '' ? (int) $attrs['frblGap'] : 20; + $gap = isset( $attrs['frblGap'] ) && '' !== $attrs['frblGap'] ? (int) $attrs['frblGap'] : 20; $rewind = isset( $attrs['frblRewind'] ) ? (bool) $attrs['frblRewind'] : true; $buttons = isset( $attrs['frblButtons'] ) ? sanitize_text_field( $attrs['frblButtons'] ) : 'arrows'; $button_color = isset( $attrs['frblButtonColor'] ) ? sanitize_text_field( $attrs['frblButtonColor'] ) : ''; From 634e13ce9970901fc88c24084f27fea339d427c7 Mon Sep 17 00:00:00 2001 From: castellon Date: Fri, 20 Feb 2026 11:25:05 +0100 Subject: [PATCH 3/3] Change class and delete importants --- assets/carousel/frontblocks-carousel.css | 205 +++++++++++++---------- assets/carousel/frontblocks-carousel.js | 6 +- 2 files changed, 115 insertions(+), 96 deletions(-) diff --git a/assets/carousel/frontblocks-carousel.css b/assets/carousel/frontblocks-carousel.css index 959ee94..371e4dd 100644 --- a/assets/carousel/frontblocks-carousel.css +++ b/assets/carousel/frontblocks-carousel.css @@ -1,8 +1,8 @@ /** -* ## Glide Carousel style -* --------------------------- */ + * Frontblocks Carousel – scoped under .frontblocks so other Glide instances are not affected. + */ -.glide { +.frontblocks.glide { position: relative; width: 100%; max-width: 100%; @@ -11,10 +11,12 @@ margin: 0; padding: 0; } -.glide * { + +.frontblocks.glide * { box-sizing: inherit; } -.glide__track { + +.frontblocks .glide__track { overflow: hidden; width: 100%; position: relative; @@ -22,7 +24,8 @@ margin: 0; padding: 0; } -.glide__slides { + +.frontblocks .glide__slides { position: relative; width: 100%; list-style: none; @@ -37,10 +40,12 @@ flex-wrap: nowrap; will-change: transform; } -.glide__slides--dragging { + +.frontblocks .glide__slides--dragging { user-select: none; } -.glide__slide { + +.frontblocks .glide__slide { width: 100%; height: 100%; flex-shrink: 0; @@ -49,27 +54,29 @@ -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } -.glide__slide a { + +.frontblocks .glide__slide a { user-select: none; -webkit-user-drag: none; -moz-user-select: none; -ms-user-select: none; } -.glide__arrows { + +.frontblocks .glide__arrows { -webkit-touch-callout: none; user-select: none; } -.glide__bullets { + +.frontblocks .glide__bullets { -webkit-touch-callout: none; user-select: none; } -.glide--rtl { + +.frontblocks.glide--rtl { direction: rtl; } -/*# sourceMappingURL=glide.core.css.map */ - -.glide__arrow { +.frontblocks .glide__arrow { position: absolute; display: block; top: 50%; @@ -86,22 +93,28 @@ transform: translateY(-50%); line-height: 1; } -.glide__arrow:focus { + +.frontblocks .glide__arrow:focus { outline: none; } -.glide__arrow:hover { + +.frontblocks .glide__arrow:hover { border-color: white; } -.glide__arrow--left { + +.frontblocks .glide__arrow--left { left: 1em; } -.glide__arrow--right { + +.frontblocks .glide__arrow--right { right: 1em; } -.glide__arrow--disabled { + +.frontblocks .glide__arrow--disabled { opacity: 0.33; } -.glide__bullets { + +.frontblocks .glide__bullets { position: absolute; z-index: 2; bottom: -1em; @@ -111,7 +124,8 @@ transform: translateX(-50%); gap: 5px; } -.glide__bullet { + +.frontblocks .glide__bullet { background-color: rgba(255, 255, 255, 0.5); width: 13px; height: 13px; @@ -123,111 +137,116 @@ line-height: 0; margin: 0; } -.glide__bullet:focus { + +.frontblocks .glide__bullet:focus { outline: none; } -.glide__bullet:hover, .glide__bullet:focus { + +.frontblocks .glide__bullet:hover, +.frontblocks .glide__bullet:focus { border: 2px solid white; background-color: rgba(255, 255, 255, 0.5); } -.glide__bullet--active { + +.frontblocks .glide__bullet--active { background-color: white; } -.glide--swipeable { + +.frontblocks.glide--swipeable { cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } -.glide--dragging { + +.frontblocks.glide--dragging { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } -.glide__arrows--bottom .glide__arrow { - top: calc(100% + 25px); - left: 0; + +.frontblocks .glide__arrows--bottom .glide__arrow { + top: calc(100% + 25px); + left: 0; } -.glide__arrows--bottom .glide__arrow--right { - left: 50px; - right: unset; + +.frontblocks .glide__arrows--bottom .glide__arrow--right { + left: 50px; + right: unset; } -/* Arrows position top/side - spans full container width */ -.glide__arrows--top { - position: absolute; - top: 50%; - left: 0; - right: 0; - width: 100%; - z-index: 10; - pointer-events: none; - transform: translateY(-50%); + +.frontblocks .glide__arrows--top { + position: absolute; + top: 50%; + left: 0; + right: 0; + width: 100%; + z-index: 10; + pointer-events: none; + transform: translateY(-50%); } -.glide__arrows--top .glide__arrow { - pointer-events: all; + +.frontblocks .glide__arrows--top .glide__arrow { + pointer-events: all; } -.glide__arrows--top .glide__arrow--left { - left: 2em; + +.frontblocks .glide__arrows--top .glide__arrow--left { + left: 2em; } -.glide__arrows--top .glide__arrow--right { - right: 2em; + +.frontblocks .glide__arrows--top .glide__arrow--right { + right: 2em; } -/* Responsive - keep arrows inside on small screens */ + @media only screen and (max-width: 768px) { - .glide__arrow--left { - left: 0.5em; - } - .glide__arrow--right { - right: 0.5em; - } + .frontblocks .glide__arrow--left { + left: 0.5em; + } + .frontblocks .glide__arrow--right { + right: 0.5em; + } } -/*# sourceMappingURL=glide.theme.css.map */ - /** - * Override native Gutenberg Grid styles when carousel is active + * Override native Gutenberg Grid styles when carousel is active (scoped to frontblocks carousel). */ .wp-block-group.frontblocks-carousel, .wp-block-group.frontblocks-carousel.is-layout-grid { - display: block !important; - grid-template-columns: none !important; - gap: 0 !important; + display: block; + grid-template-columns: none; + gap: 0; } -/* Prevent parent from creating left gap - carousel must span full width */ -.wp-block-group.frontblocks-carousel .glide, -.wp-block-group.frontblocks-carousel .glide__track { - width: 100% !important; - max-width: 100% !important; - margin-left: 0 !important; - margin-right: 0 !important; - padding-left: 0 !important; - padding-right: 0 !important; +.wp-block-group.frontblocks-carousel .frontblocks.glide, +.wp-block-group.frontblocks-carousel .frontblocks .glide__track { + width: 100%; + max-width: 100%; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; } .wp-block-group.frontblocks-carousel > * { - width: 100%; + width: 100%; } -/* Ensure inner container doesn't interfere with carousel */ .wp-block-group.frontblocks-carousel > .wp-block-group__inner-container { - display: block !important; - grid-template-columns: none !important; - gap: 0 !important; - width: 100%; -} - -/* Override grid styles for direct children in carousel mode */ -.glide__slides.wp-block-group, -.glide__slides.wp-block-group.is-layout-grid { - display: flex !important; - grid-template-columns: none !important; - gap: 0 !important; - column-gap: 0 !important; - row-gap: 0 !important; -} - -/* Ensure slides have proper width */ -.glide__slides > .glide__slide { - min-width: 0; - flex-shrink: 0; + display: block; + grid-template-columns: none; + gap: 0; + width: 100%; +} + +.frontblocks .glide__slides.wp-block-group, +.frontblocks .glide__slides.wp-block-group.is-layout-grid { + display: flex; + grid-template-columns: none; + gap: 0; + column-gap: 0; + row-gap: 0; +} + +.frontblocks .glide__slides > .glide__slide { + min-width: 0; + flex-shrink: 0; } diff --git a/assets/carousel/frontblocks-carousel.js b/assets/carousel/frontblocks-carousel.js index 6c1f4f4..c673414 100644 --- a/assets/carousel/frontblocks-carousel.js +++ b/assets/carousel/frontblocks-carousel.js @@ -28,7 +28,7 @@ window.addEventListener('load', function (event) { parentwrap.replaceChild(wrapperParent, wrapper); wrapperParent.appendChild(wrapper); - wrapperParent.classList.add('glide'); + wrapperParent.classList.add('frontblocks', 'glide'); // Options const carouselType = item.getAttribute('data-type') ? item.getAttribute('data-type') : 'carousel'; @@ -79,8 +79,8 @@ window.addEventListener('load', function (event) { // Add custom CSS for active bullet color const style = document.createElement('style'); style.textContent = ` - .glide__bullet.glide__bullet--active { - background-color: ${carouselbuttonsColor} !important; + .frontblocks .glide__bullet.glide__bullet--active { + background-color: ${carouselbuttonsColor}; } `; document.head.appendChild(style);