Add block.shopify_attributes to blocks (Shopify#68)

rwzc · Jun 30, 2021 · f3f336b · f3f336b
1 parent e06c6f5
commit f3f336b
Show file tree

Hide file tree

Showing 13 changed files with 129 additions and 120 deletions.
diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid
@@ -1,7 +1,7 @@
 {%- for block in section.blocks -%}
   {%- case block.type -%}
     {%- when 'announcement' -%}
-      <div class="announcement-bar color-{{ block.settings.color_scheme }}" role="region" aria-label="{{ 'sections.header.announcement' | t }}">
+      <div class="announcement-bar color-{{ block.settings.color_scheme }}" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
         {%- if block.settings.text != blank -%}
           {%- if block.settings.link != blank -%}
             <a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">

diff --git a/sections/collage.liquid b/sections/collage.liquid
@@ -20,7 +20,7 @@
       %}
       {%- case block.type -%}
         {%- when 'image' -%}
-          <div class="collage-card color-{{ block.settings.color_scheme }}{% if focus_card_left %} collage-card--left{% elsif focus_card_right %} collage-card--right{% endif %}">
+          <div class="collage-card color-{{ block.settings.color_scheme }}{% if focus_card_left %} collage-card--left{% elsif focus_card_right %} collage-card--right{% endif %}" {{ block.shopify_attributes }}>
             <div class="collage-content collage-card__image-wrapper media media--transparent{% if block.settings.image_padding %} collage-card-spacing{% endif %}">
               {%- if block.settings.image != blank -%}
                 <img srcset="{%- if block.settings.image.width >= 500 -%}{{ block.settings.image | img_url: '500x' }} 500w,{%- endif -%}
@@ -46,7 +46,7 @@
           <div class="collage-card collage-product card-wrapper{% if focus_card_left %} collage-card--left{% elsif focus_card_right %} collage-card--right{% endif %}">
             {%- if block.settings.product != blank -%}
               {%- assign featured_media = block.settings.product.selected_or_first_available_variant.featured_media | default: block.settings.product.featured_media -%}
-              <a href="{{ block.settings.product.url }}" class="collage-content full-unstyled-link card{% if block.settings.secondary_background %} card-colored color-background-1{% endif %}{% if block.settings.image_padding %} collage-card-spacing{% endif %}">
+              <a href="{{ block.settings.product.url }}" class="collage-content full-unstyled-link card{% if block.settings.secondary_background %} card-colored color-background-1{% endif %}{% if block.settings.image_padding %} collage-card-spacing{% endif %}" {{ block.shopify_attributes }}>
                 {%- if featured_media != blank -%}
                   <div class="collage-card__image-wrapper media media--transparent media--hover-effect"
                     {% if focus_card_left and forloop.first %}
@@ -137,7 +137,7 @@
           </div>
 
         {%- when 'collection'-%}
-          <div class="collage-card color-{{ block.settings.color_scheme }}{% if focus_card_left %} collage-card--left{% elsif focus_card_right %} collage-card--right{% endif %}">
+          <div class="collage-card color-{{ block.settings.color_scheme }}{% if focus_card_left %} collage-card--left{% elsif focus_card_right %} collage-card--right{% endif %}" {{ block.shopify_attributes }}>
               {%- if block.settings.collection != blank -%}
                 <a href="{{ block.settings.collection.url }}" class="card animate-arrow">
                   <div class="collage-content card-colored color-{{ block.settings.color_scheme }}{% if block.settings.image_padding %} collage-card-spacing{% endif %}">
@@ -190,7 +190,7 @@
           </div>
 
         {%- when 'video' -%}
-          <div class="collage-card collage-video{% if focus_card_left %} collage-card--left{% elsif focus_card_right %} collage-card--right{% endif %}">
+          <div class="collage-card collage-video{% if focus_card_left %} collage-card--left{% elsif focus_card_right %} collage-card--right{% endif %}" {{ block.shopify_attributes }}>
             <noscript>
               <a href="{{ block.settings.video_url }}" class="card{% if block.settings.cover_image == blank %} collage-video-placeholder{% endif %}"
                 {% if block.settings.cover_image != blank and focus_card_left and forloop.first %}

diff --git a/sections/collection-list.liquid b/sections/collection-list.liquid
@@ -20,7 +20,7 @@
       role="list"
     >
       {%- for block in section.blocks -%}
-        <li class="collection-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}">
+        <li class="collection-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}" {{ block.shopify_attributes }}>
           <a{% if block.settings.collection != blank and block.settings.collection.all_products_count > 0 %} href="{{ block.settings.collection.url }}"{% endif %}
             class="card animate-arrow link{% if block.settings.collection.image != blank %} card--media{% else %}{% if section.settings.image_ratio != 'adapt' %} card--stretch{% endif %}{% endif %}{% unless section.settings.image_padding %} card--light-border{% endunless %}"
           >

diff --git a/sections/footer.liquid b/sections/footer.liquid
@@ -31,9 +31,8 @@
         -%}
         <div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
           {%- for block in section.blocks -%}
-
             {%- if block.type == 'link_list' and block.settings.heading != blank -%}
