Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spacing presets: add editor UI support #42173

Merged
merged 89 commits into from
Aug 14, 2022
Merged
Changes from 1 commit
Commits
Show all changes
89 commits
Select commit Hold shift + click to select a range
f979215
WIP - some initial structure for adding spacing presets support to t…
Jul 6, 2022
f034f2f
Fix doc comment
Jul 6, 2022
b57577f
Test
glendaviesnz Jul 6, 2022
4e8381a
Add initial spacing box control component
glendaviesnz Aug 4, 2022
42615f5
Move experimental component to block editor components
glendaviesnz Jul 7, 2022
2b9970e
Replace emotion styles
glendaviesnz Aug 4, 2022
ecb59b0
Some fixes to get the basics working
glendaviesnz Jul 8, 2022
496dba1
Some more tidy up
glendaviesnz Jul 8, 2022
332c3c2
Two steps forward - maybe?
glendaviesnz Aug 4, 2022
39c4b0c
Get the passing of existing values working
glendaviesnz Jul 10, 2022
6409fda
Fix linting issues
glendaviesnz Jul 11, 2022
e3b871b
Add initial handling of 0 values
glendaviesnz Jul 11, 2022
0548311
Handle 0 and default better
glendaviesnz Jul 11, 2022
281c76f
Try using a select control
glendaviesnz Jul 11, 2022
2ad0f96
More tweaks to show slider and select for testing
glendaviesnz Jul 12, 2022
5bc1046
remove superflous component
glendaviesnz Jul 12, 2022
6cdc706
Prototype using customselect
glendaviesnz Jul 13, 2022
e998877
Add custom header to controls
glendaviesnz Jul 13, 2022
7568aaa
Switch to segmented control
glendaviesnz Jul 19, 2022
71b7fb7
Some clean up of redundant code
glendaviesnz Jul 19, 2022
aca422e
Remove axial default
glendaviesnz Jul 19, 2022
b7b8f8d
Some more tidy up and add toggle to select list if more than 8 presets
glendaviesnz Jul 20, 2022
7592079
Clean up CSS, and naming of main settings component
glendaviesnz Jul 20, 2022
448d56a
Switch from box icon back to text labels
glendaviesnz Jul 20, 2022
bc17c58
Move parsing of units into the child settings component
glendaviesnz Jul 21, 2022
94e119d
Get handling of custom values working
glendaviesnz Jul 21, 2022
14b7bb5
Prepare test file for adding utils tests
glendaviesnz Jul 21, 2022
d3ab731
And conversion from preset to custom value
glendaviesnz Jul 21, 2022
ae88165
Set custom range control correctly when switching from preset to cust…
glendaviesnz Jul 21, 2022
9b496bd
Show correct controls for the current values
glendaviesnz Jul 21, 2022
bd60740
Fix issue with unit not being set when switching from preset and usin…
glendaviesnz Jul 21, 2022
cdda2fc
Fix issue with reset not working
glendaviesnz Jul 22, 2022
4d900a6
Fix issue with all sides showing in control when all the values where…
glendaviesnz Jul 22, 2022
b178c4b
Remove unused export of box icon
glendaviesnz Aug 4, 2022
bfd6598
Some code tidy up
glendaviesnz Jul 25, 2022
a5bc925
Tidy up utils, add doc comments and remove unused methods
glendaviesnz Jul 25, 2022
8b78443
Add some tests
glendaviesnz Jul 25, 2022
b041551
Add arial labels to spacing inputs
glendaviesnz Jul 25, 2022
8ae9147
Improve aria labels
glendaviesnz Jul 25, 2022
a7aa0d5
Minor fixes from review
glendaviesnz Jul 26, 2022
7992536
Fix tests
glendaviesnz Jul 26, 2022
4c866ea
Better align the controls and the buttons to the designs
glendaviesnz Jul 26, 2022
bebffd4
Remove redundant reset button
glendaviesnz Jul 26, 2022
cbe9c5c
Fix bug with preset not converting to custom value with all sides con…
glendaviesnz Jul 26, 2022
7f1cc8e
Makes sure max width is not overwritten by component styles to preven…
glendaviesnz Jul 26, 2022
a31f3b8
Fix layout of select control
glendaviesnz Jul 26, 2022
b4f664c
remove mod to custom select control
glendaviesnz Jul 26, 2022
563e4bf
Minor fixed from PR review
glendaviesnz Jul 27, 2022
5eee65c
Remove support for editing pairs of sides as event not currently pass…
glendaviesnz Jul 27, 2022
a87050d
Move label for all sides into top header
glendaviesnz Jul 27, 2022
2b6cade
Adjust layout of all sides controls
glendaviesnz Jul 27, 2022
8f525ee
Switch to css grid for laying out the controls
glendaviesnz Jul 28, 2022
98118a8
Fix bug with value not being set when custom select used
glendaviesnz Jul 28, 2022
9fbc3b0
Fix bug with current value not displaying in custom select
glendaviesnz Jul 28, 2022
87343dd
Minor fixes
glendaviesnz Jul 28, 2022
a4088ea
Standardised use of $grid-unit
glendaviesnz Jul 29, 2022
82c3c3c
Tidy up CSS
glendaviesnz Jul 29, 2022
2465154
Add handling of default
glendaviesnz Jul 29, 2022
73f96cd
Switch from regex exec to match
glendaviesnz Jul 29, 2022
9d390ed
Fix unit test
glendaviesnz Jul 29, 2022
cae7ee2
Remove redundant CSS
glendaviesnz Aug 1, 2022
6ff2352
Add the spacing presets control to global styles
glendaviesnz Aug 2, 2022
ca87605
Fix inconsistant naming of CustomSpacingSize
glendaviesnz Aug 3, 2022
b54163c
Remove redundant space
glendaviesnz Aug 4, 2022
deaed6c
Switch to using new applyValueToSides method from components lib
glendaviesnz Aug 4, 2022
b7c53dc
Rename default to Inherit style
glendaviesnz Aug 4, 2022
cecbc7f
Grey out range if value unset
glendaviesnz Aug 5, 2022
f11bc9a
Fixes linting error
glendaviesnz Aug 5, 2022
bc07d84
Switch to not showing range control if setting undefined
glendaviesnz Aug 8, 2022
038b1c2
Revert "Switch to not showing range control if setting undefined"
glendaviesnz Aug 8, 2022
f04dff6
Style fixes from PR review
glendaviesnz Aug 9, 2022
7c55b8d
remove the 'inherit' label on undefined
glendaviesnz Aug 9, 2022
5c34101
Fix bug with 0 values not being seen as preset
glendaviesnz Aug 9, 2022
cf9822d
Fix bug with mixed value not being set correctly
glendaviesnz Aug 9, 2022
bebd991
Reduce grid gap to compact display a bit
glendaviesnz Aug 9, 2022
a71709d
Use onMouseDown instead of onClick so tooltip shows
glendaviesnz Aug 10, 2022
3c64a0c
Remove unused default input props
glendaviesnz Aug 10, 2022
bce9da8
Add some additional tests
glendaviesnz Aug 10, 2022
868f61e
Minor fixes from PR review
glendaviesnz Aug 10, 2022
ce380eb
Update switch from custom to preset so label only shows 0 if custom v…
glendaviesnz Aug 10, 2022
d05bfbf
Deal with floats when switching from custom to preset and add an opti…
glendaviesnz Aug 11, 2022
1abc3a5
Code tidy ups from PR review
glendaviesnz Aug 11, 2022
aeedc1d
Fix bug with double click required to set initial value if further do…
glendaviesnz Aug 11, 2022
4397dfb
Change Inherit to Default in select list as Inherit doesn't make so m…
glendaviesnz Aug 11, 2022
9b73207
Remove redundant internal state value
glendaviesnz Aug 11, 2022
1b1f299
If custom sizing set and user switches to the select list, show custo…
glendaviesnz Aug 11, 2022
68f60bf
Add spacing details to global styles PRESET_METADATA so changes to sp…
glendaviesnz Aug 12, 2022
cb11f83
Only show the spacing sizes control if there are spacing sizes set
glendaviesnz Aug 12, 2022
884c77a
Add guard against undefined spacingSizes
glendaviesnz Aug 12, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Deal with floats when switching from custom to preset and add an opti…
…onal min value for custom input
  • Loading branch information
