Merge pull request #7 from Shopify/editions-changes

Tweaks for Winter Editions 2024 release
Shopify · Jan 30, 2024 · 6e7db90 · 6e7db90
2 parents 670e202 + 85dbcfb
commit 6e7db90
Show file tree

Hide file tree

Showing 8 changed files with 248 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -54,7 +54,7 @@ For more details, see the [theme block documentation](https://shopify.dev/docs/t
 
 Note that a preset is required for a theme block to appear in the editor, the same as for sections.
 
-Also, if the outermost element of a block needs to have properties outside of a specific tag and class, you can use `"tag": null` to remove the auto-wrapper tag. If you do this, the block can only have one top level element in its Liquid body and that element must include `{ block.shopify_attributes }}` to work properly in the editor. See [theme block documentation](https://shopify.dev/docs/themes/architecture/blocks/theme-blocks) for more details.
+Also, if the outermost element of a block needs to have properties outside of a specific tag and class, you can use `"tag": null` to remove the auto-wrapper tag. If you do this, the block can only have one top level element in its Liquid body and that element must include `{{ block.shopify_attributes }}` to work properly in the editor. See [theme block documentation](https://shopify.dev/docs/themes/architecture/blocks/theme-blocks) for more details.
 
 ## Accepting theme blocks in sections
 
@@ -110,3 +110,5 @@ The theme editor now includes drag and drop interactions in the power preview fo
 ## Theme block presets
 
 Like sections, blocks can have presets. This allows blocks to be used in more flexible ways.
+
+A block must have at least one preset to appear for selection in the Theme Editor.
diff --git a/assets/base.css b/assets/base.css
@@ -1,5 +1,6 @@
 :root {
   --layout-gap: 15px;
+  --page-width: 1200px;
 }
 
 * {
@@ -12,8 +13,6 @@ html {
 }
 
 body {
-  --page-width: 1200px;
-
   font-size: 62.5%;
   margin: 0;
   font-size: 1.6rem;
@@ -751,6 +750,11 @@ details[open] > summary .icon-caret {
 
 /* Icon */
 .icon-block {
-  height: auto;
+  display: flex;
   fill: currentColor;
  }
+
+ .icon-block > svg,
+ .icon-block > img {
+  height: auto;
+ }
diff --git a/blocks/group.liquid b/blocks/group.liquid
@@ -31,10 +31,7 @@
 {
   "name": "Group",
   "tag": null,
-  "blocks": [
-    { "type": "@theme" },
-    { "type": "@app" }
-  ],
+  "blocks": [{ "type": "@theme" }, { "type": "@app" }],
   "settings": [
     {
       "type": "select",
@@ -203,27 +200,30 @@
     },
     {
       "name": "Icon with text",
+      "settings": {
+        "justify_content": "center",
+        "padding": 0
+      },
       "blocks": [
         {
           "type": "group",
           "settings": {
             "direction": "column",
             "justify_content": "center",
             "width": 33,
-            "padding": 35
+            "padding": 0
           },
           "blocks": [
             {
               "type": "icon",
               "settings": {
-                "icon": "dairy_free",
-                "width": 50
+                "icon": "dairy_free"
               }
             },
             {
-              "type": "text",
+              "type": "heading",
               "settings": {
-                "text": "<p>Pair text with an icon to highlight aspects of your business.</p>",
+                "heading_size": "h3",
                 "alignment": "center"
               }
             }
@@ -235,20 +235,19 @@
             "direction": "column",
             "justify_content": "center",
             "width": 33,
-            "padding": 35
+            "padding": 0
           },
           "blocks": [
             {
               "type": "icon",
               "settings": {
-                "icon": "carrot",
-                "width": 50
+                "icon": "carrot"
               }
             },
             {
-              "type": "text",
+              "type": "heading",
               "settings": {
-                "text": "<p>Pair text with an icon to highlight aspects of your business.</p>",
+                "heading_size": "h3",
                 "alignment": "center"
               }
             }
@@ -260,20 +259,19 @@
             "direction": "column",
             "justify_content": "center",
             "width": 33,
-            "padding": 35
+            "padding": 0
           },
           "blocks": [
             {
               "type": "icon",
               "settings": {
-                "icon": "nut_free",
-                "width": 50
+                "icon": "nut_free"
               }
             },
             {
-              "type": "text",
+              "type": "heading",
               "settings": {
-                "text": "<p>Pair text with an icon to highlight aspects of your business.</p>",
+                "heading_size": "h3",
                 "alignment": "center"
               }
             }

diff --git a/blocks/icon.liquid b/blocks/icon.liquid
@@ -1,6 +1,13 @@
+{% style %}
+  .icon-block-{{ block.id }} {
+    width: {{ block.settings.width }}px;
+  }
+{% endstyle %}
+
+{% assign icon_block_class = 'icon-block-' | append: block.id %}
 {%- if block.settings.icon != 'none' and block.settings.image_upload == blank -%}
   <svg
-    class="icon icon-block icon-block--{{ block.id }}"
+    class="{{ icon_block_class }}"
     aria-hidden="true"
     focusable="false"
     xmlns="http://www.w3.org/2000/svg"
@@ -9,26 +16,20 @@
     viewBox="0 0 20 20"
     {{ block.shopify_attributes }}
   >
-    {% style %}
-      .icon-block--{{ block.id }} {
-        width: {{ block.settings.width }}px;
-      }
-    {% endstyle %}
-
     {%- render 'icons', icon: block.settings.icon -%}
   </svg>
 {%- elsif block.settings.image_upload != blank -%}
   {{
     block.settings.image_upload
-    | image_url: width: 1000
-    | image_tag: widths: '50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000'
+    | image_url: width: 500
+    | image_tag: widths: '50, 100, 200, 300, 400, 500', class: icon_block_class
   }}
 {%- endif -%}
 
 {% schema %}
 {
   "name": "Icon",
-  "tag": null,
+  "class": "icon-block",
   "settings": [
     {
       "type": "select",

diff --git a/sections/custom-section.liquid b/sections/custom-section.liquid
@@ -103,7 +103,6 @@
     {
       "name": "Image with text",
       "settings": {
-        "color_scheme": "scheme-2",
         "padding_top": 48,
         "padding_bottom": 48
       },
@@ -119,7 +118,7 @@
           "type": "group",
           "settings": {
             "direction": "column",
-            "color_scheme": "scheme-2",
+            "color_scheme": "scheme-3",
             "width": 50,
             "padding": 60
           },
@@ -950,6 +949,124 @@
         }
       ]
     },
+    {
+      "name": "Icon with text",
+      "settings": {
+        "direction": "row",
+        "justify_content": "center",
+        "color_scheme": "scheme-2",
+        "full_width": true,
+        "padding_top": 30,
+        "padding_bottom": 30
+      },
+      "blocks": [
+        {
+          "type": "group",
+          "settings": {
+            "direction": "column",
+            "justify_content": "center",
+            "color_scheme": "scheme-2",
+            "width": 33,
+            "padding": 35
+          },
+          "blocks": [
+            {
+              "type": "icon",
+              "settings": {
+                "icon": "return",
+                "width": 50
+              }
+            },
+            {
+              "type": "heading",
+              "settings": {
+                "heading": "Heading",
+                "heading_size": "h3",
+                "alignment": "start"
+              }
+            },
+            {
+              "type": "text",
+              "settings": {
+                "text": "<p>Pair text with an icon to highlight aspects of your business.<\/p>",
+                "text_style": "",
+                "alignment": "center"
+              }
+            }
+          ]
+        },
+        {
+          "type": "group",
+          "settings": {
+            "direction": "column",
+            "justify_content": "center",
+            "color_scheme": "scheme-2",
+            "width": 33,
+            "padding": 35
+          },
+          "blocks": [
+            {
+              "type": "icon",
+              "settings": {
+                "icon": "truck",
+                "width": 50
+              }
+            },
+            {
+              "type": "heading",
+              "settings": {
+                "heading": "Heading",
+                "heading_size": "h3",
+                "alignment": "start"
+              }
+            },
+            {
+              "type": "text",
+              "settings": {
+                "text": "<p>Pair text with an icon to highlight aspects of your business.<\/p>",
+                "text_style": "",
+                "alignment": "center"
+              }
+            }
+          ]
+        },
+        {
+          "type": "group",
+          "settings": {
+            "direction": "column",
+            "justify_content": "center",
+            "color_scheme": "scheme-2",
+            "width": 33,
+            "padding": 35
+          },
+          "blocks": [
+            {
+              "type": "icon",
+              "settings": {
+                "icon": "chat_bubble",
+                "width": 50
+              }
+            },
+            {
+              "type": "heading",
+              "settings": {
+                "heading": "Heading",
+                "heading_size": "h3",
+                "alignment": "start"
+              }
+            },
+            {
+              "type": "text",
+              "settings": {
+                "text": "<p>Pair text with an icon to highlight aspects of your business.<\/p>",
+                "text_style": "",
+                "alignment": "center"
+              }
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "Email signup (2 columns)",
       "settings": {

diff --git a/templates/index.json b/templates/index.json
@@ -9,7 +9,7 @@
             "direction": "column",
             "justify_content": "flex-start",
             "color_scheme": "scheme-1",
-            "width": 60,
+            "width": 50,
             "padding": 50
           },
           "blocks": {
@@ -690,7 +690,7 @@
             "direction": "column",
             "justify_content": "flex-start",
             "color_scheme": "scheme-1",
-            "width": 60,
+            "width": 50,
             "padding": 50
           },
           "blocks": {