From 7b95dffce541df14b77500ec78e7a28f64b26fb6 Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Tue, 28 May 2024 13:05:44 +0530
Subject: [PATCH] Refactor getNewIndexFromPresets function to improve
 readability.

---
 .../src/components/global-styles/utils.js     | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index a0af73ae319f93..6096b381fb2187 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -12,27 +12,30 @@ export function getVariationClassName( variation ) {
 }
 
 /**
- * Returns a new index based on the presets and slug prefix.
+ * Iterates through the presets array and searches for slugs that start with the specified
+ * slugPrefix followed by a numerical suffix. It identifies the highest numerical suffix found
+ * and returns one greater than the highest found suffix, ensuring that the new index is unique.
  *
- * @param {Array}  presets    The array of presets.
- * @param {string} slugPrefix The prefix for the slug.
+ * @param {Array}  presets    The array of preset objects, each potentially containing a slug property.
+ * @param {string} slugPrefix The prefix to look for in the preset slugs.
  *
- * @return {number} The new index.
+ * @return {number} The next available index for a preset with the specified slug prefix, or 1 if no matching slugs are found.
  */
 export function getNewIndexFromPresets( presets, slugPrefix ) {
 	const nameRegex = new RegExp( `^${ slugPrefix }([\\d]+)$` );
-	return presets.reduce( ( previousValue, currentValue ) => {
-		if ( typeof currentValue?.slug === 'string' ) {
-			const matches = currentValue?.slug.match( nameRegex );
+	const highestPresetValue = presets.reduce( ( currentHighest, preset ) => {
+		if ( typeof preset?.slug === 'string' ) {
+			const matches = preset?.slug.match( nameRegex );
 			if ( matches ) {
 				const id = parseInt( matches[ 1 ], 10 );
-				if ( id >= previousValue ) {
-					return id + 1;
+				if ( id > currentHighest ) {
+					return id;
 				}
 			}
 		}
-		return previousValue;
-	}, 1 );
+		return currentHighest;
+	}, 0 );
+	return highestPresetValue + 1;
 }
 
 function getFontFamilyFromSetting( fontFamilies, setting ) {