# Custom Spacing Scale for Padding, Margin and Gaps

> Replaces the spacing presets in the editor's padding, margin and block spacing controls with your own scale, so every page uses the same rhythm.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: theme-json, spacing, design-system
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/themejson-spacing-scale/

## Code

```php
// Spacing presets: slug => [name, size].
$wpide_spacing_sizes = array(
    '20' => array( 'XS', '0.5rem' ),
    '30' => array( 'S', '1rem' ),
    '40' => array( 'M', 'clamp(1.25rem, 2vw, 1.75rem)' ),
    '50' => array( 'L', 'clamp(2rem, 4vw, 3rem)' ),
    '60' => array( 'XL', 'clamp(3rem, 6vw, 5rem)' ),
);

add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_spacing_sizes ) {
    $sizes = array();

    foreach ( $wpide_spacing_sizes as $slug => $size ) {
        $sizes[] = array( 'slug' => (string) $slug, 'name' => $size[0], 'size' => $size[1] );
    }

    return $theme_json->update_with( array(
        'version'  => WP_Theme_JSON::LATEST_SCHEMA,
        'settings' => array(
            'spacing' => array(
                'spacingSizes'        => $sizes,
                'defaultSpacingSizes' => false,
            ),
        ),
    ) );
} );
```

## Notes

Sizes can use clamp() for fluid spacing. Keep slugs stable once used, or blocks lose their spacing.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Custom Spacing Scale for Padding, Margin and Gaps" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/