Social Link: Add border and spacing support #63782
Open
+15
−3
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
akasunil
added
[Type] Enhancement
|
Flaky tests detected in b252dd1. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10373889536
|
|
Hi @aaronrobertshaw |
This was referenced Jul 28, 2024
|
Thanks for the ping 👍
It might be handy for some users but my guess is it will be very niche. If it were to be supported, those styles would need to be tweaked to accommodate the supports. My bigger concern is the adoption of standard color supports. From memory the parent Social Links block has an ad hoc color implementation that applies background and foreground colors to its inner icons. The proposed support here would likely conflict with that. |
…add/social-icon-color-border-spacing-support
Removed those styles and spacing support works fine now for
Indeed, It does conflict with ad hoc color implementation. We have to remove the ad hoc implementation for color support in |
|
Size Change: -17 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
akasunil
requested review from
ajitbohra,
ryanwelcher,
juanmaguitar,
fabiankaegy and
ndiego
as code owners
|
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. |
Comment on lines
-94
to
-95
| margin: 0; | ||
| padding: 0; |
There was a problem hiding this comment.
What's the thinking behind removing these resets?
My understanding was they should be tweaked to lower the specificity so global styles could be applied. Was there an unexpected issue when doing so?
There was a problem hiding this comment.
Should we move these style to social link block? Global style would be able to override that style. Another solution is we can add selector in social link block for spacing styles.
There was a problem hiding this comment.
I think this might need some further thought.
The Social Link block contains a clickable button or link depending on whether the user is in the editor or frontend.
It would make sense to me that any padding added for a link would be on that inner button or link so it is taken into account for the clickable area. The same could be said for the border too.
This would likely mean, leaving the styles here untouched and skipping serialization for the border and padding support. Then manually applying the support styles on the appropriate inner element.
I believe the reasoning behind the ad hoc color implementation for the parent Social Links block was that the desired UX was to make a single color selection and have that applied to all the inner social links. Perhaps, until there is a good reason to change that, color support should be omitted from the individual social link blocks. If there is significant demand from end users it can always be revisited. |
…add/social-icon-color-border-spacing-support
There was a problem hiding this comment.
Thanks for continuing this one @akasunil 👍
There are a few aspects that need tweaking here or some further thought and discussion. I've left inline comments for these but it might pay to get design feedback as well to guide the final decisions, for example, whether margin support makes sense here.
P.S. To help others coming to this PR, it would be handy to update the PR description to reflect the current state of the PR 🙏
Comment on lines
52
to
57
| "__experimentalDefaultControls": { | ||
| "radius": true, | ||
| "color": true, | ||
| "width": true, | ||
| "style": true | ||
| } |
There was a problem hiding this comment.
If the dimension controls aren't displayed by default, the border controls shouldn't be either.
| @@ -34,6 +34,27 @@ | |||
| "html": false, | |||
| "interactivity": { | |||
| "clientNavigation": true | |||
| }, | |||
| "spacing": { | |||
| "margin": true, | |||
There was a problem hiding this comment.
I'm not sure how useful allowing margin support on individual links is. My understanding of the social links block is that spacing should be handled via the parent Social Links block's block spacing support.
| "spacing": { | ||
| "margin": true, | ||
| "padding": true, | ||
| "units": [ "px", "em", "rem", "vh", "vw" ], |
There was a problem hiding this comment.
Do we need custom definitions of available spacing units here?
Comment on lines
-94
to
-95
| margin: 0; | ||
| padding: 0; |
There was a problem hiding this comment.
I think this might need some further thought.
The Social Link block contains a clickable button or link depending on whether the user is in the editor or frontend.
It would make sense to me that any padding added for a link would be on that inner button or link so it is taken into account for the clickable area. The same could be said for the border too.
This would likely mean, leaving the styles here untouched and skipping serialization for the border and padding support. Then manually applying the support styles on the appropriate inner element.
akasunil
changed the title
…add/social-icon-color-border-spacing-support
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
Social Linksblock.Part of,
#43247
#43243
Why?
Social Linkblock is missing border and spacing support.How?
Adds the border block support in block.json
Testing Instructions
Social Linkstyles are configurable via Global StylesSocial Linkblock and Apply the stylesScreenshots or screencast