Post Template: Add Border and Spacing Support #64425
Open
+14
−2
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: +44 B (0%) Total Size: 1.84 MB
ℹ️ View Unchanged
|
shail-mehta
requested review from
ajitbohra,
t-hamano and
aaronrobertshaw
and removed request for
ajitbohra
shail-mehta
requested review from
ryanwelcher,
juanmaguitar,
fabiankaegy and
ndiego
as code owners
There was a problem hiding this comment.
Thanks for the continued efforts on adopting border supports 👍
To be honest I'm not sure about whether borders are desirable on the Post Template block. It might be wise to get some design feedback on this one.
Additionally, is the Post Template block another case where it would be better to have these controls deemphasized making the padding, margin, and border controls optional?
shail-mehta
force-pushed
the
add/border-and-spacing-support-in-post-template
branch
from
04a740e to
4b8718e
Compare
@aaronrobertshaw I have set the border and spacing controls to be optional by default. |
This was referenced Oct 25, 2024
Thanks for tweaking that. I'm still really not convinced about further block support adoptions on the Post Template block. Any potential use case for this would have to be extremely niche. Let's leave this open for a while longer though and see if it gets any traction or design feedback. |
|
Personally, I find the border and padding support especially useful. For example, I want to achieve the following layout:
Of course, we can achieve the same thing using the Group block, but it would be nice if we could achieve it with just the Post Template block. cc @WordPress/gutenberg-design |
|
I agree with you Aki. |
|
I agree with you Aki too. |
|
Imo the Post Template block should either be treated:
Because it supports color, typography, and dimensions already, it feels like we're on the first path, so I don't really see any reason not to add border and spacing support. |
shail-mehta
force-pushed
the
add/border-and-spacing-support-in-post-template
branch
from
f9beb74 to
852a15b
Compare
|
Flaky tests detected in 8c4dcf1. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12452008879
|
t-hamano
reviewed
Dec 22, 2024
There was a problem hiding this comment.
Overall, this PR seems to be viewed positively, so let's move forward with it.
However, I think there are some issues that need to be addressed.
Left padding/margin not applied
Here is a style present to reset the left padding/margin, so we can't apply the left padding/margin via the global styles or theme.json:
We may need to reduce the specificity of the selector for the padding/margin reset styles by using :where.
The grid frame is misaligned
When the layout is grid view and this block is selected, a grey frame appears. When a border is applied, it seems to be out of sync with the actual size of the post:
This issue can also be reproduced with the Grid block, so it's probably an issue with the GridVisualizer component itself:
It may not necessarily need to be addressed in this PR, but the Post Template block will likely be used more than the Grid block, so the misalignment may be more noticeable there.
| @@ -3,5 +3,6 @@ | |||
| padding-left: 0; | |||
| margin-left: 0; | |||
| list-style: none; | |||
| box-sizing: border-box; | |||
There was a problem hiding this comment.
I think this is unnecessary since we already have the same styles added to style.scss.
| @@ -4,6 +4,7 @@ | |||
| max-width: 100%; | |||
| list-style: none; | |||
| padding: 0; | |||
| box-sizing: border-box; | |||
There was a problem hiding this comment.
Suggested change
| box-sizing: border-box; | |
| // This block has customizable padding, border-box makes that more predictable. | |
| box-sizing: border-box; |
As with any block, it's a good idea to add comments.
|
@t-hamano Thank you for the feedback. I have incorporated the suggested changes. Regarding Left padding/margin not applied Issue: I will work on this issue. |
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 and Spacing support to the
Post Templateblock.Part of #43247
Why?
Post Templateblock is missing border support and spacing support.How?
Adds the border and spacing support in block.json.
Testing Instructions
Post Template(Inside in Query Loop) block's border and spacing is Configurable via Global Styles.Post Template(In Query Loop) and Apply the border Styles & Spacing.Post Templateblock styles take precedence over global Styles.Post Templateblock borders & spacing display correctly in both the Editor and Frontend.Screenshots or Screencast
add-border-and-spacing-support-in-post-template.mp4