From 30c07c153e4a718f47f6e1b1d14f6e5d363823e5 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 19 Sep 2022 12:51:15 +1200 Subject: [PATCH 1/2] Switch to using numbers instead of t-shirt sizes for labels --- .../wordpress-6.1/class-wp-theme-json-6-1.php | 59 ++++++++----------- phpunit/class-wp-theme-json-test.php | 50 ++++++++-------- 2 files changed, 49 insertions(+), 60 deletions(-) diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index 31ce6d6964b55..4744c36d441ae 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -1248,38 +1248,32 @@ public function set_spacing_sizes() { $unit = '%' === $spacing_scale['unit'] ? '%' : sanitize_title( $spacing_scale['unit'] ); $current_step = $spacing_scale['mediumStep']; - $steps_mid_point = round( ( ( $spacing_scale['steps'] ) / 2 ), 0 ); - $x_small_count = null; + $steps_mid_point = round( $spacing_scale['steps'] / 2, 0 ); $below_sizes = array(); $slug = 40; $remainder = 0; - for ( $x = $steps_mid_point - 1; $spacing_scale['steps'] > 1 && $slug > 0 && $x > 0; $x-- ) { - $current_step = '+' === $spacing_scale['operator'] - ? $current_step - $spacing_scale['increment'] - : ( $spacing_scale['increment'] > 1 ? $current_step / $spacing_scale['increment'] : $current_step * $spacing_scale['increment'] ); + for ( $below_midpoint_count = $steps_mid_point - 1; $spacing_scale['steps'] > 1 && $slug > 0 && $below_midpoint_count > 0; $below_midpoint_count-- ) { + if ( '+' === $spacing_scale['operator'] ) { + $current_step -= $spacing_scale['increment']; + } elseif ( $spacing_scale['increment'] > 1 ) { + $current_step /= $spacing_scale['increment']; + } else { + $current_step *= $spacing_scale['increment']; + } if ( $current_step <= 0 ) { - $remainder = $x; + $remainder = $below_midpoint_count; break; } $below_sizes[] = array( - /* translators: %s: Multiple of t-shirt sizing, eg. 2X-Small */ - 'name' => $x === $steps_mid_point - 1 ? __( 'Small', 'gutenberg' ) : sprintf( __( '%sX-Small', 'gutenberg' ), strval( $x_small_count ) ), + 'name' => null, 'slug' => (string) $slug, 'size' => round( $current_step, 2 ) . $unit, ); - if ( $x === $steps_mid_point - 2 ) { - $x_small_count = 2; - } - - if ( $x < $steps_mid_point - 2 ) { - $x_small_count++; - } - - $slug = $slug - 10; + $slug -= 10; } $below_sizes = array_reverse( $below_sizes ); @@ -1290,36 +1284,31 @@ public function set_spacing_sizes() { 'size' => $spacing_scale['mediumStep'] . $unit, ); - $current_step = $spacing_scale['mediumStep']; - $x_large_count = null; - $above_sizes = array(); - $slug = 60; - $steps_above = ( $spacing_scale['steps'] - $steps_mid_point ) + $remainder; + $current_step = $spacing_scale['mediumStep']; + $above_sizes = array(); + $slug = 60; + $steps_above = ( $spacing_scale['steps'] - $steps_mid_point ) + $remainder; - for ( $x = 0; $x < $steps_above; $x++ ) { + for ( $above_midpoint_count = 0; $above_midpoint_count < $steps_above; $above_midpoint_count++ ) { $current_step = '+' === $spacing_scale['operator'] ? $current_step + $spacing_scale['increment'] : ( $spacing_scale['increment'] >= 1 ? $current_step * $spacing_scale['increment'] : $current_step / $spacing_scale['increment'] ); $above_sizes[] = array( - /* translators: %s: Multiple of t-shirt sizing, eg. 2X-Large */ - 'name' => 0 === $x ? __( 'Large', 'gutenberg' ) : sprintf( __( '%sX-Large', 'gutenberg' ), strval( $x_large_count ) ), + 'name' => null, 'slug' => (string) $slug, 'size' => round( $current_step, 2 ) . $unit, ); - if ( 1 === $x ) { - $x_large_count = 2; - } - - if ( $x > 1 ) { - $x_large_count++; - } + $slug += 10; + } + $spacing_sizes = array_merge( $below_sizes, $above_sizes ); - $slug = $slug + 10; + for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) { + $spacing_sizes[ $spacing_sizes_count ]['name'] = strval( $spacing_sizes_count + 1 ); } - _wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), array_merge( $below_sizes, $above_sizes ) ); + _wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes ); } /** diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 35c4bf153ddb2..ef22b354d219e 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -962,7 +962,7 @@ function data_generate_spacing_scale_fixtures() { ), 'expected_output' => array( array( - 'name' => 'Medium', + 'name' => '1', 'slug' => '50', 'size' => '4rem', ), @@ -979,12 +979,12 @@ function data_generate_spacing_scale_fixtures() { ), 'expected_output' => array( array( - 'name' => 'Medium', + 'name' => '1', 'slug' => '50', 'size' => '4rem', ), array( - 'name' => 'Large', + 'name' => '2', 'slug' => '60', 'size' => '5.5rem', ), @@ -1001,17 +1001,17 @@ function data_generate_spacing_scale_fixtures() { ), 'expected_output' => array( array( - 'name' => 'Small', + 'name' => '1', 'slug' => '40', 'size' => '2.5rem', ), array( - 'name' => 'Medium', + 'name' => '2', 'slug' => '50', 'size' => '4rem', ), array( - 'name' => 'Large', + 'name' => '3', 'slug' => '60', 'size' => '5.5rem', ), @@ -1028,22 +1028,22 @@ function data_generate_spacing_scale_fixtures() { ), 'expected_output' => array( array( - 'name' => 'Small', + 'name' => '1', 'slug' => '40', 'size' => '2.5rem', ), array( - 'name' => 'Medium', + 'name' => '2', 'slug' => '50', 'size' => '4rem', ), array( - 'name' => 'Large', + 'name' => '3', 'slug' => '60', 'size' => '5.5rem', ), array( - 'name' => 'X-Large', + 'name' => '4', 'slug' => '70', 'size' => '7rem', ), @@ -1060,27 +1060,27 @@ function data_generate_spacing_scale_fixtures() { ), 'expected_output' => array( array( - 'name' => 'Small', + 'name' => '1', 'slug' => '40', 'size' => '2.5rem', ), array( - 'name' => 'Medium', + 'name' => '2', 'slug' => '50', 'size' => '5rem', ), array( - 'name' => 'Large', + 'name' => '3', 'slug' => '60', 'size' => '7.5rem', ), array( - 'name' => 'X-Large', + 'name' => '4', 'slug' => '70', 'size' => '10rem', ), array( - 'name' => '2X-Large', + 'name' => '5', 'slug' => '80', 'size' => '12.5rem', ), @@ -1097,27 +1097,27 @@ function data_generate_spacing_scale_fixtures() { ), 'expected_output' => array( array( - 'name' => 'X-Small', + 'name' => '1', 'slug' => '30', 'size' => '0.67rem', ), array( - 'name' => 'Small', + 'name' => '2', 'slug' => '40', 'size' => '1rem', ), array( - 'name' => 'Medium', + 'name' => '3', 'slug' => '50', 'size' => '1.5rem', ), array( - 'name' => 'Large', + 'name' => '4', 'slug' => '60', 'size' => '2.25rem', ), array( - 'name' => 'X-Large', + 'name' => '5', 'slug' => '70', 'size' => '3.38rem', ), @@ -1134,27 +1134,27 @@ function data_generate_spacing_scale_fixtures() { ), 'expected_output' => array( array( - 'name' => 'X-Small', + 'name' => '1', 'slug' => '30', 'size' => '0.09rem', ), array( - 'name' => 'Small', + 'name' => '2', 'slug' => '40', 'size' => '0.38rem', ), array( - 'name' => 'Medium', + 'name' => '3', 'slug' => '50', 'size' => '1.5rem', ), array( - 'name' => 'Large', + 'name' => '4', 'slug' => '60', 'size' => '6rem', ), array( - 'name' => 'X-Large', + 'name' => '5', 'slug' => '70', 'size' => '24rem', ), From 9631c914020fecfff7daa2cfb3faa2e244ccee83 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 20 Sep 2022 13:11:31 +1200 Subject: [PATCH 2/2] Put t-short sizing back if more than 7 steps so better labeling in select menu --- .../wordpress-6.1/class-wp-theme-json-6-1.php | 40 +++++++++++++++---- 1 file changed, 32 insertions(+), 8 deletions(-) diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index 4744c36d441ae..5c1639d3d2ce6 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -1249,6 +1249,7 @@ public function set_spacing_sizes() { $unit = '%' === $spacing_scale['unit'] ? '%' : sanitize_title( $spacing_scale['unit'] ); $current_step = $spacing_scale['mediumStep']; $steps_mid_point = round( $spacing_scale['steps'] / 2, 0 ); + $x_small_count = null; $below_sizes = array(); $slug = 40; $remainder = 0; @@ -1268,11 +1269,20 @@ public function set_spacing_sizes() { } $below_sizes[] = array( - 'name' => null, + /* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Small. */ + 'name' => $below_midpoint_count === $steps_mid_point - 1 ? __( 'Small', 'gutenberg' ) : sprintf( __( '%sX-Small', 'gutenberg' ), strval( $x_small_count ) ), 'slug' => (string) $slug, 'size' => round( $current_step, 2 ) . $unit, ); + if ( $below_midpoint_count === $steps_mid_point - 2 ) { + $x_small_count = 2; + } + + if ( $below_midpoint_count < $steps_mid_point - 2 ) { + $x_small_count++; + } + $slug -= 10; } @@ -1284,10 +1294,11 @@ public function set_spacing_sizes() { 'size' => $spacing_scale['mediumStep'] . $unit, ); - $current_step = $spacing_scale['mediumStep']; - $above_sizes = array(); - $slug = 60; - $steps_above = ( $spacing_scale['steps'] - $steps_mid_point ) + $remainder; + $current_step = $spacing_scale['mediumStep']; + $x_large_count = null; + $above_sizes = array(); + $slug = 60; + $steps_above = ( $spacing_scale['steps'] - $steps_mid_point ) + $remainder; for ( $above_midpoint_count = 0; $above_midpoint_count < $steps_above; $above_midpoint_count++ ) { $current_step = '+' === $spacing_scale['operator'] @@ -1295,17 +1306,30 @@ public function set_spacing_sizes() { : ( $spacing_scale['increment'] >= 1 ? $current_step * $spacing_scale['increment'] : $current_step / $spacing_scale['increment'] ); $above_sizes[] = array( - 'name' => null, + /* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Large. */ + 'name' => 0 === $above_midpoint_count ? __( 'Large', 'gutenberg' ) : sprintf( __( '%sX-Large', 'gutenberg' ), strval( $x_large_count ) ), 'slug' => (string) $slug, 'size' => round( $current_step, 2 ) . $unit, ); + if ( 1 === $above_midpoint_count ) { + $x_large_count = 2; + } + + if ( $above_midpoint_count > 1 ) { + $x_large_count++; + } + $slug += 10; } + $spacing_sizes = array_merge( $below_sizes, $above_sizes ); - for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) { - $spacing_sizes[ $spacing_sizes_count ]['name'] = strval( $spacing_sizes_count + 1 ); + // If there are 7 or less steps in the scale revert to numbers for labels instead of t-shirt sizes. + if ( $spacing_scale['steps'] <= 7 ) { + for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) { + $spacing_sizes[ $spacing_sizes_count ]['name'] = strval( $spacing_sizes_count + 1 ); + } } _wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes );