Reviewer feedback and formatting

Shopify · Dec 21, 2022 · fd3f095 · fd3f095
1 parent db7e693
commit fd3f095
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 24 deletions.
diff --git a/assets/component-image-with-text.css b/assets/component-image-with-text.css
@@ -355,14 +355,16 @@
 
 /*
   Multirow
-  note: remove from this stylesheet if multirow-specific styles increase signficantly
+  note: consider removing from this stylesheet if multirow-specific styles increase signficantly
 */
-.multirow .image-with-text {
-  margin-bottom: var(--grid-mobile-vertical-spacing)
+.multirow__inner {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--grid-mobile-vertical-spacing);
 }
 
 @media screen and (min-width: 750px) {
-  .multirow .image-with-text {
-    margin-bottom: var(--grid-desktop-vertical-spacing)
+  .multirow__inner {
+    row-gap: var(--grid-desktop-vertical-spacing);
   }
 }
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -1453,7 +1453,7 @@
             "label": "Zig zag from right"
           },
           "options__3": {
-            "label": "Altgn left"
+            "label": "Align left"
           },
           "options__4": {
             "label": "Align right"

diff --git a/sections/multirow.liquid b/sections/multirow.liquid
@@ -15,37 +15,41 @@
 {%- endstyle -%}
 
 {%- liquid
-  assign odd_class = 'image-with-text__grid--standard'
-  assign even_class = 'image-with-text__grid--reverse'
   if section.settings.image_layout contains 'right'
-    assign odd_class = 'image-with-text__grid--reverse'
-    assign even_class = 'image-with-text__grid--standard'
+    assign odd_class = ' image-with-text__grid--reverse'
+  else
+    assign even_class = ' image-with-text__grid--reverse'
   endif
 
-  assign transparent_content = false
   if section.settings.row_color_scheme == section.settings.section_color_scheme
-    assign transparent_content = true
+    assign no_content_background = true
   endif
 
-  if transparent_content and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0
+  if settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0
+    assign no_content_styles = true
+  endif
+
+  if no_content_background and no_content_styles and section.settings.desktop_content_alignment != 'center'
     assign padding_class = ' collapse-padding'
   endif
+
   if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0
     assign borders_class = ' collapse-borders'
   endif
-  unless transparent_content and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0
+
+  unless no_content_background and no_content_styles
     assign corners_class = ' collapse-corners'
   endunless
 -%}
 
 <div class="multirow section-{{ section.id }}-padding gradient color-{{ section.settings.section_color_scheme }}">
-  <div class="page-width">
+  <div class="multirow__inner page-width">
     {%- for block in section.blocks -%}
       <div class="image-with-text isolate{{ borders_class }}{{ corners_class }}{{ padding_class }}">
-        <div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.image_layout contains 'alternate' %} {% cycle odd_class, even_class %}{% else %} {{ odd_class }}{% endif %}">
+        <div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.image_layout contains 'alternate' %}{% cycle odd_class, even_class %}{% else %}{{ odd_class }}{% endif %}">
           <div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">
             <div
-              class="image-with-text__media image-with-text__media--{{ section.settings.image_height }} gradient color-{{ section.settings.row_color_scheme }} global-media-settings {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
+              class="image-with-text__media image-with-text__media--{{ section.settings.image_height }} gradient color-{{ section.settings.row_color_scheme }} global-media-settings{% if block.settings.image != blank %} media{% else %} image-with-text__media--placeholder placeholder{% endif %}"
               {% if section.settings.image_height == 'adapt' and block.settings.image != blank %}
                 style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"
               {% endif %}
@@ -66,18 +70,15 @@
             </div>
           </div>
           <div class="image-with-text__text-item grid__item">
-            <div
-              id="ImageWithText--{{ section.id }}"
-              class="image-with-text__content image-with-text__content--{{ section.settings.desktop_content_position }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }} image-with-text__content--{{ section.settings.image_height }} content-container{% unless transparent_content %} gradient color-{{ section.settings.row_color_scheme }}{% endunless %}"
-            >
+            <div class="image-with-text__content image-with-text__content--{{ section.settings.desktop_content_position }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }} image-with-text__content--{{ section.settings.image_height }} content-container{% unless no_content_background and no_content_styles %} gradient color-{{ section.settings.row_color_scheme }}{% endunless %}">
               {%- if block.settings.caption -%}
                 <p class="image-with-text__text image-with-text__text--caption caption-with-letter-spacing caption-with-letter-spacing--medium">
                   {{ block.settings.caption | escape }}
                 </p>
               {%- endif -%}
               {%- if block.settings.heading -%}
-                <h2 class="image-with-text__heading {{ section.settings.heading_size }}">
-                  {{ block.settings.heading | escape }}
+                <h2 class="image-with-text__heading {{ section.settings.heading_size }} rte">
+                  {{ block.settings.heading }}
                 </h2>
               {%- endif -%}
               {%- if block.settings.text -%}
@@ -393,7 +394,7 @@
           "label": "t:sections.multirow.blocks.row.settings.caption.label"
         },
         {
-          "type": "text",
+          "type": "inline_richtext",
           "id": "heading",
           "default": "Row",
           "label": "t:sections.multirow.blocks.row.settings.heading.label"