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.
Opens WPIDE on
Code
// 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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.