Rich text updates

[andrewetchen]

Draft PR

Rich text updates - UX feedback

cc: @wiktoriaswiecicka

Why are these changes introduced?

Related: #1460

What approach did you take?

Section level settings

• Desktop context position
• Text/content alignment

Block level settings and additions

• Add a new "Extra large" heading option
• Change the heading type from text to richtext to allow merchants to use bold, italic, links, dynamic source, and underline
• Add a caption block
• Remove limit for each block

Other considerations

Range slider widths will need to be explored further / section parity etc.

Demo links

• Editor

---

Questions

Section settings

• 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. Let me know your thoughts on this.
• Text or content alignment:
  • Most other sections have "Desktop content alignment" and "Mobile content alignment".
  • We also have a global "Text alignment" setting for Cards.
  • Since this setting will set the alignment of all block elements, I think it makes sense to go with something that includes "content" instead of "text". If this ends up being the case:
    • Should we keep "Content alignment"?
    • For section parity, the Image with text section has "Desktop content alignment" and "Mobile content alignment" - if there are plans to include a mobile adjustment for text/content alignment, would it make more sense to offer "Desktop content alignment" and "Mobile content alignment" for rich text instead of just one text/content alignment adjustment for desktop and mobile. Thoughts?

Extra large heading size

• Let me know if this needs to be made smaller or larger.

Caption block

• I used the same caption block from the Image with text section which includes text style and text size. Let me know if this is okay or if I should remove either text style or text size.
• The default language for the caption block is "Add a tagline".
  • Should we change this to something else like, "Add a caption" or "Caption"?

Block limit removal

• I've removed the block limit for each block: Heading, Text, Caption, and Button. Looking for feedback on whether we should keep the limit for certain blocks and if so, which ones? I'm perfectly okay with the way it is now but I just think having multiple button blocks might cause confusion or increased cognitive load for buyers. My mental model is one button being associated per rich text section.

Presets

• The current presets when adding a new Rich text section includes one of each: Heading, Text, Button
  • Should we include the new caption block?

[andrewetchen]

Although this isn't required (text-align: left;) being the default value, it might be used for other elements and for instances where we'd need to override an existing text-align value.

[andrewetchen]

I'll need to update the h2 so that it doesn't include <p> tags for the richtext, to prevent this:

Screenshot

Either of the following works but I'll need to confirm if its the solution we want to go with for rich text headings:

<h2 class="rich-text__heading rte {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>{{ block.settings.heading | replace: '<p>', '<span>' | replace: '</p>', '</span>' }}</h2>

Or

<h2 class="rich-text__heading rte {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>{{ block.settings.heading | replace: 'p>', 'span>' }}</h2>

Screenshot

Confirmed with: https://validator.w3.org/nu/#textarea

[andrewetchen]

The {%- if block.settings.button_label != blank -%} conditional was added to prevent this: #1615.

Additionally, I added a <div> to make sure button blocks are placed on new lines instead of inline.

[andrewetchen]

Related: https://github.com/Shopify/dawn/pull/1625/files#r852183418

richtext input setting

p tags must be used to wrap the default richtext. It will result in an error if it's not:

shopify-cli

11:12:21 ERROR  » update templates/index.json:
  Setting 'heading' is invalid. All top level nodes must be '<p>' tags

Code editor

[bakura10]

The ability to have a setting to set up a position (top left, top top, top right, left middle…) is very very common for many sections, and having this as a select cause lot of duplication of wording.

i think this may be a new built in setting that Shopify could add, with nice visual icons to convey the different position. We (theme developers) should be able to exclude some choices.

this setting type could also be used for text positioning (left, venter, right).

what do you think ? :)

[andrewetchen]

Hey @bakura10,

Regarding the extra positional settings, this would definitely add more flexibility and similarity between some of our sections but unfortunately, I don't think it will be added to the rich text section, at least not for this iteration. I will record your feedback/suggestion - thanks so much!