Add block gap support to Quote block. #56064
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
tellthemachines
added
[Type] Enhancement
tellthemachines
requested review from
ajitbohra,
ryanwelcher,
juanmaguitar,
fabiankaegy and
ndiego
as code owners
There was a problem hiding this comment.
Thanks for the quick follow-up!
This appears to be working well at the block level within the post editor, but on the site frontend, the spacing doesn't appear to be applied to the citation.
Editor
Site frontend
I think it might be to do with the block editor injecting display: block within the editor for all blocks, but the same isn't happening in the CSS on the site front end. Would it be safe to add in that rule for the site frontend do you think, or could that adversely affect themes already out in the wild?
I'm not sure. Potentially any change in CSS can affect existing styling, though it's probably a low chance in the specific case of changing the display attribute of I'll go ahead and try adding it. Worst case we have to remove it again 😄 It would be nice if the citation were its own block and could be aligned/styled differently from the remaining blocks. |
|
Size Change: +64 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
| @@ -18,5 +18,9 @@ | |||
| font-size: 1.125em; | |||
| text-align: right; | |||
| } | |||
|
|
|||
| } | |||
| cite { | |||
There was a problem hiding this comment.
Would it be worth using a direct child combinator (> cite) since the Quote block allows arbitrary blocks? Just in case anyone winds up using a custom block within a Quote block that expects the cite to be inline 🤔
There was a problem hiding this comment.
oooh right yes that's a good idea!
andrewserong
approved these changes
Nov 13, 2023
There was a problem hiding this comment.
This is testing nicely for me now, thanks for the follow-ups:
✅ Global styles spacing is applied correctly
✅ Block-level overrides global spacing
✅ Spacing matches between the editor and site frontend
✅ Quote block still looks good as-is on Classic themes (e.g. TT1, TwentyTwenty)
Since the added display: block rule matches how the editor's styling behaves, this feels like a pretty safe change to me, and as you mention, would be easy to remove (or reduce the specificity) if we need to in follow-ups.
LGTM! ✨
cbravobernal
pushed a commit
that referenced
this pull request
Nov 14, 2023
* Add block gap support to Quote block. * Change cite display in front end to match editor styles * Target only direct descentants
|
@tellthemachines I thought I'd have a go at a dev note for this one, based on the discussion from #59164. Feel free to edit any of the following if anything's wrong! Draft dev noteIn WordPress 6.5, the Quote block has For themes that use |
andrewserong
added
the
has dev note
32 tasks
|
Oh nice, thanks @andrewserong ! I didn't think this needed a dev note as we don't usually add them when adding support for an existing feature to a block, but I guess better have it than not 😅 Should the note also mention layout support added to Quote in #55240? It's probably not necessary as it won't change anything from the theme's perspective. |
Yeah, I wasn't too sure, but since @carolinan mentioned it, I figured like you mention, better to have it than not 🙂
Since |
Yup, I think it's fine as is! |
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?
Follow up from #55240: adds block gap support to the Quote block, now that it has layout support.
Note that setting block spacing for Quote in global styles will be overridden by theme styles when testing with TT4.
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast