Try more universal rich text controls (#2085)

* Update image-banner.liquid * Update main-product.liquid * Update collapsible-content.liquid * Update multicolumn.liquid * Update collection-list.liquid * Update featured-collection.liquid * Update main-list-collections.liquid * Update featured-blog.liquid * Update featured-product.liquid * Update footer.liquid * Update newsletter.liquid * Update slideshow.liquid * Revert "Update image-banner.liquid" This reverts commit e9cd340. * Fix image banner implementation. * Update collage.liquid * Update collapsible_tab in Main Product Section * Update image-with-text.liquid * Update product-recommendations.liquid * Update contact-form.liquid * Update video.liquid Update video.liquid * Update collapsible-content.liquid * Add a little bit of inline rte CSS. To ensure links appear correctly. * Update rich-text heading to use inline RTE instead of normal RTE. * Remove paragraphs. * Remove paragraph tags from homepage rich text heading. * Move inline rte code inside of the main rte css file. * Remove unintentional whitespace changes. * Whitespace update. * Code cleanup. * re add classes in icon with text snippet after rebase * Move link styles to base.css * Remove unnecessary asset loading. * Use RTE styles for the slideshow subhead instead. * Slideshow and image banner special cases. * Remove richtext from collapsible row. * Tidying up. * Remove component-rte.css from collage.liquid It doesn't use a richtext component. * Load the rte styles in slideshow.liquid. * Remove unnecessary rule. * Update classname to inline-richtext. * Revert back to the existing richtext field in rich-text.liquid heading. * Use inline-heading class for richtext heading. To retain the same hover color as other headings. * Fix link color inconsistencies. * Move banner--desktop-transparent styles. * Combine CSS Rules. Co-authored-by: Ludo <ludo.segura@shopify.com> * Combine CSS rules. Co-authored-by: Ludo <ludo.segura@shopify.com> * Update wrapper tags for Image Banner & Slideshow. * Remove duplicate calls to component-rte.css * Reformat link color rules to be more readable. --------- Co-authored-by: Ludo <ludo.segura@shopify.com>
Shopify · Feb 23, 2023 · 9f2753f · 9f2753f
1 parent 0b58992
commit 9f2753f
Show file tree

Hide file tree

Showing 21 changed files with 100 additions and 73 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -730,19 +730,31 @@ details > * {
 }
 
 .underlined-link,
-.customer a {
-  color: rgba(var(--color-link), var(--alpha-link));
+.customer a,
+.inline-richtext a {
   text-underline-offset: 0.3rem;
   text-decoration-thickness: 0.1rem;
   transition: text-decoration-thickness ease 100ms;
 }
 
+.underlined-link,
+.customer a {
+  color: rgba(var(--color-link), var(--alpha-link));
+}
+
+.inline-richtext a,
+.rte.inline-richtext a {
+  color: currentColor;
+}
+
 .underlined-link:hover,
-.customer a:hover {
+.customer a:hover,
+.inline-richtext a:hover {
   color: rgb(var(--color-link));
   text-decoration-thickness: 0.2rem;
 }
 
+
 .icon-arrow {
   width: 1.5rem;
 }
@@ -979,7 +991,6 @@ summary::-webkit-details-marker {
 }
 
 .title-wrapper-with-link a {
-  color: rgb(var(--color-link));
   margin-top: 0;
   flex-shrink: 0;
 }

diff --git a/assets/section-image-banner.css b/assets/section-image-banner.css
@@ -436,3 +436,19 @@
 .banner__box > * + .banner__buttons {
   margin-top: 2rem;
 }
+
+@media screen and (max-width: 749px) {
+  .banner:not(.slideshow) .rte a,
+  .banner:not(.slideshow) .inline-richtext a:hover,
+  .banner:not(.slideshow) .rte a:hover {
+    color: currentColor;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .banner--desktop-transparent .rte a,
+  .banner--desktop-transparent .inline-richtext a:hover,
+  .banner--desktop-transparent .rte a:hover {
+    color: currentColor;
+  }
+}
diff --git a/sections/collage.liquid b/sections/collage.liquid
@@ -21,7 +21,7 @@
 
 <div class="color-{{ section.settings.color_scheme }} gradient isolate">
   <div class="page-width{% if section.settings.heading == blank %} no-heading{% endif %} section-{{ section.id }}-padding">
-    <h2 class="collage-wrapper-title {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
+    <h2 class="collage-wrapper-title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</h2>
     <div class="collage{% if section.settings.mobile_layout == 'collage' %} collage--mobile{% endif %}">
       {%- for block in section.blocks -%}
         <div
@@ -208,7 +208,7 @@
   },
   "settings": [
     {
-      "type": "text",
+      "type": "inline_richtext",
       "id": "heading",
       "default": "Multimedia collage",
       "label": "t:sections.collage.settings.heading.label"

diff --git a/sections/collapsible-content.liquid b/sections/collapsible-content.liquid
@@ -25,8 +25,8 @@
             <p class="caption-with-letter-spacing">{{ section.settings.caption | escape }}</p>
           {% endif %}
           {%- if section.settings.heading != blank -%}
-            <h2 class="collapsible-content__heading {{ section.settings.heading_size }}">
-              {{ section.settings.heading | escape }}
+            <h2 class="collapsible-content__heading inline-richtext {{ section.settings.heading_size }}">
+              {{ section.settings.heading }}
             </h2>
           {%- else -%}
             <h2 class="visually-hidden">{{ 'accessibility.collapsible_content_title' | t }}</h2>
@@ -67,7 +67,7 @@
                 >
                   <summary id="Summary-{{ block.id }}-{{ section.id }}">
                     {% render 'icon-accordion', icon: block.settings.icon %}
-                    <h3 class="accordion__title h4">
+                    <h3 class="accordion__title inline-richtext h4">
                       {{ block.settings.heading | default: block.settings.page.title }}
                     </h3>
                     {% render 'icon-caret' %}
@@ -106,7 +106,7 @@
       "label": "t:sections.collapsible_content.settings.caption.label"
     },
     {
-      "type": "text",
+      "type": "inline_richtext",
       "id": "heading",
       "label": "t:sections.collapsible_content.settings.heading.label",
       "default": "Collapsible content"

diff --git a/sections/collection-list.liquid b/sections/collection-list.liquid
@@ -30,8 +30,8 @@
   <div class="collection-list-wrapper page-width isolate{% if show_mobile_slider %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %} section-{{ section.id }}-padding">
     {%- unless section.settings.title == blank -%}
       <div class="title-wrapper-with-link{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
-        <h2 id="SectionHeading-{{ section.id }}" class="collection-list-title {{ section.settings.heading_size }}">
-          {{ section.settings.title | escape }}
+        <h2 id="SectionHeading-{{ section.id }}" class="collection-list-title inline-richtext {{ section.settings.heading_size }}">
+          {{ section.settings.title }}
         </h2>
 
         {%- if section.settings.show_view_all and show_mobile_slider -%}
@@ -127,7 +127,7 @@
   },
   "settings": [
     {
-      "type": "text",
+      "type": "inline_richtext",
       "id": "title",
       "default": "Collections",
       "label": "t:sections.collection-list.settings.title.label"

diff --git a/sections/contact-form.liquid b/sections/contact-form.liquid
@@ -17,8 +17,8 @@
 <div class="color-{{ section.settings.color_scheme }} gradient">
   <div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
     {%- if section.settings.heading != blank -%}
-      <h2 class="title title-wrapper--no-top-margin {{ section.settings.heading_size }}">
-        {{ section.settings.heading | escape }}
+      <h2 class="title title-wrapper--no-top-margin inline-richtext {{ section.settings.heading_size }}">
+        {{ section.settings.heading }}
       </h2>
     {%- else -%}
       <h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
@@ -137,7 +137,7 @@
   },
   "settings": [
     {
-      "type": "text",
+      "type": "inline_richtext",
       "id": "heading",
       "default": "Contact form",
       "label": "Heading"

diff --git a/sections/featured-blog.liquid b/sections/featured-blog.liquid
@@ -34,8 +34,8 @@
   <div class="page-width-desktop isolate{% if posts_displayed < 3 %} page-width-tablet{% endif %} section-{{ section.id }}-padding">
     {%- unless section.settings.heading == blank -%}
       <div class="title-wrapper-with-link{% if posts_displayed > 2 %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
-        <h2 id="SectionHeading-{{ section.id }}" class="blog__title {{ section.settings.heading_size }}">
-          {{ section.settings.heading | escape }}
+        <h2 id="SectionHeading-{{ section.id }}" class="blog__title inline-richtext {{ section.settings.heading_size }}">
+          {{ section.settings.heading }}
         </h2>
 
         {%- if section.settings.blog != blank
@@ -142,7 +142,7 @@
   },
   "settings": [
     {
-      "type": "text",
+      "type": "inline_richtext",
       "id": "heading",
       "default": "Blog posts",
       "label": "t:sections.featured-blog.settings.heading.label"

diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid
@@ -48,9 +48,10 @@
 
 <div class="color-{{ section.settings.color_scheme }} isolate gradient">
   <div class="collection section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}">
+
     <div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
       {%- if section.settings.title != blank -%}
-        <h2 class="title {{ section.settings.heading_size }}">{{ section.settings.title | escape }}</h2>
+        <h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.title }}</h2>
       {%- endif -%}
       {%- if section.settings.description != blank
         or section.settings.show_description
@@ -150,7 +151,7 @@
   },
   "settings": [
     {
-      "type": "text",
+      "type": "inline_richtext",
       "id": "title",
       "default": "Featured collection",
       "label": "t:sections.featured-collection.settings.title.label"

diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
@@ -138,7 +138,7 @@
                 {% render block %}
               {%- when 'text' -%}
                 <p
-                  class="product__text{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}"
+                  class="product__text inline-richtext{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}"
                   {{ block.shopify_attributes }}
                 >
                   {{- block.settings.text -}}
@@ -524,7 +524,7 @@
       "name": "t:sections.featured-product.blocks.text.name",
       "settings": [
         {
-          "type": "text",
+          "type": "inline_richtext",
           "id": "text",
           "default": "Text block",
           "label": "t:sections.featured-product.blocks.text.settings.text.label"
@@ -910,7 +910,7 @@
           "label": "t:sections.main-product.blocks.icon_with_text.settings.image_1.label"
         },
         {
-          "type": "text",
+          "type": "inline_richtext",
           "id": "heading_1",
           "default": "Heading",
           "label": "t:sections.main-product.blocks.icon_with_text.settings.heading_1.label",
@@ -1106,7 +1106,7 @@
           "label": "t:sections.main-product.blocks.icon_with_text.settings.image_2.label"
         },
         {
-          "type": "text",
+          "type": "inline_richtext",
           "id": "heading_2",
           "default": "Heading",
           "label": "t:sections.main-product.blocks.icon_with_text.settings.heading_2.label",
@@ -1302,7 +1302,7 @@
           "label": "t:sections.main-product.blocks.icon_with_text.settings.image_3.label"
         },
         {
-          "type": "text",
+          "type": "inline_richtext",
           "id": "heading_3",
           "default": "Heading",
           "label": "t:sections.main-product.blocks.icon_with_text.settings.heading_3.label",

diff --git a/sections/footer.liquid b/sections/footer.liquid
@@ -37,7 +37,7 @@
 {%- endstyle -%}
 
 <footer class="footer color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding">
-  {%- liquid 
+  {%- liquid
     assign has_social_icons = true
     if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
       assign has_social_icons = false
@@ -68,7 +68,7 @@
             {%- for block in section.blocks -%}
               <div class="footer-block grid__item{% if block.type == 'link_list' %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
                 {%- if block.settings.heading != blank -%}
-                  <h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
+                  <h2 class="footer-block__heading inline-richtext">{{- block.settings.heading -}}</h2>
                 {%- endif -%}
 
                 {%- case block.type -%}
@@ -141,7 +141,7 @@
           {%- if section.settings.newsletter_enable -%}
             <div class="footer-block__newsletter">
               {%- if section.settings.newsletter_heading != blank -%}
-                <h2 class="footer-block__heading">{{ section.settings.newsletter_heading | escape }}</h2>
+                <h2 class="footer-block__heading inline-richtext">{{ section.settings.newsletter_heading }}</h2>
               {%- endif -%}
               {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
                 <input type="hidden" name="contact[tags]" value="newsletter">
@@ -391,7 +391,7 @@
       "name": "t:sections.footer.blocks.link_list.name",
       "settings": [
         {
-          "type": "text",
+          "type": "inline_richtext",
           "id": "heading",
           "default": "Quick links",
           "label": "t:sections.footer.blocks.link_list.settings.heading.label"
@@ -431,7 +431,7 @@
       "name": "t:sections.footer.blocks.text.name",
       "settings": [
         {
-          "type": "text",
+          "type": "inline_richtext",
           "id": "heading",
           "default": "Heading",
           "label": "t:sections.footer.blocks.text.settings.heading.label"
@@ -527,7 +527,7 @@
       "label": "t:sections.footer.settings.newsletter_enable.label"
     },
     {
-      "type": "text",
+      "type": "inline_richtext",
       "id": "newsletter_heading",
       "default": "Subscribe to our emails",
       "label": "t:sections.footer.settings.newsletter_heading.label"

diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid
@@ -98,12 +98,10 @@
       {%- for block in section.blocks -%}
         {%- case block.type -%}
           {%- when 'heading' -%}
-            <h2 class="banner__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
-              <span>{{ block.settings.heading | escape }}</span>
-            </h2>
+            <h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>{{ block.settings.heading }}</h2>
           {%- when 'text' -%}
-            <div class="banner__text {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
-              <span>{{ block.settings.text | escape }}</span>
+            <div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
+              <p>{{ block.settings.text }}</p>
             </div>
           {%- when 'buttons' -%}
             <div
@@ -338,7 +336,7 @@
       "limit": 1,
       "settings": [
         {
-          "type": "text",
+          "type": "inline_richtext",
           "id": "heading",
           "default": "Image banner",
           "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
@@ -371,7 +369,7 @@
       "limit": 1,
       "settings": [
         {
-          "type": "text",
+          "type": "inline_richtext",
           "id": "text",
           "default": "Give customers details about the banner image(s) or content on the template.",
           "label": "t:sections.image-banner.blocks.text.settings.text.label"

diff --git a/sections/image-with-text.liquid b/sections/image-with-text.liquid
@@ -47,8 +47,8 @@
         {%- for block in section.blocks -%}
           {% case block.type %}
             {%- when 'heading' -%}
-              <h2 class="image-with-text__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
-                {{ block.settings.heading | escape }}
+              <h2 class="image-with-text__heading inline-richtext {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
+                {{ block.settings.heading }}
               </h2>
             {%- when 'caption' -%}
               <p
@@ -297,7 +297,7 @@
       "limit": 1,
       "settings": [
         {
-          "type": "text",
+          "type": "inline_richtext",
           "id": "heading",
           "default": "Image with text",
           "label": "t:sections.image-with-text.blocks.heading.settings.heading.label"

diff --git a/sections/main-list-collections.liquid b/sections/main-list-collections.liquid
@@ -2,7 +2,7 @@
 {{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
 
 <div class="page-width">
-  <h1 class="title title--primary">{{ section.settings.title | escape }}</h1>
+  <h1 class="title title--primary inline-richtext">{{ section.settings.title }}</h1>
   {%- liquid
     case section.settings.sort
       when 'products_high', 'products_low'
@@ -45,7 +45,7 @@
   "class": "section",
   "settings": [
     {
-      "type": "text",
+      "type": "inline_richtext",
       "id": "title",
       "label": "t:sections.main-list-collections.settings.title.label",
       "default": "Collections"