Border Support: Add support for custom border units #33315
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
Also fixes misalignment of border width UnitControl select caused by incorrect line height on style component legend.
aaronrobertshaw
added
[Type] Bug
7 tasks
|
Size Change: +5.88 kB (+1%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
oandregal
reviewed
Jul 9, 2021
| @@ -49,7 +50,9 @@ export default function BorderRadiusControl( { onChange, values } ) { | |||
| ! hasDefinedValues( values ) || ! hasMixedValues( values ) | |||
| ); | |||
|
|
|||
| const units = useCustomUnits( { availableUnits: [ 'px', 'em', 'rem' ] } ); | |||
| const units = useCustomUnits( { | |||
| availableUnits: useSetting( 'border.units' ) || [ 'px', 'em', 'rem' ], | |||
There was a problem hiding this comment.
In #33280 (comment) we consolidated all units into spacing.units so there's no longer a layout.units. I wonder if we can do the same here.
See this specific thread for more context #33280 (comment) The concerns were that the relation between both wasn't well understood and the implementation of UnitControl made layout values dependant on spacing values (layout couldn't have values that spacing also had).
There was a problem hiding this comment.
I can change this to spacing.units if desired. I'm not sure I follow why we wouldn't potentially want a different set of units for borders.
For example, do vh and vw make sense for borders? Would a theme author wish to have a different set of available units for borders as opposed to spacing?
(layout couldn't have values that spacing also had).
Unless I'm missing something, is it not that the supplied units had to be a subset of spacing units? That makes sense to me for borders. If you didn't want em or rem for spacing, I can see them also not being desired for border units.
From the linked thread, you mention there that units can only be a subset of spacing.units.
This means that what you pass as units can only be a subset of spacing.units
I'm also fine with a desire to simplify the handling and config of units. If the extra flexibility of different border units isn't worth the cost, I'll change this PR accordingly.
There was a problem hiding this comment.
After some further testing, the borders behave ok with all units. I also found I'd missed the global styles' border panel units.
Given that, I've taken the opportunity to switch everything to use spacing.units while updating the global styles panel.
oandregal
reviewed
Jul 12, 2021
packages/block-editor/src/components/border-radius-control/index.js
Outdated
Show resolved
Hide resolved
oandregal
approved these changes
Jul 13, 2021
|
One thing I've noticed is this: if |
aristath
approved these changes
Jul 13, 2021
12 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.
Description
legendelement so that it doesn't stretch the border width UnitControl's height.How has this been tested?
Manually.
settings.spacingchangeunitsas follows:"units": [ "px", "em" ].pxandemunits.Screenshots
Types of changes
Bug fix.
Checklist:
*.native.jsfiles for terms that need renaming or removal).