Skip to content

Commit

Permalink
Spacing presets: switch to using numbers instead of t-shirt sizes for…
Browse files Browse the repository at this point in the history 
… labels in range control (#44247)
  • Loading branch information
@glendaviesnz @ockham
glendaviesnz authored and ockham committed Sep 26, 2022
1 parent ffb12b7 commit fa91b9a
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 43 deletions.
49 changes: 31 additions & 18 deletions lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand All @@ -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 );
}

/**
Expand Down
50 changes: 25 additions & 25 deletions phpunit/class-wp-theme-json-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -962,7 +962,7 @@ function data_generate_spacing_scale_fixtures() {
),
'expected_output' => array(
array(
'name' => 'Medium',
'name' => '1',
'slug' => '50',
'size' => '4rem',
),
Expand All @@ -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',
),
Expand All @@ -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',
),
Expand All @@ -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',
),
Expand All @@ -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',
),
Expand All @@ -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',
),
Expand All @@ -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',
),
Expand Down

0 comments on commit fa91b9a

Please sign in to comment.