Add block identification attributes and fix editor preview compatibility

.tool-versions

@@ -0,0 +1 @@
+nodejs 22.18.0

assets/call-to-action.css

@@ -1,6 +1,5 @@
 .cta {
   position: relative;
-  overflow: hidden;
 }
 
 .cta__wrapper {

assets/carousel.css

@@ -1,9 +1,13 @@
 .carousel {
   height: 100%;
   position: relative;
-  contain: content; /* Performance: Reduces the scope of layout recalculations */
   margin: 0 calc(-1 * var(--horizontal-padding));
   width: calc(100% + 2 * var(--horizontal-padding));
+  contain: content; /* Performance: Reduces the scope of layout recalculations */
+}
+
+.carousel .carousel__list .block-frame .block-frame__buttons {
+  transform: translateX(-50%) !important;
 }
 
 .carousel__wrapper {

assets/collections.css

@@ -26,7 +26,6 @@
 .collections__item {
   height: 100%;
   position: relative;
-  overflow: hidden;
   border-radius: var(--border-radius-block-rounded);
 }
 
@@ -73,6 +72,7 @@
 .collections__image-item {
   display: block;
   position: absolute;
+  overflow: hidden;
   inset: 0;
 }
 

assets/critical.css

@@ -292,7 +292,6 @@ img {
 /* Critical Images section styles */
 .images__wrapper {
   height: 100%;
-  overflow: hidden;
   position: relative;
   display: flex;
   align-items: stretch;

assets/mosaic.css

@@ -14,7 +14,6 @@
 .mosaic__item {
   padding: 15px;
   border: 1px solid transparent;
-  overflow: hidden;
   margin: 0 0 30px;
   border-radius: var(--border-radius-block-rounded);
   contain: layout;
@@ -57,37 +56,39 @@
 
 .mosaic__image {
   max-height: 50px;
+  min-width: 40px;
   width: auto;
   border-radius: var(--border-radius-block-rounded);
 }
 
-.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child,
-.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child {
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image,
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image,
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image,
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image {
   margin: 0;
   width: 100%;
-}
-
-.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child .mosaic__image-wrapper,
-.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child .mosaic__image-wrapper {
   aspect-ratio: 1 / 0.76;
-  width: 100%;
 }
 
-.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child .mosaic__image-wrapper:has(.mosaic__image-placeholder),
-.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child .mosaic__image-wrapper:has(.mosaic__image-placeholder) {
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image .mosaic__image-wrapper,
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image .mosaic__image-wrapper,
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image .mosaic__image-wrapper,
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image .mosaic__image-wrapper {
   width: 100%;
+  height: 100%;
 }
 
-.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child.no-image,
-.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child.no-image,
-.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image,
-.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image {
-  aspect-ratio: 1 / 0.76;
-  height: auto;
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image .mosaic__image-wrapper:has(.mosaic__image-placeholder),
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image .mosaic__image-wrapper:has(.mosaic__image-placeholder),
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image .mosaic__image-wrapper:has(.mosaic__image-placeholder),
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image .mosaic__image-wrapper:has(.mosaic__image-placeholder) {
+  width: 100%;
 }
 
-.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child .mosaic__image,
-.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child .mosaic__image {
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image .mosaic__image,
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image .mosaic__image,
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image .mosaic__image,
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image .mosaic__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -309,24 +310,12 @@
     align-items: center;
   }
 
-  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child,
-  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child {
+  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image,
+  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image,
+  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image,
+  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image {
     aspect-ratio: 1 / 1.3;
     width: 53%;
-    height: 100%;
-  }
-
-  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child .mosaic__image-wrapper,
-  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child .mosaic__image-wrapper {
-    aspect-ratio: auto;
-    height: 100%;
-  }
-
-  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child.no-image,
-  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child.no-image,
-  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image,
-  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image {
-    height: 100%;
   }
 
   .mosaic__item-col--image,

assets/numbered-blocks.css

@@ -28,7 +28,6 @@
   border: 1px solid transparent;
   border-top: none;
   border-radius: var(--border-radius-block-rounded);
-  overflow: hidden;
 }
 
 .numbered-blocks__item-col:last-child:not(:only-child) {

sections/columns.liquid

@@ -82,7 +82,7 @@
           {%- assign button_url   = block.settings.button_url -%}
           {%- assign button_style = block.settings.button_style -%}
 
-          <div class="columns__item" id="{{- block.id -}}">
+          <div class="columns__item" id="{{- block.id -}}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
             {%- if image.url != blank -%}
               <div class="columns__image-wrapper">
                 {%- render 'image',

sections/contact-form.liquid

@@ -162,6 +162,8 @@
             class="contact-form__holder{% if image == blank %} no-image{% endif %}"
             style="{{- image_variables | escape -}}"
             id="{{- block.id -}}"
+            data-block-key="{{ block.id }}"
+            data-block-name="{{ block.name }}"
           >
             {%- if image.url != blank -%}
               <div class="contact-form__image-wrapper">
@@ -183,6 +185,8 @@
               class="contact-form__content"
               style="{{- text_variables | escape -}}"
               id="{{- block.id -}}"
+              data-block-key="{{ block.id }}"
+              data-block-name="{{ block.name }}"
             >
               {%- if heading != blank -%}
                 <h2 class="contact-form__heading contact-form__heading--{{- heading_size -}}">{{- heading -}}</h2>

sections/images.liquid

@@ -335,8 +335,10 @@
             {% comment %} CSS variables end {% endcomment %}
 
             {%- if carousel -%}
-              <div id="{{ block.id }}" class="carousel__item{% if effect == 'fade' and first == false %} hide{% endif %}{% if effect == 'fade' and first %} show{%- endif -%}"{% if show_overlay %} data-overlay-color="{{- overlay_color | escape -}}"{% endif %} aria-label="Slide {{ index }}">
+              <div id="{{ block.id }}" class="carousel__item{% if effect == 'fade' and first == false %} hide{% endif %}{% if effect == 'fade' and first %} show{%- endif -%}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}"{% if show_overlay %} data-overlay-color="{{- overlay_color | escape -}}"{% endif %} aria-label="Slide {{ index }}">
                 <div class="carousel__inner">
+            {%- else -%}
+              <div data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
             {%- endif -%}
                   <div
                     id="{{ block.id }}"
@@ -413,6 +415,8 @@
             {%- if carousel -%}
                 </div>
               </div>
+            {%- else -%}
+              </div>
             {%- endif -%}
           {%- endfor -%}
 

sections/locations.liquid

@@ -115,7 +115,7 @@
         {%- assign country         = location.country -%}
         {%- assign label           = block.settings.label -%}
 
-        <li class="tabs__trigger" id="{{- block.id -}}">
+        <li class="tabs__trigger" id="{{- block.id -}}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
           <input type="radio" id="tab-{{- index -}}" name="tabs" class="tabs__input" style="display: none;"{% if first %} checked{%- endif -%}>
           <label for="tab-{{- index -}}" class="tabs__trigger-label">
             <span class="tabs__heading">

sections/logos.liquid

@@ -116,7 +116,7 @@
               {%- assign image     = block.settings.image -%}
               {%- assign image_alt = block.settings.alt -%}
 
-              <div class="logos__image-wrapper" id="{{- block.id -}}">
+              <div class="logos__image-wrapper" id="{{- block.id -}}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
                 {%- if image.url != blank -%}
                   {%- render 'image',
                     image: image,

sections/mosaic.liquid

@@ -87,7 +87,7 @@
             {%- assign image = blank -%}
           {%- endif -%}
 
-          <div class="mosaic__item" id="{{- block.id -}}">
+          <div class="mosaic__item" id="{{- block.id -}}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
             <div class="mosaic__item-col{% if image == blank %} no-image{% else %} mosaic__item-col--image{%- endif -%}">
               {%- if image.url != blank -%}
                 {%- render 'image',

sections/numbered-blocks.liquid

@@ -111,7 +111,7 @@
           {%- endcapture -%}
           {% comment %} CSS variables end {% endcomment %}
 
-          <div class="numbered-blocks__item" id="{{- block.id -}}" style="{{- block_variables | escape -}}">
+          <div class="numbered-blocks__item" id="{{- block.id -}}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}" style="{{- block_variables | escape -}}">
             <div class="numbered-blocks__item-col">
               <div class="numbered-blocks__text-area">
                 <span class="numbered-blocks__index">{{- index -}}</span>

sections/products.liquid

@@ -136,8 +136,12 @@
               {%- endif -%}
 
               {%- if carousel -%}
-                <div id="{{ id }}" class="carousel__item" data-index="{{- index -}}" aria-label="Slide {{ index }}">
+                <div id="{{ id }}" class="carousel__item"{% if items_type == 'blocks' %} data-block-key="{{ item.id }}" data-block-name="{{ item.name }}"{% endif %} data-index="{{- index -}}" aria-label="Slide {{ index }}">
                   <div class="carousel__inner">
+              {%- else -%}
+                {%- if items_type == 'blocks' -%}
+                  <div id="{{ id }}" data-block-key="{{ item.id }}" data-block-name="{{ item.name }}">
+                {%- endif -%}
               {%- endif -%}
                     {%- render 'product-card',
                         block_id: id,
@@ -148,6 +152,10 @@
               {%- if carousel -%}
                   </div>
                 </div>
+              {%- else -%}
+                {%- if items_type == 'blocks' -%}
+                  </div>
+                {%- endif -%}
               {%- endif -%}
             {%- endfor -%}
 

sections/testimonials.liquid

@@ -117,8 +117,10 @@
               {%- assign stars       = block.settings.stars -%}
 
               {%- if carousel -%}
-                <div id="{{ block.id }}" class="carousel__item" data-index="{{- index -}}" aria-label="Slide {{ index }}">
+                <div id="{{ block.id }}" class="carousel__item" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}" data-index="{{- index -}}" aria-label="Slide {{ index }}">
                   <div class="carousel__inner">
+              {%- else -%}
+                <div data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
               {%- endif -%}
                     <div  id="{{ block.id }}" class="testimonials__content">
                       {%- if title != blank or description != blank -%}
@@ -187,6 +189,8 @@
               {%- if carousel -%}
                   </div>
                 </div>
+              {%- else -%}
+                </div>
               {%- endif -%}
             {%- endfor -%}
 

snippets/accordion-block.liquid

@@ -22,7 +22,7 @@
       {%- assign heading = block.settings.heading -%}
       {%- assign content = block.settings.content -%}
 
-      <li class="accordion-block__item" id="{{- block.id -}}">
+      <li class="accordion-block__item" id="{{- block.id -}}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
         {%- if heading != blank -%}
           <input
             {% if behavior == "single" %}type="radio"{% else %}type="checkbox"{% endif %}

snippets/collections-grid.liquid

@@ -70,7 +70,7 @@
       {%- assign image   = placeholder -%}
     {%- endif -%}
 
-    <li class="collections__item" id="{{- id -}}">
+    <li class="collections__item" id="{{- id -}}"{% if items_type == "blocks" %} data-block-key="{{ item.id }}" data-block-name="{{ item.name }}"{% endif %}>
       {%- if collection != blank -%}
         <a class="collections__link" href="{{ url }}">
       {%- endif -%}