NO BUG: New contextual spacing not working properly for list item padding

[simon]

Browser: Any
OS: macOS
URL: Link to a page that illustrates this issue

I have a load of css that in post content and rich text elements spaces headings, texts and lists. I was excited to see in v2 that Bricks was handling this.

However for list items there is an issue that the defined padding is not being applied to the first item in the list if there is nothing preceding the list itself (Bricks is looking for * + li):

You can see that the first item is missing the left padding because the list is the only thing in the block.

[Matej]

Hey @simon,

can you copy-paste your page, so that I can replicate it locally? Also, a screenshot how you created contextual spacing would also be helpfull.

Thank you,
Matej

[simon]

Hi @Matej,

I’ve set up the contextual spacing in my staging site for you.

I sent the login details yesterday by email related to this topic which Stefan has since solved: WAIT: Class not being correctly loaded on one page in a template used on many pages

If you take a look at the page ‘Care for creation’ you will see a rich text element list at the bottom of the page on its own with nothing preceding it in the text element. The inline padding start I have set for list items (1rem) in contextual spacing is not being applied to the first list item, because this is the rule bricks is using:

.brxe-text * + :is(li)

So because the first list item has nothing before it, the padding is not applied.

Thanks

[timmse]

Hi Simon,
I’ll jump in here too, since Matej is out of the office and I’ve already looked at all your other issues anyway

This is not a bug, but rather a “misuse” (or misunderstanding) of contextual spacing.

Contextual spacing applies to… elements with a preceding sibling within embedded content.

The first li doesn’t have a preceding sibling and therefore, the style doesn’t apply. In general, the contextual spacing is meant for vertical spacing between sibling elements.

The easiest way to add the li spacing correctly is with custom CSS, either in the Theme Styles (available since 2.0 RC), the Bricks settings or your child theme’s stylesheet.

.brxe-text :is(li) {
  padding-inline-start: 100px;
}

Best regards,
timmse

[simon]

Hmm, can I suggest then that you remove the padding options if it is vertical spacing this is aimed at. I understand what contextual spacing is. ACSS did this for me before and I have my own CSS to do all of this (more detailed than what Bricks now does) and all it should do is vertical spacing but you have added padding options so I tried it and the result is not good if the list is not preceded by anything.

I get margin not being applied to the first item in the list if there is nothing above it but padding left and right would need to be applied to all list items. Surely for padding you can amend the code to simply include all list items? I don’t see why we should have to write a fix for the first item padding when you do all the rest.