Add heading font size setting in Rich text section (#188)

* Add heading setting in Rich text * adjust style class * Changed the approach to not require a large set of if/elsif Co-authored-by: tyleralsbury <tyler.alsbury@shopify.com>
Shopify · Jul 29, 2021 · 1177f84 · 1177f84
1 parent e185803
commit 1177f84
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -1518,6 +1518,9 @@
               "options__2": {
                 "label": "Medium"
               },
+              "options__3": {
+                "label": "Large"
+              },
               "label": "Heading font size"
             }
           }

diff --git a/sections/rich-text.liquid b/sections/rich-text.liquid
@@ -9,7 +9,7 @@
     {%- for block in section.blocks -%}
       {%- case block.type -%}
         {%- when 'heading' -%}
-          <h2 class="{% if block.settings.heading_size == 'small' %}h2{% else %}h1{% endif %}" {{ block.shopify_attributes }}>{{ block.settings.heading | escape }}</h2>
+          <h2 class="{{ block.settings.heading_size }}" {{ block.shopify_attributes }}>{{ block.settings.heading | escape }}</h2>
         {%- when 'text' -%}
           <div class="rich-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
         {%- when 'button' -%}
@@ -79,15 +79,19 @@
           "id": "heading_size",
           "options": [
             {
-              "value": "small",
+              "value": "h2",
               "label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__1.label"
             },
             {
-              "value": "medium",
+              "value": "h1",
               "label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__2.label"
+            },
+            {
+              "value": "h0",
+              "label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__3.label"
             }
           ],
-          "default": "medium",
+          "default": "h1",
           "label": "t:sections.rich-text.blocks.heading.settings.heading_size.label"
         }
       ]