Fix double margins in RTE when non-paragraphs are used

[kjellr]

PR Summary:

Fixes unintentional double margins generated by non-paragraph tags in the Rich Text editor.

Why are these changes introduced?

Fixes #2416

Recent updates to the Rich Text editor now allow it to use headings and lists, in addition to paragraphs. Dawn today clears out the top and bottom margins of paragraphs inside of the Rich Text editor. These new tags were not targeted by our existing rule, resulting in more vertical space between elements than we'd originally designed for there to be.

What approach did you take?

I used a wildcard here — I can't think of a reason why we wouldn't want to clear these extra margins. But if folks feel otherwise, it's easy enough to just add a bunch of rules for all the currently-supported tags instead (.rte > h1:first-child, .rte > h2:first-child, etc.). The downside is just that it's far more code, and could break again if we allow more tags in here in the future.

Visual impact on existing themes

Paragraph Tags (No Change)

Before	After

H2 Tags

Before	After

H3 Tags

Before	After

This also effects ul, ol, and h1-h6, but the effect is the same.

Testing steps/scenarios

1. Open the demo store.
2. Add an image with Text Block
3. Edit the description text style so that it uses headings or lists.
4. Note that the vertical margins between the heading + description + button stay consistent.
5. Check other uses of rte and look for visual changes. (i.e. product descriptions, blog posts, and pages). There should be no visual change when this PR is active.

Demo links

• Store
• Editor

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[stufreen]

In some templates we use the rte class for product, page, and blog descriptions. These have a different rich text editor in admin which lets you put in images and stuff. This change is probably still fine but we should test these separately.

E.g.

dawn/sections/main-product.liquid

Line 166 in 6d4ec13

<div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>

dawn/sections/main-page.liquid

Line 21 in 6d4ec13

<div class="rte">

https://github.com/Shopify/dawn/blob/main/sections/main-article.liquid#L59

[kjellr]

@stufreen Thanks! I just double checked as many of those use cases as I could think of, and I'm not seeing any visual changes after the rule is applied. I'll add a note to the testing instructions for other folks to look too though. 👍

[ludoboludo]

Tested every section/template I saw that used the .rte class and it all seem good 👍

[kjellr]

Whoops, I forgot about this one for a while. 😅 @stufreen do you have a minute for a second review?

[stufreen]

It's not a blocker but just calling out that this issue didn't really occur in the Richtext section because the styling there is different. There is a rule in the richtext heading block to remove the bottom margin.

[stufreen]

Also just a random non-blocker: On the Page template the first child is actually a meta element. So the rule is not doing anything there.

[ludoboludo]

For the page I think it depends. Sometimes things get copied over in the rich text editor and it pastes in some unwanted elements like this.
If you look at some other pages like a complete page, it's not there. So it's not added by the RTE from the admin but more so due to the way content can be added I believe 🤔