glendaviesnz committed Aug 11, 2022
commit d05bfbf982301779ef2b83e277545a3c900d4f23
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ export default function AllInputControl( {
sides,
spacingSizes,
type,
minimumCustomValue,
} ) {
const allValue = getAllRawValue( values );
const hasValues = isValuesDefined( values );
@@ -33,6 +34,7 @@ export default function AllInputControl( {
spacingSizes={ spacingSizes }
isMixed={ isMixed }
type={ type }
minimumCustomValue={ minimumCustomValue }
/>
);
}
Original file line number Diff line number Diff line change
@@ -12,6 +12,7 @@ export default function AxialInputControls( {
sides,
spacingSizes,
type,
minimumCustomValue,
} ) {
const createHandleOnChange = ( side ) => ( next ) => {
if ( ! onChange ) {
@@ -52,6 +53,7 @@ export default function AxialInputControls( {
side={ side }
spacingSizes={ spacingSizes }
type={ type }
minimumCustomValue={ minimumCustomValue }
/>
);
} ) }
Original file line number Diff line number Diff line change
@@ -23,6 +23,7 @@ export default function SpacingSizesControl( {
sides,
splitOnAxis = false,
useSelect,
minimumCustomValue = 0,
} ) {
const spacingSizes = [
{ name: 0, slug: '0', size: 0 },
@@ -63,6 +64,7 @@ export default function SpacingSizesControl( {
spacingSizes,
useSelect,
type: label,
minimumCustomValue,
};

return (
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ export default function BoxInputControls( {
onChange,
spacingSizes,
type,
minimumCustomValue,
} ) {
// Filter sides if custom configuration provided, maintaining default order.
const filteredSides = sides?.length
@@ -36,6 +37,7 @@ export default function BoxInputControls( {
onChange={ createHandleOnChange( side ) }
spacingSizes={ spacingSizes }
type={ type }
minimumCustomValue={ minimumCustomValue }
/>
);
} ) }
Original file line number Diff line number Diff line change
@@ -38,6 +38,7 @@ export default function SpacingInputControl( {
onChange,
isMixed = false,
type,
minimumCustomValue,
} ) {
const [ showCustomValueControl, setShowCustomValueControl ] = useState(
value !== undefined && ! isValueSpacingPreset( value )
@@ -181,6 +182,7 @@ export default function SpacingInputControl( {
}
value={ currentValue }
units={ units }
min={ minimumCustomValue }
placeholder={ allPlaceholder }
disableUnits={ isMixed }
label={ ariaLabel }
Original file line number Diff line number Diff line change
@@ -96,7 +96,7 @@ export function getSliderValueFromPreset( presetValue, spacingSizes ) {
return 0;
}
const slug =
parseInt( presetValue, 10 ) === 0
parseFloat( presetValue, 10 ) === 0
? '0'
: getSpacingPresetSlug( presetValue );
const sliderValue = spacingSizes.findIndex( ( spacingSize ) => {