Twenty Fifteen: List block padding with a background color

[viralsampat]

I have reviewed the "list block" into the "Twenty Fifteen" theme and found that its UL list type is not displaying properly when we add the list background color.

Backend:
Issue:

Front-end

Thanks,

[viralsampat]

I have checked above mentioned issue and resolved it. Here, I have added my patch.

[viralsampat]

Resolved

[devtanbir]

@viralsampat I have tested your patch. But it's now working for me. See my example below:

editor-blocks.css

.wp-block-post-content ol.has-background,
.wp-block-post-content ul.has-background {
     padding: 1.25em 2.375em;
}

If I add like this, then it's work.

[sabernhardt]

I used .editor-styles-wrapper ul.has-background and .editor-styles-wrapper ol.has-background to override the zero padding on .edit-post-visual-editor ul:not(.wp-block-gallery) and .editor-styles-wrapper ol in editor-blocks.css.

[deepakvijayan]

@sabernhardt Not sure overriding .has-background would be the right way to go.

Since I can see this issue even when there is no background. I am attaching screenshots from themes "Twenty Fifteen" and "Twenty Twenty-Four" with no background colour selected for reference.

Let us keep it consistent as to what it's been currently used in "Twenty Twenty-Four".

[sabernhardt]

Twenty Fifteen needs to remain consistent with the design decisions made for that theme nine years ago. People who prefer Twenty Twenty-Four can switch themes.

When no background color is defined, the lists are supposed to be in a "hanging punctuation" style (see #30374).

[deepakvijayan]

Replying to sabernhardt:

Twenty Fifteen needs to remain consistent with the design decisions made for that theme nine years ago. People who prefer Twenty Twenty-Four can switch themes.

When no background color is defined, the lists are supposed to be in a "hanging punctuation" style (see #30374).

I see. Adjusting the padding while .has-background is active would be the only option to go about it. I apologize for any confusion caused by my previous comment. Thank you for your hard work.

[karmatosed]

Assigning to myself for testing to see if does fit the design decisions.

[karmatosed]

Unless I am mistaken this is no longer an issue in testing. I might very well be wrong though. I am attaching what I see without applying the patch though in Safari and Chrome.

What I see with the latest patch is no change.

As a result of not seeing the issue currently, I am going to recommend this is closed, if we can get steps to replicate I absolutely will continue on with this though. Thank you everyone.

[sabernhardt]

The iframe editor shows the padding correctly, but the non-framed editor sets the padding to 0:

• The post editor assigns zero padding with .edit-post-visual-editor ul:not(.wp-block-gallery) in editor-blocks.css.
• The widgets editor assigns zero padding with .editor-styles-wrapper ul, from the inline styles built on editor-style.css.

[karmatosed]

@sabernhardt I am going to remove the 'closed' whilst this is being discussed as it seems that is best here. I admit what I am seeing isn't the issue but as you note this is likely due to the editor framing. What would be your recommendation here?

[sabernhardt]

adds padding to List blocks in the non-framed editor

[sabernhardt]

The padding value for lists with a background comes from block-library styles, not the theme. If that amount ever changes, it would be inaccurate (but likely better than zero).

Maybe any change on this ticket should not affect the iframe editor. 60197.nonframed.patch​ targets only the List block (ordered or unordered), only in the non-framed editor.

div.editor-styles-wrapper .wp-block-list:where(.has-background) {
	padding: 1.25em 2.375em;
}

Another selector could do the same for the List and Latest Posts blocks:

div.editor-styles-wrapper .has-background:where(.wp-block-list, .wp-block-latest-posts)

---

60197.2.patch​ is simpler. It could also correct the left padding for a Latest Posts block with a background, whether or not the editor is framed, but the ​block-library styles could use :not(.has-background) for any theme (GB62830).

[karmatosed]

I agree for now about getting the simpler patch in @sabernhardt. We can always iterate if need be but it does bring an option that is easier. Thank you, I will move towards to commit.

[karmatosed]

In 58772:

Twenty Fifteen: Fixes List Block with padding not having background color.

The List Block when had padding was not displaying the background color correctly. This only impacts the non-framed editor.

Props viralsampat, devtanbir, sabernhardt, deepakvijayan.
Fixes #60197.

[karmatosed]

I added in the one that only impacts the non-framed editor to be clear. We can always take things from there but it feels like a good starting point and moves this ticket on. Thank you everyone.