Backport spacing presets

src/wp-includes/block-editor.php

@@ -488,7 +488,7 @@ function get_block_editor_settings( array $custom_settings, $block_editor_contex
 		unset( $editor_settings['__experimentalFeatures']['spacing']['padding'] );
 	}
 	if ( isset( $editor_settings['__experimentalFeatures']['spacing']['customSpacingSize'] ) ) {
-		$editor_settings['disableCustomSpacingSizes'] = ! $editor_ettings['__experimentalFeatures']['spacing']['customSpacingSize'];
+		$editor_settings['disableCustomSpacingSizes'] = ! $editor_settings['__experimentalFeatures']['spacing']['customSpacingSize'];
 		unset( $editor_settings['__experimentalFeatures']['spacing']['customSpacingSize'] );
 	}
 

src/wp-includes/class-wp-theme-json-resolver.php

@@ -418,7 +418,7 @@ public static function get_user_data() {
 	 * @since 5.8.0
 	 * @since 5.9.0 Added user data, removed the `$settings` parameter,
 	 *              added the `$origin` parameter.
-	 * @since 6.1.0 Added block data.
+	 * @since 6.1.0 Added block data and generation of spacingSizes array.
 	 *
 	 * @param string $origin Optional. To what level should we merge data.
 	 *                       Valid values are 'theme' or 'custom'. Default 'custom'.
@@ -438,6 +438,9 @@ public static function get_merged_data( $origin = 'custom' ) {
 			$result->merge( static::get_user_data() );
 		}
 
+		// Generate the default spacingSizes array based on the merged spacingScale settings.
+		$result->set_spacing_sizes();
+
 		return $result;
 	}
 

src/wp-includes/class-wp-theme-json.php

@@ -164,6 +164,24 @@ class WP_Theme_JSON {
 			'classes'           => array( '.has-$slug-font-family' => 'font-family' ),
 			'properties'        => array( 'font-family' ),
 		),
+		array(
+			'path'              => array( 'spacing', 'spacingSizes' ),
+			'prevent_override'  => false,
+			'use_default_names' => true,
+			'value_key'         => 'size',
+			'css_vars'          => '--wp--preset--spacing--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'padding', 'margin' ),
+		),
+		array(
+			'path'              => array( 'spacing', 'spacingScale' ),
+			'prevent_override'  => false,
+			'use_default_names' => true,
+			'value_key'         => 'size',
+			'css_vars'          => '--wp--preset--spacing--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'padding', 'margin' ),
+		),
 	);
 
 	/**
@@ -307,10 +325,13 @@ class WP_Theme_JSON {
 			'wideSize'    => null,
 		),
 		'spacing'                       => array(
-			'blockGap' => null,
-			'margin'   => null,
-			'padding'  => null,
-			'units'    => null,
+			'customSpacingSize' => null,
+			'spacingSizes'      => null,
+			'spacingScale'      => null,
+			'blockGap'          => null,
+			'margin'            => null,
+			'padding'           => null,
+			'units'             => null,
 		),
 		'typography'                    => array(
 			'customFontSize' => null,
@@ -2886,4 +2907,109 @@ public function get_data() {
 		return $output;
 	}
 
+	/**
+	 * Sets the spacingSizes array based on the spacingScale values from theme.json.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @return void
+	 */
+	public function set_spacing_sizes() {
+		$spacing_scale = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'spacingScale' ), array() );
+
+		if ( ! is_numeric( $spacing_scale['steps'] )
+			|| ! isset( $spacing_scale['mediumStep'] )
+			|| ! isset( $spacing_scale['unit'] )
+			|| ! isset( $spacing_scale['operator'] )
+			|| ! isset( $spacing_scale['increment'] )
+			|| ! isset( $spacing_scale['steps'] )
+			|| ! is_numeric( $spacing_scale['increment'] )
+			|| ! is_numeric( $spacing_scale['mediumStep'] )
+			|| ( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) ) {
+			if ( ! empty( $spacing_scale ) ) {
+				trigger_error( __( 'Some of the theme.json settings.spacing.spacingScale values are invalid', 'gutenberg' ), E_USER_NOTICE );
+			}
+			return null;
+		}
+
+		// If theme authors want to prevent the generation of the core spacing scale they can set their theme.json spacingScale.steps to 0.
+		if ( 0 === $spacing_scale['steps'] ) {
+			return null;
+		}
+
+		$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 ( $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'] );
+
+			if ( $current_step <= 0 ) {
+				$remainder = $x;
+				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 ) ),
+				'slug' => (string) $slug,
+				'size' => round( $current_step, 2 ) . $unit,
+			);
+
+			if ( $x === $steps_mid_point - 2 ) {
+				$x_small_count = 2;
+			}
+
+			if ( $x < $steps_mid_point - 2 ) {
+				$x_small_count++;
+			}
+
+			$slug = $slug - 10;
+		}
+
+		$below_sizes = array_reverse( $below_sizes );
+
+		$below_sizes[] = array(
+			'name' => __( 'Medium', 'gutenberg' ),
+			'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 ( $x = 0; $x < $steps_above; $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'] );
+
+			$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 ) ),
+				'slug' => (string) $slug,
+				'size' => round( $current_step, 2 ) . $unit,
+			);
+
+			if ( 1 === $x ) {
+				$x_large_count = 2;
+			}
+
+			if ( $x > 1 ) {
+				$x_large_count++;
+			}
+
+			$slug = $slug + 10;
+		}
+
+		_wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), array_merge( $below_sizes, $above_sizes ) );
+	}
 }

src/wp-includes/theme-i18n.json

@@ -30,6 +30,13 @@
 					}
 				]
 		},
+		"spacing": {
+			"spacingSizes": [
+				{
+					"name": "Space size name"
+				}
+			]
+		},
 		"blocks": {
 			"*": {
 				"typography": {
@@ -55,6 +62,13 @@
 							"name": "Gradient name"
 						}
 					]
+				},
+				"spacing": {
+					"spacingSizes": [
+						{
+							"name": "Space size name"
+						}
+					]
 				}
 			}
 		}