Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't set global background color for Post Template #59455

Closed
tellthemachines opened this issue Feb 29, 2024 · 4 comments · Fixed by #61545
Closed

Can't set global background color for Post Template #59455

tellthemachines opened this issue Feb 29, 2024 · 4 comments · Fixed by #61545
Assignees
Labels
[Block] List Affects the List Block [Block] Post Template Affects the Post Template Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@tellthemachines
Copy link
Contributor

Description

Trying to set a background color for the Post Template block in global styles has no effect due to some overly-specific styling in the block CSS.

That was added in #37941 as a workaround for global styles for the List block bleeding into any other block that uses a ul (the same problem stands un-worked-around in the Navigation block)

The sustainable solution here would be to add a classname to the List block so we can attach global styles to it without contaminating other blocks with lists in their markup. My suggestion is revisiting #12420. Cc @carolinan who did some work on it previously!

Step-by-step reproduction instructions

  1. In global styles panel, under blocks > Post Template, try adding a background color.
  2. Save and verify that it has no effect in the editor or in the front end.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@tellthemachines tellthemachines added [Type] Bug An existing feature does not function as intended [Block] List Affects the List Block [Block] Post Template Affects the Post Template Block labels Feb 29, 2024
@ramonjd
Copy link
Member

ramonjd commented May 9, 2024

I just came across this today.

It looks as if the .wp-block-post-template.wp-block-post-template CSS rule is overwriting the global styles block rule :where(.wp-block-post-template):

.wp-block-post-template.wp-block-post-template {
    background: none;
}

:where(.wp-block-post-template) {
    background-color: var(--wp--preset--color--foreground);
}

This change —

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/post-template/style.scss#L8-L11

— was introduced a couple of years ago in #37941 but it seems to deliberately unset background colors.

I'm guessing we could delete it now that the Post Template block has color supports? @jasmussen @ntsekouras if you can remember that far back 😄

@tellthemachines
Copy link
Contributor Author

Good timing, I had fixing this on my list for today now that #56469 is merged 😄

@ntsekouras
Copy link
Contributor

I'm guessing we could delete it now that the Post Template block has color supports? @jasmussen @ntsekouras if you can remember that far back 😄

Yeah, the reason was mainly coming from the list block, but with #56469 merged the problem is not there.

I'm not sure whether we should remove it or adjust it a bit, because in general if theme devs add styles for ul, I don't think they would expect to affect Query Loop block too.

@tellthemachines
Copy link
Contributor Author

I'm not sure whether we should remove it or adjust it a bit, because in general if theme devs add styles for ul, I don't think they would expect to affect Query Loop block too.

There are multiple blocks using list elements; Navigation is another one. I think theme devs usually take them into account when styling lists, so it shouldn't be a problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] List Affects the List Block [Block] Post Template Affects the Post Template Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants