Try: Cover block image rules, very high specificity. #28412
Closed
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: +265 B (0%) Total Size: 1.39 MB
ℹ️ View Unchanged
|
ajlende
reviewed
Jan 22, 2021
Comment on lines
+171
to
+174
| // The extra specificity here helps scope the rules. | ||
| // The rules have the !important suffix, to protect the behavior from theme CSS bleed. | ||
| img.wp-block-cover__image-background, | ||
| video.wp-block-cover__video-background { |
There was a problem hiding this comment.
On first thought, I was thinking that it might be better to remove the .wp-block-cover-image, .wp-block-cover scope and the img and video scope, but I haven't thought of a single reason why these styles should need to be overridden since overriding many of them would just break the expected behavior.
outline, border, and box-shadow are the only ones that aren't size/positioning related, so maybe the scope could be lightened up on those, but I think the rest need it.
There was a problem hiding this comment.
Those three rules are all speculative in that I've seen rules that touch those, but not in recent themes. But that's sort of the arms race with the bleed that can happen.
I like keeping the specificity uniform, though — themes really really shouldn't touch those properties.
However I'm also happy that we started out with the other branch that isn't nuclear like this one. I hope that's sufficient so we can close this one! 🤞
|
Going to close this one for now. We can revisit if adjacent issues resurface! |
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.
This PR is a copy of #28404, but is separate because the changes are pretty opinionated. That lets us try a milder approach in the original branch, and this pretty heavy approach separately.
The bulk of the change is to be found in this commit: b15d1da, which adds additional selectors and suffixes them with !important.
The reason that inspired that change is TwentyEleven, which has this CSS:
It reminded me that the
imgelement is almost always styled by themes in numerous creative ways. If we don't anticipate themes doing this, it's likely the cover block, which now uses the image in a purely mechanical way, will suffer all kinds of CSS bleed.So by anticipating what might bleed in here, the hope is that we make the cover and its use of image, more resilient to that same bleed.
I almost always try to avoid !importants, but this seems like the right place for it.
Here's TwentyEleven shown in #28404:
Here it is, in this branch:
This branch, frontend: