Remove padding inheritance on lists in editor-styles

[oxyc]

Description

Currently <ul> and <ol> elements displayed in the editor inherit their padding from their parent elements for a (to me) unknown reason. @jasmussen can you recall why it was set?

The issue is that if a theme sets a padding on the inner container of eg. Media & Text, Cover or Group, on the editor side that same padding gets applied to child lists as well. Something that's becoming more apparent now with the lighter block DOM I guess.

Overall I'm not confident if it can be unset and someone else should probably have a look at this too.

The one thing it does change is that first level lists and lists within Media & text blocks no longer have a padding-right inherited but I dont see the purpose of this. Eg. paragraphs do not have this padding.

How has this been tested?

I tested by enabling twentytwenty and toggling the removal of the attribute after creating a list block as a direct child of the post as well as within a Media & Text block, a Cover Block and a Group block.

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[jasmussen]

Hello, and thanks so much for the PR!

@jasmussen can you recall why it was set?

Yes, the problem is CSS bleed from wp-admin. In /wp-admin/css/common.css you have the following:

ul,
ol {
	padding: 0;
}

The editing canvas is not protected from CSS bleed, because it's not in an iframe (but that might happen in #21102, at which point this conversation would be different).

This means that if a theme does not provide an editor style, you'll end up with lists that look like this:

I tried both unset and initial, but neither of those values correctly reset the ul to its browser-defaults.

So yes, I really want to remove this property, and indeed as many others as we can. But outside of a patch to improve wp-admin itself for better scoping, or an iframe surrounding the editing canvas, I don't see an easy way to do this.

What do you think?

[oxyc]

@jasmussen right, since then 2ea41bf was added though so lists now have the padding-left explicitly set (sorry it was late and forgot to mention that in the issue). Should it not be fine to remove the generic inherit now?

[jasmussen]

Oh yes indeed, I suppose that does make it fine to remove the generic inherit! One moment let me test some things.

[jasmussen]

Nice work, thank you! Tests well for me with various themes, and even with groups, and groups inside columns, and media & text. Things appear to look good.

Are you able to merge this yourself or do you need me to press the button? Thanks again for the PR.

[oxyc]

Are you able to merge this yourself or do you need me to press the button? Thanks again for the PR.

I dont have permission so you go :)