Add color support to the quote block #39899
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
youknowriad
added
[Type] Enhancement
youknowriad
requested review from
ajitbohra,
mkaz,
ryanwelcher and
juanmaguitar
as code owners
youknowriad
commented
Mar 30, 2022
| @@ -1,4 +1,5 @@ | |||
| .wp-block-quote { | |||
| box-sizing: border-box; | |||
There was a problem hiding this comment.
Applying box-sizing: border-box to the quote block might have a small impact on the themes frontend. But I expect that most themes already do this somehow, if not, this might fix some bugs if they add paddings to quotes... But it's still an impactful change we need to check.
(Similar to #39895 for lists)
There was a problem hiding this comment.
CC: @ramonjd @scruffian
I wonder if we should re-apply this in the vanilla stylesheet. We recently removed an editor-only style so at least the frontend and backend were consistent, but without this rule applied, border rules are kind of terrible across all blocks. We can apply it one by one to every block that gets border support, but maybe this is a reason to add it in a blanket form again?
youknowriad
commented
Mar 30, 2022
youknowriad
added
the
Needs Dev Note
|
Size Change: +31 B (0%) Total Size: 1.22 MB
ℹ️ View Unchanged
|
|
The color panels are working as intended! I've tested on Twenty (TwentyOne|TwentyTwo|Nineteen|Seventeen). This is on TwentyTwentyTwo:
Also agree. I'd say since background color is a new feature, folks would presumably add padding in the editor (if we make it available) at the same time as adding a background color. It might also avoid some inconsistencies. For example TwentyTwenty defines padding for quotes in the editor,, which overwrites the default block padding (
But in the frontend the default block padding kicks in.
This is also the case for TwentyNineteen. |
|
I have tested the PR with a few classic themes and block themes and it is working well. |
|
Anyone to ✅ the PR |
youknowriad
force-pushed
the
add/quote-colors
branch
from
e83c271
to
3c8c92e
Compare
jasmussen
approved these changes
Apr 1, 2022
There was a problem hiding this comment.
Works as intended:
I think we should revisit #39899 (comment) and consider whether we don't need that rule in a blanket way. Try a variety of blocks with border support, such as heading and group, and it's quickly apparent that it's a weird behavior. If we add it here, we should add it everywhere.
37 tasks
4 tasks
geriux
pushed a commit
that referenced
this pull request
Apr 13, 2022
7 tasks
4 tasks
Closed
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?
This PR adds color support (background, text, link) to the quote block.
Why?
I think it can be handy to be able to apply the same text color (or link, background) to the whole quote (all paragraphs and cite) in one go. Especially now that we're working on the V2 version of the quote block which leverages inner block.
How?
There's a number of important considerations. (See inline comments in the PR):
Testing Instructions
(This PR works for both v1 and v2 of the block, so you can try both)
cc @WordPress/block-themers @WordPress/theme-team