Fix UI order for theme.json spacing sizes (WordPress#62199)

Co-authored-by: ajlende <[email protected]> Co-authored-by: talldan <[email protected]> Co-authored-by: bgardner <[email protected]> Co-authored-by: ndiego <[email protected]>
patil-vipul · Jun 17, 2024 · a6dc8e8 · a6dc8e8
1 parent 027093d
commit a6dc8e8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/backport-changelog/6.6/6616.md b/backport-changelog/6.6/6616.md
@@ -3,4 +3,5 @@ https://github.com/WordPress/wordpress-develop/pull/6616
 * https://github.com/WordPress/gutenberg/pull/58409
 * https://github.com/WordPress/gutenberg/pull/61328
 * https://github.com/WordPress/gutenberg/pull/61842
+* https://github.com/WordPress/gutenberg/pull/62199
 * https://github.com/WordPress/gutenberg/pull/62252
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -3859,13 +3859,18 @@ public function set_spacing_sizes() {
 	 * @return array The merged set of spacing sizes.
 	 */
 	private static function merge_spacing_sizes( $base, $incoming ) {
+		// Preserve the order if there are no base (spacingScale) values.
+		if ( empty( $base ) ) {
+			return $incoming;
+		}
 		$merged = array();
 		foreach ( $base as $item ) {
 			$merged[ $item['slug'] ] = $item;
 		}
 		foreach ( $incoming as $item ) {
 			$merged[ $item['slug'] ] = $item;
 		}
+		ksort( $merged, SORT_NUMERIC );
 		return array_values( $merged );
 	}
 

diff --git a/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js b/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js
@@ -42,7 +42,19 @@ export default function useSpacingSizes() {
 			...customSizes,
 			...themeSizes,
 			...defaultSizes,
-		].sort( ( a, b ) => compare( a.slug, b.slug ) );
+		];
+
+		// Only sort if more than one origin has presets defined in order to
+		// preserve order for themes that don't include default presets and
+		// want a custom order.
+		if (
+			( customSizes.length && 1 ) +
+				( themeSizes.length && 1 ) +
+				( defaultSizes.length && 1 ) >
+			1
+		) {
+			sizes.sort( ( a, b ) => compare( a.slug, b.slug ) );
+		}
 
 		return sizes.length > RANGE_CONTROL_MAX_SIZE
 			? [
@@ -53,8 +65,6 @@ export default function useSpacingSizes() {
 					},
 					...sizes,
 			  ]
-			: // See https://github.com/WordPress/gutenberg/pull/44247 for reasoning
-			  // to use the index as the name in the range control.
-			  sizes.map( ( { slug, size }, i ) => ( { name: i, slug, size } ) );
+			: sizes;
 	}, [ customSizes, themeSizes, defaultSizes ] );
 }