Rich text 2.0

[wiktoriaswiecicka]

Currently Rich text section has limited options to style heading and paragraph text or change text alignment. We are adding settings that allow merchant to achieve more layout options.

As a merchant:

• I can add more than 3 blocks to my rich text section
• I can align the content to be right, center of left aligned
• I have more options for position or layout of the content
• I can italicize and bold words in my headings.

1. Section settings

• Text alignment (Left, Center, Right)
• Text position on desktop (Left, Center, Right)

2. Improve Heading block settings

• Adding extra large text size
• Changing short text field to Rich text RTE to enable merchant to use bold / italic in large headings.

3. New block

• Adding caption block
• Lift block limits

[gregjotau]

If the rich text section could be used to create this kind of content, it would be great!

[gregjotau]

The column section is not good enough for mobile for this kind of content. At least the part without the logo, just 3 parts spaced. Not sure if that should be another kind of section though :)

[nicklepine]

Note: We've descoped the Text wrap lenght (Small, Medium, Wide) setting from this ticket. Implementing this solely on Rich Text could lead to unbalanced content widths across sections when stacked. Instead we'll explore adding this more holistically to all relevant sections in a separate ticket.

So @wiktoriaswiecicka, when you come back here are a couple of things to look into:

• Explore applying the width setting to all relevant sections (sections that would benefit from it). Plus, explore leverage a range slider for even more flexibility.
• Explore what other sections could benefit from an Extra Large text size on their Heading
• Explore what other sections could benefit from leveraging a rich text setting for their Heading to allow bolding/italics.

[andrewetchen]

2. Improve Heading block settings

• Adding extra large text size
• Changing short text field to Rich text RTE to enable merchant to use bold / italic in large headings.

3. New block

• Adding caption block
• Lift block limits

Setting a reminder for myself to look into the following:

Extra large text size

• We currently have h0 for Large; h1 for Medium; h2 for Small.
• How will Extra large be implemented?

Caption block

• Should we use the same caption block from the Image with text section by including Text style and Text size?
• Default language of caption block? Add a tagline? Add a caption? Caption?
  • screenshot

Block limit

• Set a higher limit or remove it completely?
• All textual blocks and exclude button?
• Multiple button blocks?
  • screenshot without gap adjustment.
  • I think it makes more sense to keep them on separate lines as opposed to side-by-side - screenshot

Presets

Current - include caption block?

{
  "name": "t:sections.rich-text.presets.name",
  "blocks": [
    {
      "type": "heading"
    },
    {
      "type": "text"
    },
    {
      "type": "button"
    }
  ]
}