Limit fields in group to 12

js/src/admin/admin.js

@@ -235,6 +235,8 @@
 
 	/*global jQuery:false, frm_admin_js, frmGlobal, ajaxurl, fromDom */
 
+	const MAX_FIELD_GROUP_SIZE = 12;
+
 	const frmAdminJs = frm_admin_js; // eslint-disable-line camelcase
 	const { tag, div, span, a, svg, img } = frmDom;
 	const { onClickPreventDefault } = frmDom.util;
@@ -457,7 +459,7 @@
 		return 'INPUT' === element.nodeName && 'checkbox' === element.type && ! element.checked;
 	}
 
 	/**
 	 * Load a tooltip for a single element.
 	 *
 	 * @since x.x
@@ -2054,14 +2056,14 @@
 
 	function groupCanFitAnotherField( fieldsInRow, $field ) {
 		let fieldId;
-		if ( fieldsInRow.length < 6 ) {
+		if ( fieldsInRow.length < MAX_FIELD_GROUP_SIZE ) {
 			return true;
 		}
-		if ( fieldsInRow.length > 6 ) {
+		if ( fieldsInRow.length > MAX_FIELD_GROUP_SIZE ) {
 			return false;
 		}
 		fieldId = $field.attr( 'data-fid' );
-		// allow 6 if we're not changing field groups.
+		// Allow the maximum number if we're not changing field groups.
 		return 1 === jQuery( fieldsInRow ).filter( '[data-fid="' + fieldId + '"]' ).length;
 	}
 
@@ -2304,7 +2306,7 @@
 
 	function duplicateField() {
 		let $field, fieldId, children, newRowId, fieldOrder;
-		const maxFieldsInGroup = 6;
+		const maxFieldsInGroup = MAX_FIELD_GROUP_SIZE;
 
 		$field = jQuery( this ).closest( 'li.form-field' );
 		newRowId = this.getAttribute( 'frm-target-row-id' );
@@ -4118,7 +4120,10 @@
 		popup.appendChild( wrapper );
 		popup.appendChild( separator() );
 
-		popup.appendChild( getCustomLayoutOption() );
+		if ( sizeOfFieldGroup <= 6 ) {
+			popup.appendChild( getCustomLayoutOption() );
+		}
+
 		popup.appendChild( getBreakIntoDifferentRowsOption() );
 
 		return popup;
@@ -4184,6 +4189,12 @@
 		let wrapper, padding;
 
 		wrapper = getEmptyGridContainer();
+
+		if ( size > 6 ) {
+			wrapper.appendChild( getRowLayoutOption( size, 'even' ) );
+			return wrapper;
+		}
+
 		if ( 5 !== size ) {
 			wrapper.appendChild( getRowLayoutOption( size, 'even' ) );
 		}
@@ -4218,7 +4229,12 @@
 				useClass = 'frm_third';
 				break;
 			default:
-				useClass = size % 2 === 1 ? 'frm_fourth' : 'frm_third';
+				if ( size > 6 ) {
+					// We only show a single option at 6-12, so we use the full width.
+					useClass = 'frm_full';
+				} else {
+					useClass = size % 2 === 1 ? 'frm_fourth' : 'frm_third';
+				}
 				break;
 		}
 
@@ -4266,7 +4282,7 @@
 	}
 
 	/**
-	 * @param {number} size  2-6.
+	 * @param {number} size  2-12.
 	 * @param {string} type  even, middle, left, or right.
 	 * @param {number} index 0-5.
 	 * @return {string} The class name.
@@ -4289,7 +4305,15 @@
 		return 'frm12';
 	}
 
+	/**
+	 * @param {number}           size  2-12.
+	 * @param {number|undefined} index 0-5.
+	 * @return {string} The class name.
+	 */
 	function getEvenClassForSize( size, index ) {
+		if ( size > 6 ) {
+			return 'frm1';
+		}
 		if ( -1 !== [ 2, 3, 4, 6 ].indexOf( size ) ) {
 			return getLayoutClassForSize( 12 / size );
 		}
@@ -4924,7 +4948,7 @@
 				return false;
 			}
 			totalFieldCount += getFieldsInRow( jQuery( fieldGroup ) ).length;
-			if ( totalFieldCount > 6 ) {
+			if ( totalFieldCount > MAX_FIELD_GROUP_SIZE ) {
 				return false;
 			}
 		}

resources/scss/admin/components/form/_form-field.scss

@@ -87,3 +87,8 @@ form .frm_primary_label input {
 #frm_form_editor_container .divider_section_only .frm_primary_label .frm-sub-label {
 	padding: 0;
 }
+
+// Hide the field ID when the field group has over 6 fields.
+#frm-show-fields ul:has(> li:nth-child(7)) .frm-sub-label.frm-field-id {
+	display: none;
+}