fix block type class

Shopify · Sep 29, 2024 · f758e5b · f758e5b
1 parent 61ec191
commit f758e5b
Show file tree

Hide file tree

Showing 23 changed files with 27 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -168,7 +168,7 @@ As with a normal setting, it is accessed via its ID.
 
 - variables should be formatted as `kebab-case`
 - use '--' for variants of a class Example: `btn btn--secondary`
-- every block should have a class `shopify-block-<name of the block>`
+- every block should have a class `shopify-block--<name of the block>`
 
 ### JS
 

diff --git a/blocks/advanced-overlay.liquid b/blocks/advanced-overlay.liquid
@@ -1,5 +1,5 @@
 <div
-  class="shopify-block-{{block.type}} {{ block.settings | class_list }} color-{{ block.settings.color_scheme }}"
+  class="shopify-block--advanced-overlay {{ block.settings | class_list }} color-{{ block.settings.color_scheme }}"
   {{ block.shopify_attributes }}
   style="
     --top: {{ block.settings.top | append: "%" }};

diff --git a/blocks/button.liquid b/blocks/button.liquid
@@ -1,4 +1,4 @@
-<div class="shopify-block-{{block.type}} spacing-bottom-{{ block.settings.spacing_bottom }}">
+<div class="shopify-block--button spacing-bottom-{{ block.settings.spacing_bottom }}">
   <button class="{{ block.settings.button_style }}
     {% if block.settings.small %}btn--small{% endif %} 
    {% if block.settings.full_width %}btn--full{% endif %}" type="submit"

diff --git a/blocks/collapsible.liquid b/blocks/collapsible.liquid
@@ -2,7 +2,7 @@
   {% if block.settings.open %}
     open="true"
   {% endif %}
-  class="shopify-block-{{block.type}}"
+  class="shopify-block--collapsible"
   {{ block.shopify_attributes }}>
   <collapsible-label class="full-width flex row space-between">
     {% comment %} Todo: Add collapsible icons {% endcomment %}

diff --git a/blocks/container.liquid b/blocks/container.liquid
@@ -1,5 +1,5 @@
 <div
-  class="shopify-block-{{block.type}} {{ block.settings | class_list }} {{ block.settings.position }} {{ block.settings.overflow }} color-{{ block.settings.color_scheme }}"
+  class="shopify-block--container {{ block.settings | class_list }} {{ block.settings.position }} {{ block.settings.overflow }} color-{{ block.settings.color_scheme }}"
   {{ block.shopify_attributes }}>
   {% content_for "blocks" %}
 </div>

diff --git a/blocks/custom-liquid.liquid b/blocks/custom-liquid.liquid
@@ -1,5 +1,5 @@
 <div
-  class="shopify-block-{{block.type}}"
+  class="shopify-block--custom-liquid"
   {{ block.shopify_attributes }}>
   {{ block.settings.liquid }}
 </div>

diff --git a/blocks/divider.liquid b/blocks/divider.liquid
@@ -1,5 +1,5 @@
 <div
-  class="shopify-block-{{block.type}} {{ block.settings | class_list }}"
+  class="shopify-block--divider {{ block.settings | class_list }}"
   {{ block.shopify_attributes }}>
   <hr>
 </div>

diff --git a/blocks/heading.liquid b/blocks/heading.liquid
@@ -1,6 +1,6 @@
 {% if block.settings.text_color != blank %}
   <style>
-    #shopify-block-{{ block.id }}{
+    #shopify-block--{{ block.id }}{
       background: {{ block.settings.text_color }};
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
@@ -9,15 +9,15 @@
 {% endif %}
 {% if block.settings.font_size != blank %}
   <style>
-    #shopify-block-{{ block.id }}{
+    #shopify-block--{{ block.id }}{
       font-size: {{ block.settings.font_size | append: "px" }};
     }
   </style>
 {% endif %}
 
 <{{ block.settings.html_tag }}
