Quote: Prevent block theme styles overriding global border and padding #64045
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
|
Size Change: +34 B (0%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
t-hamano
reviewed
Jul 29, 2024
There was a problem hiding this comment.
Thanks for the PR!
I tested it using Emptytheme. I confirmed that the theme style can be overridden correctly from the global styles, but I found that there are cases where it is not overridden correctly in block instances. That is, when only the border width is applied.
After investigating, I found that if only the border width is applied in the global styles, the border-style: solid is also applied at the same time, so it overrides the theme style border:none:
On the other hand, in block instances, it seems that the border is overridden by the theme's border:none, probably because only the border-width is applied as an inline style:
This can be solved by explicitly applying border-style to the block instance, but is there a way to solve it without doing this?
|
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. |
To solve this problem, I think it might be effective to add the following CSS to the .wp-block-quote {
&:where([style*="border-width"]) {
border-style: solid;
}
} |
|
Thanks for the review @t-hamano 👍
The I'm in two minds on this one. I don't think adding more and more fallback CSS is a good option. The An alternative path that can be explored as a follow-up is to check the now available global styles data and apply the same fallback border-style logic for the block instances if that's what we ultimately want. This would be a more holistic approach that can be leveraged across all blocks that adopt border supports. One last thing, the proposed CSS tweak would need to be extended for all longhand So after having typed all that out. I propose we proceed with this PR as is. Depending on what comes of the work around displaying inherited global styles in the block inspector, we can follow up on the fallback for borders then. What do you think? |
t-hamano
approved these changes
Aug 2, 2024
There was a problem hiding this comment.
Thank you for the detailed explanation!
If I'm explaining it correctly, then it's fine to ship this PR first, right?
Depending on what comes of the work around displaying inherited global styles in the block inspector, we can follow up on the fallback for borders then.
I discovered that in #37752, it's being considered to reflect global style values in the block inspector. Border fallbacks might also be considered in this issue.
|
Looking at the conversation, and testing the PR, it solves the main issue. I'll merge while @aaronrobertshaw is away.
|
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.
Addresses: #63544 (comment)
What?
Fixes an issue where the Quote block's theme styles have higher specificity than global styles preventing the recently adopted border support styles from applying correctly when the quote block is center or right-aligned.
This fix now also allows global styles padding for the quote block to apply as expected when the block is aligned.
Why?
Provides the expected styling behaviour for the Quote block.
How?
:whereso the resulting selector has0-1-0specificity to match global stylesTesting Instructions
Screenshots or screencast