feat(certificates): required form fields as their own list

CHANGELOG.md

@@ -21,6 +21,7 @@ The format follows [Keep a Changelog] (https://keepachangelog.com/en/1.1.0/).
 - **The compiled `.l10n.php` is `wp i18n make-php`'s shape, byte for byte** (#1721). The compiler writes WP-CLI's `domain` and headers and an integer-like key bare, so a catalogue compiled here, saved from Loco or made by WP-CLI is the same file.
 - **Form fields follow the form's font, and Public Design offers Arial** (#1727). Fields, selects and buttons inherit the font the labels use instead of the browser's; the font choice is the theme's (default), the plugin's system font or Arial, as in Email Signature Generator and Institutional Email.
 - **Required certificate tags have their own Settings tab and protect their fields** (#1734). The list moved from Advanced to a new Certificates tab; the layout and template screens list the configured tags instead of a fixed three. A field a required tag calls for is amber, badged, always required, and cannot be renamed or removed; a form missing one is warned on save.
+- **Required form fields are a list of their own** (#1741). Settings → Certificates keeps the layout tags and, apart, the fields every form needs with label and type (default `name`, `cpf_rf`, `email`; Email stays). New forms start with them, their type is locked, and the editor adds missing ones.
 
 ### Fixed
 

assets/css/ffc-admin-settings.css

@@ -1384,3 +1384,17 @@ html:has(.ffc-settings-back-to-top) {
 .widefat tfoot .ffc-location-new-field {
     padding: 0 var(--ffc-spacing-lg);
 }
+
+/* Settings → Certificates → Required Form Fields (#1741): the inputs fill
+   their cells instead of `.regular-text`'s fixed width, which pushed the
+   Type and Remove columns past the card. */
+.ffc-required-fields-table input[type="text"],
+.ffc-required-fields-table select {
+    width: 100%;
+    max-width: none;
+}
+
+.ffc-required-fields-table td:last-child {
+    width: 1%;
+    white-space: nowrap;
+}

assets/js/ffc-admin-field-builder.js

@@ -336,13 +336,71 @@
         return $row;
     }
 
+    /**
+     * Lock a row the way the server renders a required field (#1741): the
+     * name, the type and the required flag cannot change, and the row
+     * cannot be removed. Only the label stays editable.
+     */
+    function lockRequiredRow($row, field) {
+        var index = String($row.attr('data-index'));
+        var lockId = 'ffc_field_lock_' + index;
+        var $select = $row.find('.ffc-field-type-selector');
+
+        $row.addClass('ffc-field-row-required-tag');
+        $row.find('input[name$="[label]"]').first().val(field.label || field.name);
+        $row.find('input[name$="[name]"]').first().val(field.name).prop('readonly', true).attr('aria-describedby', lockId);
+
+        // A disabled select posts nothing, so the type travels in a hidden input.
+        $select.removeAttr('name').prop('disabled', true).attr('aria-describedby', lockId);
+        $('<input type="hidden">').attr('name', 'ffc_fields[' + index + '][type]').val(field.type).insertBefore($select);
+
+        $row.find('.ffc-field-required').prop('checked', true).prop('disabled', true);
+        $row.find('.ffc-remove-field').prop('disabled', true).attr('aria-describedby', lockId);
+
+        var $badge = $('<span class="ffc-required-tag-badge"></span>').attr('id', lockId);
+        $badge.append('<span class="ffc-icon-lock" aria-hidden="true"></span> ');
+        $badge.append(document.createTextNode(strings().requiredField || 'Required field'));
+        $row.find('.ffc-field-title').after($badge);
+    }
+
+    /**
+     * Add every required field the form lacks, locked, and drop the notice.
+     */
+    function addRequiredFields($button) {
+        var fields;
+        try {
+            fields = JSON.parse(String($button.attr('data-ffc-required-fields') || '[]'));
+        } catch (err) {
+            fields = [];
+        }
+        if (!Array.isArray(fields)) {
+            return;
+        }
+        fields.forEach(function(field) {
+            if (!field || !field.name) {
+                return;
+            }
+            var $row = addFieldToBuilder(field.type || 'text');
+            if ($row) {
+                lockRequiredRow($row, field);
+            }
+        });
+        $button.closest('.ffc-required-fields-missing').remove();
+    }
+
+    $(document).on('click', '.ffc-add-required-fields', function(e) {
+        e.preventDefault();
+        addRequiredFields($(this));
+    });
+
     window.FFC = window.FFC || {};
     window.FFC.Admin = window.FFC.Admin || {};
     window.FFC.Admin.FieldBuilder = {
         init: initFormBuilder,
         addField: addFieldToBuilder,
         applyType: applyType,
-        refreshQuiz: refreshQuiz
+        refreshQuiz: refreshQuiz,
+        addRequiredFields: addRequiredFields
     };
 
     if (FFC && FFC.registerModule) {