-              <div class="accordion">
+              <div class="accordion" {{ block.shopify_attributes }}>
                 <details>
                   <summary><h2 class="h4 accordion__title">{{ block.settings.heading | escape }}</h2>{% render 'icon-caret' %}</summary>
                   {%- if block.settings.menu != blank -%}
@@ -51,7 +50,7 @@
               </div>
             {%- endif -%}
 
-            <div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu small-hide{% endif %}">
+            <div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu small-hide{% endif %}" {{ block.shopify_attributes }}>
               {%- if block.settings.heading != blank -%}
                 <h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
               {%- endif -%}

diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid
@@ -58,15 +58,15 @@
       {%- for block in section.blocks -%}
         {%- case block.type -%}
           {%- when 'heading' -%}
-            <h2 class="banner__heading h1">
+            <h2 class="banner__heading h1" {{ block.shopify_attributes }}>
               <span>{{ block.settings.heading | escape }}</span>
             </h2>
           {%- when 'text' -%}
-            <div class="banner__text">
+            <div class="banner__text" {{ block.shopify_attributes }}>
               <span>{{ block.settings.text | escape }}</span>
             </div>
           {%- when 'buttons' -%}
-            <div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_link_1 != blank and block.settings.button_label_2 != blank and block.settings.button_link_2 != blank %} banner__buttons--multiple{% endif %}">
+            <div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_link_1 != blank and block.settings.button_label_2 != blank and block.settings.button_link_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
               {%- if block.settings.button_label_1 != blank -%}
                 <a href="{{ block.settings.button_link_1 }}" class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_1 == blank %} aria-disabled="true"{% endif %}>{{ block.settings.button_label_1 | escape }}</a>
               {%- endif -%}

diff --git a/sections/image-with-text.liquid b/sections/image-with-text.liquid
@@ -30,14 +30,16 @@
         {%- for block in section.blocks -%}
           {% case block.type %}
             {%- when 'heading' -%}
-              <h2 class="image-with-text__heading h1">
+              <h2 class="image-with-text__heading h1" {{ block.shopify_attributes }}>
                 {{ block.settings.heading | escape }}
               </h2>
             {%- when 'text' -%}
-              <div class="image-with-text__text rte">{{ block.settings.text }}</div>
+              <div class="image-with-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
             {%- when 'button' -%}
               {%- if block.settings.button_label != blank -%}
-                <a href="{{ block.settings.button_link }}" class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>{{ block.settings.button_label | escape }}</a>
+                <a href="{{ block.settings.button_link }}" class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
+                  {{ block.settings.button_label | escape }}
+                </a>
               {%- endif -%}
           {%- endcase -%}
         {%- endfor -%}

diff --git a/sections/main-article.liquid b/sections/main-article.liquid
@@ -5,7 +5,7 @@
     {%- case block.type -%}
       {%- when 'featured_image'-%}
         {%- if article.image -%}
-          <div class="article-template__hero-container">
+          <div class="article-template__hero-container" {{ block.shopify_attributes }}>
             <div class="article-template__hero-{{ block.settings.image_height }} media"
               itemprop="image"
               {% if block.settings.image_height == 'adapt' and article.image %} style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"{% endif %}
@@ -27,7 +27,7 @@
         {%- endif -%}
 
         {%- when 'title'-%}
-          <header class="page-width page-width--narrow">
+          <header class="page-width page-width--narrow" {{ block.shopify_attributes }}>
             <h1 class="article-template__title" itemprop="headline">{{ article.title | escape }}</h1>
             {%- if block.settings.blog_show_date -%}
               <span class="circle-divider caption-with-letter-spacing" itemprop="dateCreated pubdate datePublished">{{ article.published_at | time_tag: format: 'month_year' }}</span>
@@ -40,12 +40,12 @@
           </header>
 
         {%- when 'content'-%}
-          <div class="article-template__content page-width page-width--narrow rte" itemprop="articleBody">
+          <div class="article-template__content page-width page-width--narrow rte" itemprop="articleBody" {{ block.shopify_attributes }}>
               {{ article.content }}
           </div>
 
         {%- when 'social_sharing'-%}
-          <div class="article-template__social-sharing page-width page-width--narrow">
+          <div class="article-template__social-sharing page-width page-width--narrow" {{ block.shopify_attributes }}>
             {% render 'social-sharing', share_title: article.title, share_permalink: article.url, share_image: article.image %}
           </div>
     {%- endcase -%}

diff --git a/sections/main-cart-footer.liquid b/sections/main-cart-footer.liquid
@@ -17,7 +17,7 @@
         {% for block in section.blocks %}
           {%- case block.type -%}
             {%- when 'subtotal' -%}
-              <div class="js-contents">
+              <div class="js-contents" {{ block.shopify_attributes }}>
                 <div class="totals">
                   <h3 class="totals__subtotal">{{ 'sections.cart.subtotal' | t }}</h3>
                   <p class="totals__subtotal-value">{{ cart.total_price | money_with_currency }}</p>
@@ -50,7 +50,7 @@
                 </small>
               </div>
             {%- else -%}
-              <div class="cart__ctas">
+              <div class="cart__ctas" {{ block.shopify_attributes }}>
                 <noscript>
                   <button type="submit" class="cart__update-button button button--secondary" form="cart">
                     {{ 'sections.cart.update' | t }}