-  id="shopify-block-{{ block.id }}"
-  class="shopify-block-{{block.type}} {{ block.settings | class_list }} {{ block.settings.heading_style }} text-{{ block.settings.alignment }} spacing-bottom-{{ block.settings.spacing_bottom }}"
+  id="shopify-block--{{ block.id }}"
+  class="shopify-block--heading {{ block.settings | class_list }} {{ block.settings.heading_style }} text-{{ block.settings.alignment }} spacing-bottom-{{ block.settings.spacing_bottom }}"
   {{ block.shopify_attributes }}>
   {{ block.settings.heading }}
 </{{ block.settings.html_tag }}>

diff --git a/blocks/image.liquid b/blocks/image.liquid
@@ -9,7 +9,7 @@
 {% endif %}
 
 <div
-  class="shopify-block-{{ block.type }} {{ block.settings | class_list }} spacing-bottom-{{ block.settings.spacing_bottom }}"
+  class="shopify-block--image {{ block.settings | class_list }} spacing-bottom-{{ block.settings.spacing_bottom }}"
   {{ block.shopify_attributes }}>
     {% render "image-element",
       image: block.settings.image,

diff --git a/blocks/line-items.liquid b/blocks/line-items.liquid
@@ -1,9 +1,9 @@
 
 
 <div
-  class="shopify-block-{{block.type}} {{ block.settings | class_list }} color-{{ block.settings.color_scheme }}"
+  class="shopify-block--line-items {{ block.settings | class_list }} color-{{ block.settings.color_scheme }}"
   {{ block.shopify_attributes }}>
-  <div class="shopify-block-{{block.type}} spacing-bottom-{{ block.settings.spacing_bottom }} flex col">
+  <div class="flex col">
     {% if cart.empty? %}
       {% content_for "block", type: "container", id: "cart-empty" %}
     {% else %}

diff --git a/blocks/link.liquid b/blocks/link.liquid
@@ -1,6 +1,6 @@
 <a
   href="{{ block.settings.link }}"
-  class="shopify-block-{{ block.type }}
+  class="shopify-block--link
   {{ block.settings.button_style }} 
   spacing-bottom-{{ block.settings.spacing_bottom }}
   {% if block.settings.small %}btn--small{% endif %} 

diff --git a/blocks/linklist.liquid b/blocks/linklist.liquid
@@ -1,4 +1,4 @@
-<div class="shopify-block-{{ block.type }} flex col">
+<div class="shopify-block--linklist flex col">
   {% assign linklist = linklists[block.settings.linklist] %}
   {% if block.settings.show_title %}
     <p class="linklist-title">{{ linklist.title }}</p>

diff --git a/blocks/product-grid.liquid b/blocks/product-grid.liquid
@@ -5,7 +5,7 @@
     {% assign products = block.settings.collection.products %}
 {% endcase %}
 <div
-  class="shopify-block-{{ block.type }} {{ block.settings.spacing | class_list }} color-{{ block.settings.color_scheme }}">
+  class="shopify-block--product-grid {{ block.settings.spacing | class_list }} color-{{ block.settings.color_scheme }}">
   <div
     class="grid"
     style="

diff --git a/blocks/quantity-rocker.liquid b/blocks/quantity-rocker.liquid
@@ -1,5 +1,5 @@
 
-<div class="shopify-block-{{ block.type }} form-element">
+<div class="shopify-block--quantity-rocker form-element">
   <label {% if block.settings.label_hidden %}hidden{% endif %} class="form-input-label" for="{{ block.id }}">{{ block.settings.title }}</label>
   {% capture attributes %}
     id="{{ block.id }}"

diff --git a/blocks/select.liquid b/blocks/select.liquid
@@ -1,4 +1,4 @@
-<div class="shopify-block-{{ block.type }} form-element">
+<div class="shopify-block--select form-element">
   <label {% if block.settings.label_hidden %}hidden{% endif %} class="form-input-label" for="{{ block.id }}">{{ block.settings.title }}</label>
   {% capture attributes %}
     id="{{ block.id }}"

diff --git a/blocks/simple-overlay.liquid b/blocks/simple-overlay.liquid
@@ -1,5 +1,5 @@
 <div
-  class="shopify-block-{{ block.type }} block-overlay {{ block.settings | class_list }} color-{{ block.settings.color_scheme }}"
+  class="shopify-block--simple-overlay block-overlay {{ block.settings | class_list }} color-{{ block.settings.color_scheme }}"
   {{ block.shopify_attributes }}>
   {% content_for "blocks" %}
 </div>

diff --git a/blocks/slide.liquid b/blocks/slide.liquid
@@ -11,7 +11,7 @@
 <embla-slide
   id="slide-{{ block.id }}"
   index="{{ block_index }}"
-  class="shopify-block-{{ block.type }}"
+  class="shopify-block--slide"
   {{ block.shopify_attributes }}>
   <div
     class="{{ block.settings | class_list }} {{ block.settings.position }} {{ block.settings.overflow }}">

diff --git a/blocks/slideshow-controls.liquid b/blocks/slideshow-controls.liquid
@@ -1,6 +1,6 @@
 {% if block.settings.control_style != "" %}
   {% assign color_schema_class = "color-" | append: block.settings.color_scheme %}
-  <div class="shopify-block-{{ block.type }} embla-controls {{ block.settings | class_list }} {{ block.settings.control_style }}  {{ block.settings.page_width }}">
+  <div class="shopify-block--slideshow-controls embla-controls {{ block.settings | class_list }} {{ block.settings.control_style }}  {{ block.settings.page_width }}">
     <embla-prev
       class="{{ color_schema_class }}">
       {{ "chevron-left.svg" | inline_asset_content }}

diff --git a/blocks/slideshow-navigation.liquid b/blocks/slideshow-navigation.liquid
@@ -1,7 +1,7 @@
 {% assign navigation_style = block.settings.navigation_style %}
 {% if navigation_style != "" %}
   <div
-    class="shopify-block-{{ block.type }} embla-navigation {{ block.settings | class_list }} {{ navigation_style }} color-{{ block.settings.color_scheme }}">
+    class="shopify-block--slideshow-navigation embla-navigation {{ block.settings | class_list }} {{ navigation_style }} color-{{ block.settings.color_scheme }}">
     {% for block in section.blocks %}
       <embla-thumbnail
         class=""

diff --git a/blocks/slideshow-progress.liquid b/blocks/slideshow-progress.liquid
@@ -1,5 +1,5 @@
 <embla-progress
-  class="shopify-block-{{ block.type }} embla-progress">
+  class="shopify-block--progress embla-progress">
 </embla-progress>
 
 {% schema %}

diff --git a/blocks/spacer.liquid b/blocks/spacer.liquid
@@ -1,5 +1,5 @@
 <div
-  class="shopify-block-{{ block.type }} {{ block.settings | class_list }}"
+  class="shopify-block--spacer {{ block.settings | class_list }}"
   {{ block.shopify_attributes }}>
 </div>
 

diff --git a/blocks/text-field.liquid b/blocks/text-field.liquid
@@ -1,5 +1,5 @@
 
-<div class="shopify-block-{{ block.type }} form-element">
+<div class="shopify-block--text-field form-element">
   <label {% if block.settings.label_hidden %}hidden{% endif %} class="form-input-label" for="{{ block.id }}">{{ block.settings.title }}</label>
   {% capture attributes %}
     id="{{ block.id }}"

diff --git a/blocks/text.liquid b/blocks/text.liquid
@@ -1,5 +1,5 @@
 <div
-  class="shopify-block-{{ block.type }} {{ block.settings | class_list }} {{ block.settings.text_style }} text-{{ block.settings.alignment }} spacing-bottom-{{ block.settings.spacing_bottom }}"
+  class="shopify-block--text {{ block.settings | class_list }} {{ block.settings.text_style }} text-{{ block.settings.alignment }} spacing-bottom-{{ block.settings.spacing_bottom }}"
   {{ block.shopify_attributes }}>
   {{ block.settings.text }}
 </div>