Post Author Biography: Add Border Support #64615
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
shail-mehta
added
[Type] Enhancement
|
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: +176 B (+0.01%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
ramonjd
approved these changes
Aug 20, 2024
aaronrobertshaw
approved these changes
Aug 20, 2024
There was a problem hiding this comment.
LGTM 🚢
✅ Global styles apply correctly
✅ Block instance styles override global styles
✅ Styles apply consistently between editor and frontend
✅ Box sizing allows parent to enforce width
✅ Default display of border controls matches spacing controls
Screen.Recording.2024-08-20.at.11.59.00.AM.mp4
Comment on lines
+1
to
+4
| .wp-block-post-author-biography { | ||
| // This block has customizable padding, border-box makes that more predictable. | ||
| box-sizing: border-box; | ||
| } |
There was a problem hiding this comment.
It might be a good follow-up to see if we can make a simple generic selector to set border-box sizing on all blocks.
I don't know if we can get away with it but it seems excessive that we have to add a separate rule for almost every block, bloating the CSS in each request.
Maybe it's worth trying something like:
// Or .wp-block-* ?
.wp-block {
box-sizing: border-box;
}There was a problem hiding this comment.
Can we use css like this for globally?
[class*="wp-block-"][style*="border"] {
box-sizing: border-box;
}
There was a problem hiding this comment.
That looks promising. The catch is that we'd have to make sure there are wp-block-* classnames on all elements that receive the inline styles.
Some blocks skip serialization and apply styles on inner elements.
I pulled up the obvious example of wp-block-search, whose inline border styles are applied conditionally on the input and button. Fortunately, these elements have wp-block-* classes, so it'd work.
There was a problem hiding this comment.
Agreed 👍
We need to review all blocks and verify that box-sizing: border-box is correctly applied (if we use box-sizing:border-box globally)
especially since some blocks have borders on inner elements.
Can I create separate PR for this?
There was a problem hiding this comment.
I didn't mean to derail the PR, that's why I suggested it as a good follow-up given the obvious edge cases.
There was a problem hiding this comment.
Understood.
I appreciate your suggestion. I agree that it’s important to review and ensure box-sizing: border-box is correctly applied across all blocks, especially given the edge cases with borders on inner elements. I will proceed with creating a separate PR to address this follow-up. Thank you for highlighting it!
|
Thank you both for reviewing this PR. |
aaronrobertshaw
deleted the
add/border-support-in-post-author-biography
branch
|
I've taken the liberty to merge this one so I can update the border support tracking issue. Thanks again for the work here @shail-mehta 👍 |
bph
pushed a commit
to bph/gutenberg
that referenced
this pull request
Aug 31, 2024
Co-authored-by: shail-mehta <shailu25@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
97 tasks
7 tasks
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?
Add border block support to the
Post Author Biographyblock.Part of #43247
Why?
Post Author Biographyblock is missing border support.How?
Add the border block support in block.json.
Testing Instructions
Post Author Biographyblock's border is Configurable via Global Styles.Post Author Biographyblock and Apply the border Styles.Post Author Biographyblock styles take precedence over global Styles.Post Author Biographyblock borders display correctly in both the Editor and Frontend.Screenshots or Screencast
add-border-support-in-author-biography.mp4