fix(gravity-forms): enable live label updates for MC4WP field in form editor

[faisalahammad]

🎯 Summary

Fixes an issue where the "Mailchimp for WordPress" field label in the Gravity Forms editor does not update in real-time when edited. This PR adds a JavaScript hook to the form editor to manually sync label changes to the checkbox text, ensuring a smooth editing experience without modifying the frontend markup structure.

📋 Issue Reference

Fixes #817

🔍 Problem Description

Current Behavior

When editing a form in Gravity Forms, changing the label of the "Mailchimp for WordPress" field does not update the preview in real-time. The change is only reflected after saving the form and refreshing the page.

Expected Behavior

The label should update instantly in the form preview as the user types in the field settings, matching the behavior of native Gravity Forms fields.

Root Cause

The MC4WP_Gravity_Forms_Field class overrides get_field_content() to deliberately omit the standard field label wrapper. This is done because specific checkbox markup is used where the label text is part of the checkbox element itself (<label for="...">).

However, the Gravity Forms editor JavaScript (SetFieldLabel in form_editor.js) expects the standard label structure (.field_selected label.gfield_label) to perform live updates. Since this structure is missing, the live update fails.

✨ Solution Overview

Approach Taken

Instead of modifying the PHP method get_field_content() (which would introduce a duplicate label element—one as the field label and one as the checkbox label), this solution adds a targeted JavaScript hook to the form editor.

We hook into the gform_post_set_field_property action. When the label property of a mailchimp field is updated, we manually update the text of the checkbox label in the editor preview.

Why This Approach

1. Preserves Markup: It maintains the existing frontend output, ensuring no duplicate labels appear (a common issue if we simply reverted to the parent class's get_field_content).
2. Targeted Fix: The fix is confined to the editor experience and does not affect form submission or frontend rendering.
3. Low Risk: Uses a documented Gravity Forms JS action (gform_post_set_field_property).

🔧 Changes Made

Files Modified

• integrations/gravity-forms/class-gravity-forms.php - Added the JS hook to editor_js().

Detailed Changes

1. integrations/gravity-forms/class-gravity-forms.php

Before:

public function editor_js()
{
    ?>
    <script type="text/javascript">
        jQuery(document).on('gform_load_field_settings', function(evt, field) {
            // ... existing settings loading
        });
    </script>
    <?php
}

After:

public function editor_js()
{
    ?>
    <script type="text/javascript">
        jQuery(document).on('gform_load_field_settings', function(evt, field) {
            // ... existing settings loading
        });

        // Sync label changes to checkbox label text in real-time.
        if (window.gform) {
            gform.addAction('gform_post_set_field_property', function(name, field) {
                if (name === 'label' && field.type === 'mailchimp') {
                    jQuery('#field_' + field.id + ' .gfield_checkbox label').text(field.label);
                }
            });
        }
    </script>
    <?php
}

Why This Works:
The gform.addAction registers a callback that fires whenever a field property is set in the editor. We check (1) if the property name is label and (2) if the field type is mailchimp. If both are true, we find the specific label element within that field's checkbox wrapper and update its text content.

🧪 Testing Performed

Test Environment

• WordPress Version: 6.7.1
• Gravity Forms: Active
• Mailchimp for WordPress: Active
• Browser: Chrome (Latest)

Manual Testing

Test Case 1: Editing the Label

Steps:

1. Go to Forms -> New Form (or edit an existing one).
2. Add the "Mailchimp for WordPress" field to the form.
3. Click on the field to open its settings.
4. Type a new value in the Field Label input (e.g., "Join our newsletter!").

Expected Result: The text next to the checkbox in the form preview updates instantly as you type.

Actual Result: ✅ The label updates instantly in the preview.

Screenshot/Evidence:
The label text reflects the input value immediately without a page refresh.

Test Case 2: Frontend Verification

Steps:

1. Save the form and embed it on a page (or use Preview).
2. Inspect the field HTML.

Expected Result: There should be only one label for the checkbox, and no duplicate fieldset legend or external label.

Actual Result: ✅ Verified. The markup remains clean:

<div class="ginput_container ginput_container_checkbox">
    <ul class="gfield_checkbox" id="input_1_4">
        <li class="gchoice_1_4">
            <input ... >
            <label for="choice_1_4" id="label_1_4">Join our newsletter!</label>
        </li>
    </ul>
</div>

📊 Performance Impact

Analysis: Negligible impact.
This change adds a few lines of JavaScript that only execute within the Gravity Forms editor admin screen. It has zero impact on frontend performance or database queries.

🔒 Security Considerations

• Output Escaping: The updated label text is handled via jQuery's .text(), which safely escapes HTML content, preventing XSS if a user enters malicious scripts into the label field.
• Context: Code runs only in the trusted admin editor context.

♿ Accessibility

• ✅ Preserved: The existing accessible markup (label associated with input via for attribute) is maintained. The fix purely addresses the admin UI experience.

⚠️ Breaking Changes

✅ No breaking changes - Fully backward compatible.

Screen recording

Plugin build/zip

mailchimp-for-wp-fix-817.zip

✅ PR Checklist

• Code follows WordPress Coding Standards
• No PHP warnings/errors
• No JavaScript console errors
• Backward compatible
• Tests pass successfully
• Self-reviewed for quality

💬 Questions for Maintainers

None. The implementation uses standard Gravity Forms JS hooks.

[dannyvankooten]

Love it. Thanks @faisalahammad!