Add search for duplicated-field

js/src/edit-block/components/field-settings.js

@@ -24,7 +24,7 @@ import { NO_FIELD_SELECTED } from '../constants';
  * @typedef {Object} FieldSettingsProps The component props.
  * @property {Object} controls All of the possible controls.
  * @property {onClickDelete} deleteField Deletes this field.
- * @property {onClickDuplicate} duplicateField Deletes this field.
+ * @property {onClickDuplicate} duplicateField Duplicates this field.
  * @property {Object} field The current field.
  * @property {Function} changeFieldSettings Edits a given field's value.
  * @property {Function} setCurrentLocation Sets the current location, like 'editor'.

js/src/edit-block/helpers/getNewFieldNumber.js

@@ -5,17 +5,18 @@
  * the name 'new-field', they have a number after.
  * Like 'new-field', 'new-field-1', 'new-field-2', etc...
  *
- * @param {Object} fields The existing fields.
+ * @param {Object} fields    The existing fields.
+ * @param {string} fieldName The field name.
  * @return {number|null} The new field number as a string, or null.
  */
-const getNewFieldNumber = ( fields ) => {
+const getNewFieldNumber = ( fields, fieldName = 'new-field' ) => {
 	const numberOfFields = Object.values( fields ).length;
-	if ( ! numberOfFields || ! fields.hasOwnProperty( 'new-field' ) ) {
+	if ( ! numberOfFields || ! fields.hasOwnProperty( fieldName ) ) {
 		return null;
 	}
 
 	for ( let i = 1; i <= numberOfFields; i++ ) {
-		if ( ! fields.hasOwnProperty( `new-field-${ i.toString() }` ) ) {
+		if ( ! fields.hasOwnProperty( `${ fieldName }-${ i.toString() }` ) ) {
 			return i;
 		}
 	}

js/src/edit-block/hooks/useField.js

@@ -230,14 +230,17 @@ const useField = () => {
 	const duplicateField = useCallback( ( fieldName ) => {
 		const currentField = getField( fieldName );
 		const { fields = {} } = block;
-		const newFieldNumber = Object.values( fields ).length + 1;
+		const newFieldNumber = getNewFieldNumber( fields, 'duplicated-field' );
+		const newFieldName = newFieldNumber
+			? `duplicated-field-${ newFieldNumber.toString() }`
+			: 'duplicated-field';
 
-		const newFieldName = `duplicated-field-${ newFieldNumber.toString() }`;
+		fields[ newFieldName ] = {
+			...currentField,
+			name: newFieldName,
+			order: Object.values( fields ).length,
+		};
 
-		const newField = { ...currentField };
-		newField.name = newFieldName;
-		newField.order = Object.values( fields ).length;
-		fields[ newFieldName ] = newField;
 		block.fields = fields;
 		fullBlock[ blockNameWithNameSpace ] = block;