List: Prevent style bleed into non-List block lists #63537
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
aaronrobertshaw
added
[Type] Bug
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: -2 B (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
andrewserong
approved these changes
Jul 15, 2024
There was a problem hiding this comment.
The approach taken in #56469 also mean preexisting blocks get the new
.wp-block-listclass so is safe in that regard for BC.
The HTML Tag Processor to the rescue! Very cool that it enables this change to happen in a safe way 👍
✅ This change is testing well in isolation and with #63407 applied
✅ Only the List block gets default padding applied (Page List with in a Nav block, Categories List blocks behave as expected)
| Before | After |
|---|---|
 |
 |
Thanks for all the context in the "How" section, it made reviewing this a breeze. LGTM! 🚀
|
I'll get this one merged to help move #63407 forward. Thanks for the thorough testing @andrewserong 🙇 |
|
Thank you! |
scruffian
pushed a commit
that referenced
this pull request
Jul 15, 2024
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Jul 18, 2024
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
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.
What?
Prevents List block styles targeting generic
ulandolelements from bleeding into other blocks and lists.Why?
This style bleed leads to unexpected padding.
How?
After #56469, the List block now has a class injected into its markup. We can use this to more accurately apply the list block's styles. The approach taken in #56469 also mean preexisting blocks get the new
.wp-block-listclass so is safe in that regard for BC.The only core block that applies a
.has-backgroundclass to aulorolelement is the Page List block. This only happens when it is a child of a Navigation block which provides background colors via Block Context. The Navigation block also defines higher specificity styles resetting the padding so the Page List isn't impacted by the bleed. The end result is this change won't affect the Page List block.There were quite a few hits for
.has-backgroundstyles in the WP Directory. Most of these were for the navigation block and all of them had a higher specificity than the style being changed in this PR, so those themes should also be unaffected.Testing Instructions
Whether the categories list should also receive default padding when it has a background is outside the scope of this PR and can be considered a part of #63407.
Screenshots or screencast
There should be no visual change for the List and Page List blocks.