@total_onion/onion-library 2.0.66 → 2.0.67

package/components/block-accordion-v3/accordion-v3.twig

@@ -1,9 +1,8 @@
-
 {% set blockClassName = "accordion-v3" %}
 {% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
 {% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
 {% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
-{% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
 {% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 
 {% set backgroundColor = '--background-color: ' ~ fields.accordion_title.background_color ~ ';' %}
@@ -23,30 +22,30 @@
 	}
 </style>
 <section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
-	
-		<div class="{{ blockClassName }}-wrapper">
-			<div class="{{ blockClassName }}-content">
-				<h3 class="{{ blockClassName }}-question-wrapper">
-					<button class="{{ blockClassName }}-question">
+
+	<div class="{{ blockClassName }}-wrapper">
+		<div class="{{ blockClassName }}-content">
+			<h3 class="{{ blockClassName }}-question-wrapper">
+				<button class="{{ blockClassName }}-question">
 					{% set block = block|merge({'id': block.id ~ '-' ~ 1 }) %}
 					{{ include('components/wysiwyg-editor-v3.twig', { fields: fields.title, block, blockClassName}, with_context = false, ignore_missing = true) }}
-						{% if enableCustomIcon %}
-							<div class="{{ blockClassName }}-image-wrapper">
-								<img class="{{ blockClassName }}-image-icon" src="{{imageIcon.src}}" alt="{{imageIcon.alt}}" width="{{imageIcon.width}}" height="{{imageIcon.height}}">
-							</div>
-						{% else %}
-							<div class="{{ blockClassName }}-icon">
-								<div class="{{ blockClassName }}-animation"></div>
-							</div>
-						{% endif %}
-						<div class="{{ blockClassName }}-answer-wrapper" aria-hidden="true">
-					{% set block = block|merge({'id': block.id ~ '-' ~ 2 }) %}
-					{{ include('components/wysiwyg-editor-v3.twig', { fields: fields.text, block, blockClassName}, with_context = false, ignore_missing = true) }}
+					{% if enableCustomIcon %}
+						<div class="{{ blockClassName }}-image-wrapper">
+							<img class="{{ blockClassName }}-image-icon" src="{{imageIcon.src}}" alt="{{imageIcon.alt}}" width="{{imageIcon.width}}" height="{{imageIcon.height}}">
+						</div>
+					{% else %}
+						<div class="{{ blockClassName }}-icon">
+							<div class="{{ blockClassName }}-animation"></div>
+						</div>
+					{% endif %}
+					<div class="{{ blockClassName }}-answer-wrapper" aria-hidden="true">
+						{% set block = block|merge({'id': block.id ~ '-' ~ 2 }) %}
+						{{ include('components/wysiwyg-editor-v3.twig', { fields: fields.text, block, blockClassName}, with_context = false, ignore_missing = true) }}
 					</div>
-					</button>
-				</h3>
-			</div>
+				</button>
+			</h3>
 		</div>
-	
+	</div>
+
 	{{htmlEntryPoint}}
-</section>
+</section>

package/components/block-betterreviews-display-v3/betterreviews-display-v3.twig

@@ -1,9 +1,8 @@
-
 {% set blockClassName = "betterreviews-display-v3" %}
 {% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
-{% set htmlEntryPoint = include('entry-points/entry-point-html.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
 {% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
-{% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
 {% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 
 {% set featureEnabled = environment != 'prod' %}

package/components/block-block-interactions-v3/block-interactions-v3.twig

@@ -11,8 +11,7 @@
 		{{sectionStyles}}
 	}
 </style>
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{fields.section_class}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-parentblockid="{{block.videoIdPrefix}}" data-assetkey="{{blockClassName}}">
-
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-parentblockid="{{block.videoIdPrefix}}" data-assetkey="{{blockClassName}}">
 	{% set blockInteractionsEnabled = fields.enable_block_interactions %}
 	{% set enableInteractionsButton = fields.enable_interactions_button %}
 	{% set interactionsButtonType = fields.interactions_button_type %}
@@ -27,7 +26,7 @@
 				{% set enableCtaIcon = ctaData.cta_settings.include_cta_icon %}
 				{% set ctaAnimationStyle = ctaData.cta_settings.cta_animation_style %}
 			{% endif %}
-
+			
 			{% for item in fields.modal_popup_triggers %}
 				{% if item.cta_style|ru matches '/^\\d+$/' %}
 					{% set ctaData = attribute(cta_styles['theme_cta_styles'], item.cta_style|ru - 1) %}
@@ -40,12 +39,11 @@
 						{% if item.modal_popup_trigger_text %}
 							<span class="{{blockClassName}}__popup-trigger-text">{{ item.modal_popup_trigger_text }}</span>
 						{% endif %}
-						<span
-							class="{{blockClassName}}__popup-trigger-icon">
-							{# <img src="{{ get_image(options.theme_cta_icons[item.trigger_icon_type|ru]).src }}"> #}
-							<img src="{{ options.cta_icons[item.trigger_icon_type|ru].src }}" alt="modal trigger icon">
-
-
+						<span class="{{blockClassName}}__popup-trigger-icon">
+						{# <img src="{{ get_image(options.theme_cta_icons[item.trigger_icon_type|ru]).src }}"> #}
+						<img src="{{ options.cta_icons[item.trigger_icon_type|ru].src }}" alt="modal trigger icon">
+						
+						
 						</span>
 					</button>
 				{% else %}

package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.twig

@@ -1,11 +1,13 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
 {% set blockClassName = "carousel-multi-layout-v3" %}
 {% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
 {% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields, block, blockClassName, options, environment, is_preview, nav_menus }, with_context = false) %}
 {% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields, block }, with_context = false) %}
-{% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 {% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 
-{# {% set blockOverflow = '--block-overflow:' ~ fields.block_overflow|ru ~ ';' %} #}
+
+{% set blockOverflow = '--block-overflow:' ~ fields.block_overflow|ru ~ ';' %}
 
 {% set arrowColour = '--swiper-arrow-colour:' ~ fields.carousel_nav_arrow_colour|ru ~ ';' %}
 {% set paginationColour = '--swiper-pagination-colour:' ~ fields.carousel_pagination_colour|ru ~ ';' %}
@@ -102,7 +104,7 @@
 		{{sectionStyles}}
 	}
 </style>
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{ blockClassName }} lazy-fade {{block.id}} {{fields.section_class}} {{classNameEntryPoint}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} " {{sectionDataAttributes}} data-mobileslidesoffsetbefore="{{carousel_slides_offset_before_mobile}}" data-mobileslidesoffsetafter="{{carousel_slides_offset_after_mobile}}" data-tabletslidesoffsetbefore="{{carousel_slides_offset_before_tablet}}" data-tabletslidesoffsetafter="{{carousel_slides_offset_after_tablet}}" data-desktopslidesoffsetbefore="{{carousel_slides_offset_before_desktop}}" data-desktopslidesoffsetafter="{{carousel_slides_offset_after_desktop}}" data-desktopspacebetweenslides="{{fields.carousel_space_between_slides_desktop}}" data-mobilespacebetweenslides="{{fields.carousel_space_between_slides_mobile}}" data-tabletspacebetweenslides="{{fields.carousel_space_between_slides_tablet}}" data-centeractiveslide="{{fields.carousel_center_active_slide}}" data-centeractiveslideportrait="{{fields.center_active_slide_portrait}}" data-centeractiveslidemobile="{{fields.center_active_slide_mobile}}" data-loopslides="{{fields.loop_slides}}" data-loopslidesportrait="{{fields.loop_slides_portrait}}" data-loopslidesmobile="{{fields.loop_slides_mobile}}" data-paginationstyle="{{carouselPaginationStyle}}" data-assetkey="{{ blockClassName }}">
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{ blockClassName }} lazy-fade {{block.id}} {{block.className}} {{classNameEntryPoint}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} " {{sectionDataAttributes}} data-mobileslidesoffsetbefore="{{carousel_slides_offset_before_mobile}}" data-mobileslidesoffsetafter="{{carousel_slides_offset_after_mobile}}" data-tabletslidesoffsetbefore="{{carousel_slides_offset_before_tablet}}" data-tabletslidesoffsetafter="{{carousel_slides_offset_after_tablet}}" data-desktopslidesoffsetbefore="{{carousel_slides_offset_before_desktop}}" data-desktopslidesoffsetafter="{{carousel_slides_offset_after_desktop}}" data-desktopspacebetweenslides="{{fields.carousel_space_between_slides_desktop}}" data-mobilespacebetweenslides="{{fields.carousel_space_between_slides_mobile}}" data-tabletspacebetweenslides="{{fields.carousel_space_between_slides_tablet}}" data-centeractiveslide="{{fields.carousel_center_active_slide}}" data-centeractiveslideportrait="{{fields.center_active_slide_portrait}}" data-centeractiveslidemobile="{{fields.center_active_slide_mobile}}" data-loopslides="{{fields.loop_slides}}" data-loopslidesportrait="{{fields.loop_slides_portrait}}" data-loopslidesmobile="{{fields.loop_slides_mobile}}" data-paginationstyle="{{carouselPaginationStyle}}" data-assetkey="{{ blockClassName }}">
 
 	{% set arrowData = fields %}
 	<div class="{{ blockClassName }}__inner-container">

package/components/block-cover-link-v3/cover-link-v3.twig

@@ -2,7 +2,7 @@
 {% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
 {% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
 {% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
-{% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
 {% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 {% set sectionStyles =  styleEntryPoint %}
 {{previewEntryPoint}}

package/components/block-divider-v3/divider-v3.twig

@@ -4,7 +4,7 @@
 {% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
 {% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields, block, blockClassName, options, environment, is_preview, nav_menus }, with_context = false) %}
 {% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields, block }, with_context = false) %}
-{% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 {% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 {% set blockBgColour = '--divider-v3-background-colour:' ~ fields.background_colour|ru ~ ';' %}
 {% if fields.block_background_colour_type and fields.block_background_colour_type|ru != 'colour-picker' %}

package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.twig

@@ -6,8 +6,8 @@
 {% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
 {% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 {% set sectionStyles =  styleEntryPoint %}
-{{previewEntryPoint}}
 
+{{previewEntryPoint}}
 <style>
 	.{{blockClassName}}.{{block.id}}{
 		{{sectionStyles}}
@@ -22,7 +22,7 @@
 			{% set srcset = gt_image_srcset(image) %}
 			{% set mainImageSrc = gt_image_mainsrc(image) %}
 			<div class="{{blockClassName}}__featured-image-front">
-				<img loading="lazy" class="{{blockClassName}}__featured-image" srcset="{{srcset}}" width="500" height="500" src="{{mainImageSrc}}" sizes="(min-width: 1366px) 50vw, (min-width: 1024px) 400px, 90vw" alt="{{image.alt}}">
+				<img loading="lazy" src="{{mainImageSrc}}" class="{{blockClassName}}__featured-image" srcset="{{srcset}}" width="500" height="500" sizes="(min-width: 1366px) 50vw, (min-width: 1024px) 400px, 90vw" alt="{{image.alt}}">
 			</div>
 			<div class="{{blockClassName}}__featured-image-back">
 				<img class="{{blockClassName}}__featured-image-back-logo" src="{{options.site_logos.site_logo.src}}">

package/components/block-featured-image-gallery-v3/group_5f91897095b42.json

@@ -2,13 +2,33 @@
     "key": "group_5f91897095b42",
     "title": "Block: Featured Image Gallery v3",
     "fields": [
+        {
+            "key": "field_68ef640839603",
+            "label": "Images",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "placement": "top",
+            "endpoint": 0,
+            "no_preference": 0,
+            "selected": 0
+        },
         {
             "key": "field_5f9189e9fb4a9",
             "label": "Images",
             "name": "images",
             "aria-label": "",
             "type": "repeater",
-            "instructions": "",
+            "instructions": "Image will all have 1\/1 square aspect ratio",
             "required": 0,
             "conditional_logic": 0,
             "wrapper": {
@@ -17,13 +37,14 @@
                 "id": ""
             },
             "wpml_cf_preferences": 3,
-            "collapsed": "",
+            "acfe_repeater_stylised_button": 1,
+            "layout": "block",
+            "pagination": 0,
             "min": 1,
             "max": 9,
-            "layout": "table",
-            "button_label": "Add Row",
+            "collapsed": "",
+            "button_label": "Add Image",
             "rows_per_page": 20,
-            "acfe_repeater_stylised_button": 0,
             "sub_fields": [
                 {
                     "key": "field_5f918a08fb4aa",
@@ -35,7 +56,7 @@
                     "required": 0,
                     "conditional_logic": 0,
                     "wrapper": {
-                        "width": "",
+                        "width": "33",
                         "class": "",
                         "id": ""
                     },
@@ -56,6 +77,140 @@
                     "parent_repeater": "field_5f9189e9fb4a9"
                 }
             ]
+        },
+        {
+            "key": "field_68ef6320b2063",
+            "label": "Block Padding",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "placement": "top",
+            "endpoint": 0,
+            "no_preference": 0,
+            "selected": 0
+        },
+        {
+            "key": "field_68ef632bb2064",
+            "label": "block padding fields",
+            "name": "block_padding_fields",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "clone": [
+                "group_689f66f3e26df"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0,
+            "acfe_seamless_style": 0,
+            "acfe_clone_modal": 0,
+            "acfe_clone_modal_close": 0,
+            "acfe_clone_modal_button": "",
+            "acfe_clone_modal_size": "large"
+        },
+        {
+            "key": "field_68ef62f51798c",
+            "label": "Blocks Settings",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "placement": "top",
+            "endpoint": 0,
+            "no_preference": 0,
+            "selected": 0
+        },
+        {
+            "key": "field_68ef69467bb44",
+            "label": "Block",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 0,
+            "open": 0,
+            "multi_expand": 0,
+            "endpoint": 0
+        },
+        {
+            "key": "field_68ef62fdb2062",
+            "label": "block settings fields",
+            "name": "block_settings_fields",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "clone": [
+                "group_689f649af2ac4"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0,
+            "acfe_seamless_style": 0,
+            "acfe_clone_modal": 0,
+            "acfe_clone_modal_close": 0,
+            "acfe_clone_modal_button": "",
+            "acfe_clone_modal_size": "large"
+        },
+        {
+            "key": "field_68ef694e7bb45",
+            "label": "Block end",
+            "name": "",
+            "aria-label": "",
+            "type": "accordion",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 0,
+            "open": 0,
+            "multi_expand": 0,
+            "endpoint": 1
         }
     ],
     "location": [
@@ -84,5 +239,5 @@
     "acfe_display_title": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1760373775
+    "modified": 1760520535
 }

package/components/block-gradient-layer-v3/gradient-layer-v3.twig

@@ -1,8 +1,8 @@
 {% set blockClassName = "gradient-layer-v3" %}
 {% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
-{% set htmlEntryPoint = include('entry-points/entry-point-html.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
 {% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
-{% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
 {% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 {% set sectionStyles =  styleEntryPoint %}
 {% set renderDynamic = fields.render_dynamic|default(0) %}

package/components/block-group-container-v3/group-container-v3.twig

@@ -32,7 +32,7 @@
 		{{sectionStyles}}
 	}
 </style>
-<{{blockElementType}} {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} cmpl-core-group-container-styles {{classNameEntryPoint}} lazy-fade {{block.id}}" data-blockid="{{block.id}}" {{dataAttributeEntryPoint}} data-assetkey="group-container-v3" data-render-dynamic="{{renderDynamic}}" data-render-dynamic-suffix="{{renderDynamicSuffix}}">
+<{{blockElementType}} {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} cmpl-core-group-container-styles {{classNameEntryPoint}} lazy-fade {{block.id}}" data-blockid="{{block.id}}" {{dataAttributeEntryPoint}} data-assetkey="group-container-v3" data-render-dynamic="{{renderDynamic}}" data-render-dynamic-suffix="{{renderDynamicSuffix}}">
 
 	{% if block %}
 		{% set block = block|merge({'videoIdPrefix' : block.id }) %}
@@ -42,18 +42,19 @@
 			{{layoutStyles}}
 		}
 	</style>
-	<div class="group-container-v3__grid-container {{scrollButtons}} {{layoutClass}} {{block.id}}">
+	<div class="{{blockClassName}}__grid-container cmpl-core-group-container-styles__grid-container {{scrollButtons}} {{layoutClass}} {{block.id}}">
+
 		{% for section in fields.sections %}
 			{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: section, block }, with_context = false) %}
 			{% if block %}
 				{% set block = block|merge({'anchor' : '', 'id': block.id ~ '-' ~ loop.index }) %}
 			{% endif %}
 			<style>
-				.group-container-v3__block-container.{{block.id}}{
+				.{{blockClassName}}__block-container.{{block.id}}{
 					{{gridLayoutElement}}
 				}
 			</style>
-			<div class="group-container-v3__block-container {{layoutClass}}  {{block.id}}">
+			<div class="{{blockClassName}}__block-container cmpl-core-group-container-styles__block-container {{layoutClass}} {{block.id}}">
 				{% if fields.show_block_numbers and is_preview %}
 					<div class="{{blockClassName}}__block-number">{{ loop.index }}</div>
 				{% endif %}