Skip to content

Page List: Fix Notice component background gets incorrectly inherited #70932

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 1 commit into from
Jul 28, 2025
Merged

Page List: Fix Notice component background gets incorrectly inherited #70932

merged 1 commit into from
Jul 28, 2025

Conversation

@yogeshbhutkar
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar commented Jul 28, 2025 •
edited
Loading

What?

Closes #70929

This PR fixes the issue where the notice component's background is incorrectly inherited, causing it to become invisible.

Why?

The .wp-block-page-list > div rule overrides the background-color defined within .components-notice.

How?

The following styles were removed.

gutenberg/packages/block-library/src/page-list/editor.scss

Lines 2 to 6 in d07eb03

// Block wrapper gets the classes in the editor, and there's an extra div wrapper for now, so background styles need to be inherited.
.wp-block-page-list > div,
.wp-block-page-list {
background-color: inherit;
}

I can confirm that there's no extra div as the ServerSideRender component was removed, therefore making .wp-block-page-list > div rule unnecessary.

Ref.

With ServerSideRender Without ServerSideRender (Trunk)
with-ssr without-ssr

I've tested this across various scenarios, including custom colors, backgrounds, and submenu overlays applied to the parent Navigation block, and it appears to be working as expected. However, I recommend thorough testing to help identify any potential edge cases.

Testing Instructions

  1. Select a style with a dark background. For Twenty Twenty-Five, for example, "Evening".
  2. Ensure that there are no published pages.
  3. Create a new post and insert the Page List block.
  4. Ensure that the Notice is properly displayed and has a proper background.

Testing Instructions for Keyboard

Same.

Screenshots

Before After
before after

yogeshbhutkar
yogeshbhutkar commented Jul 28, 2025
View reviewed changes
packages/block-library/src/page-list/editor.scss
Comment on lines -4 to -5
.wp-block-page-list {
background-color: inherit;
Copy link
Contributor Author

@yogeshbhutkar yogeshbhutkar Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The .wp-block-page-list rule was also removed as it appeared redundant, as it's also defined within the corresponding style.scss file.

See:

gutenberg/packages/block-library/src/page-list/style.scss

Line 9 in 094eb82

background-color: inherit;

@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review July 28, 2025 06:31
@github-actions
Copy link

github-actions bot commented Jul 28, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Block] Page List Affects the Page List Block labels Jul 28, 2025
t-hamano
t-hamano approved these changes Jul 28, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Good to know we can safely remove this style.

@t-hamano t-hamano merged commit 166bc58 into WordPress:trunk Jul 28, 2025
70 of 73 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.4 milestone Jul 28, 2025
adamsilverstein pushed a commit to adamsilverstein/gutenberg that referenced this pull request Jul 31, 2025
@yogeshbhutkar @t-hamano @adamsilverstein
Page List: Fix Notice component background gets incorrectly inherited (…
0211d97 
…WordPress#70932)

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@t-hamano t-hamano t-hamano approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

Assignees

No one assigned

Labels

[Block] Page List Affects the Page List Block [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 21.4

Development

Successfully merging this pull request may close these issues.

Page List Block: Notice text becomes invisible in certain settings

2 participants

@yogeshbhutkar @t-hamano