Skip to content

Commit fa91b9a

Browse files
glendaviesnzockham
glendaviesnz
authored and
ockham
committed
Spacing presets: switch to using numbers instead of t-shirt sizes for labels in range control (#44247)
1 parent ffb12b7 commit fa91b9a

File tree

2 files changed

+56
-43
lines changed

2 files changed

+56
-43
lines changed

‎lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

+31-18
Original file line numberDiff line numberDiff line change
@@ -1248,38 +1248,42 @@ public function set_spacing_sizes() {
12481248

12491249
$unit = '%' === $spacing_scale['unit'] ? '%' : sanitize_title( $spacing_scale['unit'] );
12501250
$current_step = $spacing_scale['mediumStep'];
1251-
$steps_mid_point = round( ( ( $spacing_scale['steps'] ) / 2 ), 0 );
1251+
$steps_mid_point = round( $spacing_scale['steps'] / 2, 0 );
12521252
$x_small_count = null;
12531253
$below_sizes = array();
12541254
$slug = 40;
12551255
$remainder = 0;
12561256

1257-
for ( $x = $steps_mid_point - 1; $spacing_scale['steps'] > 1 && $slug > 0 && $x > 0; $x-- ) {
1258-
$current_step = '+' === $spacing_scale['operator']
1259-
? $current_step - $spacing_scale['increment']
1260-
: ( $spacing_scale['increment'] > 1 ? $current_step / $spacing_scale['increment'] : $current_step * $spacing_scale['increment'] );
1257+
for ( $below_midpoint_count = $steps_mid_point - 1; $spacing_scale['steps'] > 1 && $slug > 0 && $below_midpoint_count > 0; $below_midpoint_count-- ) {
1258+
if ( '+' === $spacing_scale['operator'] ) {
1259+
$current_step -= $spacing_scale['increment'];
1260+
} elseif ( $spacing_scale['increment'] > 1 ) {
1261+
$current_step /= $spacing_scale['increment'];
1262+
} else {
1263+
$current_step *= $spacing_scale['increment'];
1264+
}
12611265

12621266
if ( $current_step <= 0 ) {
1263-
$remainder = $x;
1267+
$remainder = $below_midpoint_count;
12641268
break;
12651269
}
12661270

12671271
$below_sizes[] = array(
1268-
/* translators: %s: Multiple of t-shirt sizing, eg. 2X-Small */
1269-
'name' => $x === $steps_mid_point - 1 ? __( 'Small', 'gutenberg' ) : sprintf( __( '%sX-Small', 'gutenberg' ), strval( $x_small_count ) ),
1272+
/* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Small. */
1273+
'name' => $below_midpoint_count === $steps_mid_point - 1 ? __( 'Small', 'gutenberg' ) : sprintf( __( '%sX-Small', 'gutenberg' ), strval( $x_small_count ) ),
12701274
'slug' => (string) $slug,
12711275
'size' => round( $current_step, 2 ) . $unit,
12721276
);
12731277

1274-
if ( $x === $steps_mid_point - 2 ) {
1278+
if ( $below_midpoint_count === $steps_mid_point - 2 ) {
12751279
$x_small_count = 2;
12761280
}
12771281

1278-
if ( $x < $steps_mid_point - 2 ) {
1282+
if ( $below_midpoint_count < $steps_mid_point - 2 ) {
12791283
$x_small_count++;
12801284
}
12811285

1282-
$slug = $slug - 10;
1286+
$slug -= 10;
12831287
}
12841288

12851289
$below_sizes = array_reverse( $below_sizes );
@@ -1296,30 +1300,39 @@ public function set_spacing_sizes() {
12961300
$slug = 60;
12971301
$steps_above = ( $spacing_scale['steps'] - $steps_mid_point ) + $remainder;
12981302

1299-
for ( $x = 0; $x < $steps_above; $x++ ) {
1303+
for ( $above_midpoint_count = 0; $above_midpoint_count < $steps_above; $above_midpoint_count++ ) {
13001304
$current_step = '+' === $spacing_scale['operator']
13011305
? $current_step + $spacing_scale['increment']
13021306
: ( $spacing_scale['increment'] >= 1 ? $current_step * $spacing_scale['increment'] : $current_step / $spacing_scale['increment'] );
13031307

13041308
$above_sizes[] = array(
1305-
/* translators: %s: Multiple of t-shirt sizing, eg. 2X-Large */
1306-
'name' => 0 === $x ? __( 'Large', 'gutenberg' ) : sprintf( __( '%sX-Large', 'gutenberg' ), strval( $x_large_count ) ),
1309+
/* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Large. */
1310+
'name' => 0 === $above_midpoint_count ? __( 'Large', 'gutenberg' ) : sprintf( __( '%sX-Large', 'gutenberg' ), strval( $x_large_count ) ),
13071311
'slug' => (string) $slug,
13081312
'size' => round( $current_step, 2 ) . $unit,
13091313
);
13101314

1311-
if ( 1 === $x ) {
1315+
if ( 1 === $above_midpoint_count ) {
13121316
$x_large_count = 2;
13131317
}
13141318

1315-
if ( $x > 1 ) {
1319+
if ( $above_midpoint_count > 1 ) {
13161320
$x_large_count++;
13171321
}
13181322

1319-
$slug = $slug + 10;
1323+
$slug += 10;
1324+
}
1325+
1326+
$spacing_sizes = array_merge( $below_sizes, $above_sizes );
1327+
1328+
// If there are 7 or less steps in the scale revert to numbers for labels instead of t-shirt sizes.
1329+
if ( $spacing_scale['steps'] <= 7 ) {
1330+
for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) {
1331+
$spacing_sizes[ $spacing_sizes_count ]['name'] = strval( $spacing_sizes_count + 1 );
1332+
}
13201333
}
13211334

1322-
_wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), array_merge( $below_sizes, $above_sizes ) );
1335+
_wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes );
13231336
}
13241337

13251338
/**

‎phpunit/class-wp-theme-json-test.php

+25-25
Original file line numberDiff line numberDiff line change
@@ -962,7 +962,7 @@ function data_generate_spacing_scale_fixtures() {
962962
),
963963
'expected_output' => array(
964964
array(
965-
'name' => 'Medium',
965+
'name' => '1',
966966
'slug' => '50',
967967
'size' => '4rem',
968968
),
@@ -979,12 +979,12 @@ function data_generate_spacing_scale_fixtures() {
979979
),
980980
'expected_output' => array(
981981
array(
982-
'name' => 'Medium',
982+
'name' => '1',
983983
'slug' => '50',
984984
'size' => '4rem',
985985
),
986986
array(
987-
'name' => 'Large',
987+
'name' => '2',
988988
'slug' => '60',
989989
'size' => '5.5rem',
990990
),
@@ -1001,17 +1001,17 @@ function data_generate_spacing_scale_fixtures() {
10011001
),
10021002
'expected_output' => array(
10031003
array(
1004-
'name' => 'Small',
1004+
'name' => '1',
10051005
'slug' => '40',
10061006
'size' => '2.5rem',
10071007
),
10081008
array(
1009-
'name' => 'Medium',
1009+
'name' => '2',
10101010
'slug' => '50',
10111011
'size' => '4rem',
10121012
),
10131013
array(
1014-
'name' => 'Large',
1014+
'name' => '3',
10151015
'slug' => '60',
10161016
'size' => '5.5rem',
10171017
),
@@ -1028,22 +1028,22 @@ function data_generate_spacing_scale_fixtures() {
10281028
),
10291029
'expected_output' => array(
10301030
array(
1031-
'name' => 'Small',
1031+
'name' => '1',
10321032
'slug' => '40',
10331033
'size' => '2.5rem',
10341034
),
10351035
array(
1036-
'name' => 'Medium',
1036+
'name' => '2',
10371037
'slug' => '50',
10381038
'size' => '4rem',
10391039
),
10401040
array(
1041-
'name' => 'Large',
1041+
'name' => '3',
10421042
'slug' => '60',
10431043
'size' => '5.5rem',
10441044
),
10451045
array(
1046-
'name' => 'X-Large',
1046+
'name' => '4',
10471047
'slug' => '70',
10481048
'size' => '7rem',
10491049
),
@@ -1060,27 +1060,27 @@ function data_generate_spacing_scale_fixtures() {
10601060
),
10611061
'expected_output' => array(
10621062
array(
1063-
'name' => 'Small',
1063+
'name' => '1',
10641064
'slug' => '40',
10651065
'size' => '2.5rem',
10661066
),
10671067
array(
1068-
'name' => 'Medium',
1068+
'name' => '2',
10691069
'slug' => '50',
10701070
'size' => '5rem',
10711071
),
10721072
array(
1073-
'name' => 'Large',
1073+
'name' => '3',
10741074
'slug' => '60',
10751075
'size' => '7.5rem',
10761076
),
10771077
array(
1078-
'name' => 'X-Large',
1078+
'name' => '4',
10791079
'slug' => '70',
10801080
'size' => '10rem',
10811081
),
10821082
array(
1083-
'name' => '2X-Large',
1083+
'name' => '5',
10841084
'slug' => '80',
10851085
'size' => '12.5rem',
10861086
),
@@ -1097,27 +1097,27 @@ function data_generate_spacing_scale_fixtures() {
10971097
),
10981098
'expected_output' => array(
10991099
array(
1100-
'name' => 'X-Small',
1100+
'name' => '1',
11011101
'slug' => '30',
11021102
'size' => '0.67rem',
11031103
),
11041104
array(
1105-
'name' => 'Small',
1105+
'name' => '2',
11061106
'slug' => '40',
11071107
'size' => '1rem',
11081108
),
11091109
array(
1110-
'name' => 'Medium',
1110+
'name' => '3',
11111111
'slug' => '50',
11121112
'size' => '1.5rem',
11131113
),
11141114
array(
1115-
'name' => 'Large',
1115+
'name' => '4',
11161116
'slug' => '60',
11171117
'size' => '2.25rem',
11181118
),
11191119
array(
1120-
'name' => 'X-Large',
1120+
'name' => '5',
11211121
'slug' => '70',
11221122
'size' => '3.38rem',
11231123
),
@@ -1134,27 +1134,27 @@ function data_generate_spacing_scale_fixtures() {
11341134
),
11351135
'expected_output' => array(
11361136
array(
1137-
'name' => 'X-Small',
1137+
'name' => '1',
11381138
'slug' => '30',
11391139
'size' => '0.09rem',
11401140
),
11411141
array(
1142-
'name' => 'Small',
1142+
'name' => '2',
11431143
'slug' => '40',
11441144
'size' => '0.38rem',
11451145
),
11461146
array(
1147-
'name' => 'Medium',
1147+
'name' => '3',
11481148
'slug' => '50',
11491149
'size' => '1.5rem',
11501150
),
11511151
array(
1152-
'name' => 'Large',
1152+
'name' => '4',
11531153
'slug' => '60',
11541154
'size' => '6rem',
11551155
),
11561156
array(
1157-
'name' => 'X-Large',
1157+
'name' => '5',
11581158
'slug' => '70',
11591159
'size' => '24rem',
11601160
),

0 commit comments

Comments
 (0)