Title: WP_Theme_JSON::compute_spacing_sizes
Published: February 24, 2026

---

# WP_Theme_JSON::compute_spacing_sizes( array $spacing_scale ): array

## In this article

 * [Description](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_spacing_sizes/?output_format=md#description)
 * [Parameters](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_spacing_sizes/?output_format=md#parameters)
 * [Return](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_spacing_sizes/?output_format=md#return)
 * [Source](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_spacing_sizes/?output_format=md#source)
 * [Related](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_spacing_sizes/?output_format=md#related)
 * [Changelog](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_spacing_sizes/?output_format=md#changelog)

[ Back to top](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_spacing_sizes/?output_format=md#wp--skip-link--target)

This function’s access is marked private. This means it is not intended for use 
by plugin or theme developers, only by core. It is listed here for completeness.

Generates a set of spacing sizes by starting with a medium size and applying an 
operator with an increment value to generate the rest of the sizes outward from 
the medium size. The medium slug is ’50’ with the rest of the slugs being 10 apart.
The generated names use t-shirt sizing.

## 󠀁[Description](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_spacing_sizes/?output_format=md#description)󠁿

Example:

    ```php
    $spacing_scale = array(
        'steps'      => 4,
        'mediumStep' => 16,
        'unit'       => 'px',
        'operator'   => '+',
        'increment'  => 2,
    );
    $spacing_sizes = static::compute_spacing_sizes( $spacing_scale );
    // -> array(
    //        array( 'name' => 'Small',   'slug' => '40', 'size' => '14px' ),
    //        array( 'name' => 'Medium',  'slug' => '50', 'size' => '16px' ),
    //        array( 'name' => 'Large',   'slug' => '60', 'size' => '18px' ),
    //        array( 'name' => 'X-Large', 'slug' => '70', 'size' => '20px' ),
    //    )
    ```

## 󠀁[Parameters](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_spacing_sizes/?output_format=md#parameters)󠁿

 `$spacing_scale`arrayrequired

The spacing scale values. All are required.

 * `steps` int
 * The number of steps in the scale. (up to 10 steps are supported.)
 * `mediumStep` float
 * The middle value that gets the slug `'50'`. (For even number of steps, this becomes
   the first middle value.)
 * `unit` string
 * The CSS unit to use for the sizes.
 * `operator` string
 * The mathematical operator to apply to generate the other sizes. Either `'+'` 
   or `'*'`.
 * `increment` float
 * The value used with the operator to generate the other sizes.

## 󠀁[Return](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_spacing_sizes/?output_format=md#return)󠁿

 array The spacing sizes presets or an empty array if some spacing scale values 
are missing or invalid.

## 󠀁[Source](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_spacing_sizes/?output_format=md#source)󠁿

    ```php
    private static function compute_spacing_sizes( $spacing_scale ) {
    	/*
    	 * This condition is intentionally missing some checks on ranges for the values in order to
    	 * keep backwards compatibility with the previous implementation.
    	 */
    	if (
    		! isset( $spacing_scale['steps'] ) ||
    		! is_numeric( $spacing_scale['steps'] ) ||
    		0 === $spacing_scale['steps'] ||
    		! isset( $spacing_scale['mediumStep'] ) ||
    		! is_numeric( $spacing_scale['mediumStep'] ) ||
    		! isset( $spacing_scale['unit'] ) ||
    		! isset( $spacing_scale['operator'] ) ||
    		( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) ||
    		! isset( $spacing_scale['increment'] ) ||
    		! is_numeric( $spacing_scale['increment'] )
    	) {
    		return array();
    	}

    	$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;

    	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 = $below_midpoint_count;
    			break;
    		}

    		$below_sizes[] = array(
    			/* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Small. */
    			'name' => $below_midpoint_count === $steps_mid_point - 1 ? __( 'Small' ) : sprintf( __( '%sX-Small' ), (string) $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;
    	}

    	$below_sizes = array_reverse( $below_sizes );

    	$below_sizes[] = array(
    		'name' => __( 'Medium' ),
    		'slug' => '50',
    		'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;

    	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: Digit to indicate multiple of sizing, eg. 2X-Large. */
    			'name' => 0 === $above_midpoint_count ? __( 'Large' ) : sprintf( __( '%sX-Large' ), (string) $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 = $below_sizes;
    	foreach ( $above_sizes as $above_sizes_item ) {
    		$spacing_sizes[] = $above_sizes_item;
    	}

    	return $spacing_sizes;
    }
    ```

[View all references](https://developer.wordpress.org/reference/files/wp-includes/class-wp-theme-json.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/class-wp-theme-json.php#L4175)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/class-wp-theme-json.php#L4175-L4278)

## 󠀁[Related](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_spacing_sizes/?output_format=md#related)󠁿

| Uses | Description | 
| [sanitize_title()](https://developer.wordpress.org/reference/functions/sanitize_title/)`wp-includes/formatting.php` |

Sanitizes a string into a slug, which can be used in URLs or HTML attributes.

  | 
| [__()](https://developer.wordpress.org/reference/functions/__/)`wp-includes/l10n.php` |

Retrieves the translation of $text.

  |

## 󠀁[Changelog](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_spacing_sizes/?output_format=md#changelog)󠁿

| Version | Description | 
| [6.6.0](https://developer.wordpress.org/reference/since/6.6.0/) | Introduced. |

## User Contributed Notes

You must [log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_theme_json%2Fcompute_spacing_sizes%2F)
before being able to contribute a note or feedback.