Rich text improvements

[andrewetchen]

PR Summary

This PR adds new section and block level settings to provide merchants with more flexibility and more layout options when using rich text sections:

• Section:
  • Desktop content position.
  • Content alignment.
• Block:
  • Add new "Extra large" hxl heading size.
  • Change heading type to richtext to allow merchants to use bold, italic, links, dynamic source, and underline.
  • Add a caption block that includes text style and text size.
  • Remove limit for each block to allow multiple blocks.
  • Update block limits:
    • 3: heading, text, caption
    • 2: buttons
      • Buttons block will share same styling as Image banner buttons block.

Why are these changes introduced?

Fixes #1460, fixes #1615

Additional context: #1625

What approach did you take?

This was originally going to be two separate PRs but since widths will be explored at a later time, I thought it made more sense to go with just one PR.

• rich-text.liquid section:
  • I opted to add a wrapper element. This helped with being able to toggle the "Make section full width" setting without any weird spacing issues which I initially encountered.
  • I didn't change the previous max-width values for the rich text blocks.
• Heading block
  • This was changed from text to richtext input:
  • The interesting thing about using a richtext input as a heading is that it adds <p> tags and the current heading block is an h2 element. Failing to wrap the richtext content in <p> tags will result in an error - more context here:
    • Rich text updates #1625 (comment)
    • Rich text updates #1625 (comment)
  • My solution uses a Liquid string filter (replace) to replace the <p> tags with <span> tags as <p> tags are not allowed as child elements within heading elements and it's not accessible:

  • Heading elements provide important document structure, outlines, and navigation functionality to assistive technology users. If heading text is not a true heading, this information and functionality will not be available for that text.

• Although the addition of text-align: left; wasn't required for the new "Content alignment" setting (since left is the default value), it could also be used for other elements or instances where we'd need to override an existing text-align value.

Other considerations

• Text position on desktop:
  • This setting currently doesn't exist in our theme. The only similar setting that does is "Desktop content position" which I think conveys the same meaning. I chose to use this as the label.
• Text or content alignment:
  • Since this setting sets the alignment of all blocks (and not just text), I chose to go with "Content alignment". Perhaps in the next iteration, this could be changed to "Desktop content alignment" and "Mobile content alignment" like the Image with text section which provides more desktop and mobile flexibility.
• Caption block:
  • I used the same caption block from the Image with text section which includes text style and text size.
  • The default language for the caption block is "Add a tagline".
    • Maybe this could be changed to, "Add a caption" or "Caption"?
• Block limits:
  • The limit has been removed for each block: Heading, Text, Caption, and Button.
  • I'm perfectly okay with this but perhaps we can add the limit back to the button block as it might look too cluttered if misused?
    • Block limits for this section have been updated to the following:
      • 3: heading, text, caption
      • 2: buttons
        • Buttons block will share same styling as Image banner buttons block.
• Presets:
  • The current presets when adding a new Rich text section are: Heading, Text, Button
  • Should we include the new caption block?

Testing steps/scenarios

• Test different section and block setting combinations.
• Add multiple blocks of the same type and test:
  • Alignment and spacing
  • Performance
• Test the different section widths (Make section full width).

Demo links

• Editor: rich text sections added for convenience.

Checklist

• Added PR summary for release notes
• Notified the help.shopify.com team about updates to theme settings (current contact: Kimli)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[YoannJailin]

Hello @andrewetchen ,

Everything seems perfect to me. Just one detail I noticed ; On a darker background color, links displayed through the title have a slight transparency. Is it voluntary?

Screenshot

[andrewetchen]

Everything seems perfect to me. Just one detail I noticed ; On a darker background color, links displayed through the title have a slight transparency. Is it voluntary?

Hey @YoannJailin - thanks for the feedback.

On a darker background color, links displayed through the title have a slight transparency. Is it voluntary?

That is the default styling for links within a rich text block and in this particular case, the heading is now sharing a rich text block styling, it will look the same as the text block:

Screenshot - heading with link - 1

Screenshot - heading with link - 2

Let me know if this is this something that we want to change.

[andrewetchen]

Thanks Yoann. As per our Slack convo, we'll revisit the styling of links within this new heading rich text block as a follow up.

Context

Since the richtext input setting also allows merchants to underline text, there is some similarity between links and underlined text in the heading block.

Top: link, bottom: underline text

This could also be another use case for #1539

[katycobb]

Hi Andrew, looking good :)

One edit: If we have a setting that only affects desktop, with no way to modify mobile, we always add help text to describe what the merchant should expect to see on mobile. So under "Desktop content position", let's add "Position is automatically optimized for mobile."

Re: your question about updating the default caption text, I think it's fine as-is.

[andrewetchen]

Thanks Katy!

One edit: If we have a setting that only affects desktop, with no way to modify mobile, we always add help text to describe what the merchant should expect to see on mobile. So under "Desktop content position", let's add "Position is automatically optimized for mobile."

That's a good idea and I do see this in the slideshow section - I'll add this in 👍🏼

Re: your question about updating the default caption text, I think it's fine as-is.

Perfect!

[ludoboludo]

It's looking pretty good to me!

I just had some questions about the buttons placements and that's pretty much it.

[ludoboludo]

It's looking good 👌

Just a couple things about the CSS

[ludoboludo]

I think it's looking good 👍

There is one thing I noticed but not related specifically to this PR. When using a gradient as a background our outline buttons aren't using the gradient as a background but instead the solid color:

I will create an issue for it in case one doesn't exist already.

[LucasLacerdaUX]

First pass on code looks really good. Only a nitpick (which we can ignore if we agree that it doesn't help) and a UX question.

I'll focus on testing this afternoon to wrap up my review.

[LucasLacerdaUX]

Looks perfect to me! Tested on mobile, tablet and desktop, with multiple sections in one page and different variations of blocks. Everything is working as expected.

Great job on the PR description, BTW. It was really helpful while testing.

🎉

[LucasLacerdaUX]

Not related to your PR but because I noticed it here, I'll leave it as a reminder for us to review this later and create an issue for this.

The setting is called Desktop content position and applies to "tablet and above" (> 750px). It looks we're consistently doing that in many other sections like Image with Text, Image Banner and others. Sounds like this is the intended behaviour.

But I just noticed that on the Product page, the Desktop layout applies to > 750px and the Desktop media size applies to > 990px. It uses the same automatically optimized for mobile description that is mentioned in the setting you just added, so I'm wondering if there are more occurrences of this inconsistency across the theme.