From fa91b9ae28c7c2147fb5bd9315e162f51ad098e7 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 20 Sep 2022 14:13:55 +1200 Subject: [PATCH] Spacing presets: switch to using numbers instead of t-shirt sizes for labels in range control (#44247) --- .../wordpress-6.1/class-wp-theme-json-6-1.php | 49 +++++++++++------- phpunit/class-wp-theme-json-test.php | 50 +++++++++---------- 2 files changed, 56 insertions(+), 43 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..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 @@ -1248,38 +1248,42 @@ 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 ); + $steps_mid_point = round( $spacing_scale['steps'] / 2, 0 ); $x_small_count = null; $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 ) ), + /* 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 ( $x === $steps_mid_point - 2 ) { + if ( $below_midpoint_count === $steps_mid_point - 2 ) { $x_small_count = 2; } - if ( $x < $steps_mid_point - 2 ) { + if ( $below_midpoint_count < $steps_mid_point - 2 ) { $x_small_count++; } - $slug = $slug - 10; + $slug -= 10; } $below_sizes = array_reverse( $below_sizes ); @@ -1296,30 +1300,39 @@ public function set_spacing_sizes() { $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 ) ), + /* 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 === $x ) { + if ( 1 === $above_midpoint_count ) { $x_large_count = 2; } - if ( $x > 1 ) { + if ( $above_midpoint_count > 1 ) { $x_large_count++; } - $slug = $slug + 10; + $slug += 10; + } + + $spacing_sizes = array_merge( $below_sizes, $above_sizes ); + + // 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' ), 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 42146c66e6635..6c450951cb1dd 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', ),