Unset inherited backgrounds on Posts Lists. #37941
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +54 B (0%) Total Size: 1.13 MB
ℹ️ View Unchanged
|
ntsekouras
reviewed
Jan 13, 2022
There was a problem hiding this comment.
Thanks for the PR Joen!
The root problem of this is a tough one and by also reading the issues/discussions about it, there are many angles to it.
I feel like I'm leaning towards the alternative from @oandregal to exclude ul/ol which are blocks, but I could see a short term solution like this one for core blocks that don't have color support(?), if we don't find a better alternative soon. That would mean to apply such treatment to all core blocks that fall into this category - there are more than this one and social icons.
| @@ -11,6 +11,11 @@ | |||
| list-style: none; | |||
| padding: 0; | |||
|
|
|||
| // Unset background colors that can be inherited from Global Styles with extra specificity. | |||
| &.wp-block-post-template { | |||
| background: none; | |||
There was a problem hiding this comment.
I guess in this approach we should also handle text and link color too.
There was a problem hiding this comment.
exclude ul/ol which are blocks
If we could find some solid and low-specificity code that worked in the editor and frontend, I'd be fine with that too 👍 👍
But at the same time, I fundamentally don't think the inheritance is necessarily a big problem.
noisysocks
added
the
Backport to WP Minor Release
oandregal
approved these changes
Jan 21, 2022
There was a problem hiding this comment.
Looking at this block, it's a container of blocks that acts as an intermediary between the query and the posts themselves. It can't be nested with any block other than query.
The only scenario where I see this could be problematic is when a theme tries to target this block specifically for color. For example, if it has a margin/padding and the theme wants to assign the color to this instead of targeting the query. I've looked into some themes (including the default ones that bundle with core) and none does this.
Given that we're blocked as to how to solve the overall issue and this is an uncontroversial fix that moves things forward, I'd think this is something we should merge. I'd still like someone with a lot more theme developer experience than I have to confirm this is fine for themes.
Also, probably extending this to any other inherited property supported by the list block is worth exploring.
|
Cool, I agree that it's a very trivial fix and mostly harmless. I have edited the description of this PR so that it shouldn't close #37388 when merged. Let's land this and see how things feel! |
Mamaduka
removed
the
Backport to WP Minor Release
|
Backported to the minor. |
Mamaduka
pushed a commit
that referenced
this pull request
Feb 16, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Makes progress on #37388, alternative to #37528, and goes well with #37940.
If you set the List block to have a specific background color in global styles, the ul block is targetted, making that color bleed into the Posts List and Query Loop blocks:
This PR unsets any inherited colors on the
ulelement used:How has this been tested?
Change the background color of the List block in global styles. Then insert a Posts List or Query Loop block, they should still have a transparent background.
Checklist:
*.native.jsfiles for terms that need renaming or removal).