diff --git a/js/src/edit-block/components/field-settings.js b/js/src/edit-block/components/field-settings.js index 58be271b7..96b5ea3cf 100644 --- a/js/src/edit-block/components/field-settings.js +++ b/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'. diff --git a/js/src/edit-block/helpers/getNewFieldNumber.js b/js/src/edit-block/helpers/getNewFieldNumber.js index eca2e3073..985d9b592 100644 --- a/js/src/edit-block/helpers/getNewFieldNumber.js +++ b/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; } } diff --git a/js/src/edit-block/hooks/useField.js b/js/src/edit-block/hooks/useField.js index 9997b2512..6c6530a8f 100644 --- a/js/src/edit-block/hooks/useField.js +++ b/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;