Issue with adding fields to a custom divi module that is extending the ET_Builder_Module. Fields are bugged out in the Divi Editor

Question

I have been developing custom themes/plugins/modules for Divi for about a year now, and am trying to build a fairly simple module that allows a user to select various options related to displaying background images/colors on a set of cards. Divi development for me has been a nightmare because the documentation for developers is almost non-existent, but I can usually find a way to make things work. I am at my wits' end with what should be a fairly straightforward module. In my get_fields() method I have introduced the following Divi fields based on a list I found on this thread that I usually go by (seriously thank all the people involved in this thread it has been my lifeline).

Here is my get_fields() method:

public function get_fields()
    {
        return array(
            'use_featured_images' => array(
                'label'           => esc_html__( 'Use Featured Images?', 'foo_translation' ),
                'type'            => 'yes_no_button',
                'options'           => array(
                    'no' => esc_html__( 'No', 'foo_translation' ),
                    'yes'  => esc_html__( 'Yes', 'foo_translation' ),
                ),
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Would you like to use the featured images in the background of the category cards.', 'foo_translation' ),
                'toggle_slug'     => 'main_content',
            ),
            'use_background_color' => array(
                'label'           => esc_html__( 'Use a background color overlay?', 'foo_translation' ),
                'type'            => 'yes_no_button',
                'options'           => array(
                    'no' => esc_html__( 'No', 'foo_translation' ),
                    'yes'  => esc_html__( 'Yes', 'foo_translation' ),
                ),
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Would you like to add a background color to the background of the category cards. (If also using Featured Images, the background color with overlay on top of the Featured Image.)', 'foo_translation' ),
                'toggle_slug'     => 'main_content',
            ),
            'background_color' => array(
                'label'           => esc_html__( 'Background Color', 'foo_translation' ),
                'type'            => 'color',
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Choose the background color', 'foo_translation' ),
                'toggle_slug'     => 'main_content',
            ),
            'use_gradient' => array(
                'label'           => esc_html__( 'Use a gradient for the background color?', 'foo_translation' ),
                'type'            => 'yes_no_button',
                'options'           => array(
                    'no' => esc_html__( 'No', 'foo_translation' ),
                    'yes'  => esc_html__( 'Yes', 'foo_translation' ),
                ),
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Choose whether to include a gradient for the background color', 'foo_translation' ),
                'toggle_slug'     => 'main_content',
            ),
            'gradient_type' => array(
                'label'           => esc_html__( 'Gradient Selection', 'foo_translation' ),
                'type'            => 'select',
                'options'         => array(
                    'linear' => esc_html__( 'Linear', 'foo_translation' ),
                    'radial'  => esc_html__( 'Radial', 'foo_translation' ),
                ),
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Select a gradient to use', 'foo_translation' ),
                'toggle_slug'     => 'main_content',
            ),
            'secondary_background_color' => array(
                'label'           => esc_html__( 'Background Color 2', 'foo_translation' ),
                'type'            => 'color',
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Choose the second background color for the gradient', 'foo_translation' ),
                'toggle_slug'     => 'main_content',
            ),
        );
    }

Now I want to eventually add some setting visibility parameters, but I can't even get the fields themselves to display properly. Here is an image of what the module settings end up looking like in the editor:

If I remove all the other fields and only add a single field it will display improperly as well:

If I look at the markup, the labels for the button aren't even populating:

Outside of the get_fields() method the rest of the module is very simple, I haven't even added any markup to the render() function outside of an tag. I'm just wondering if anyone with more experience developing with Divi has any more insight into what could be happening. Here is the entire module if it helps:

<?php

class CategoryGrid extends ET_Builder_Module {

    public $slug       = 'featured_category_grid';
    // public $vb_support = 'on';
    // public $vb_support = 'partial';
    public $vb_support = 'off';


    public function init() {
        $this->name = esc_html__( 'Featured Category Grid', 'foo_translation' );

        $this->settings_modal_toggles = array(
            'general' => array(
                'toggles' => array(
                    'main_content' => esc_html__( 'Main Options', 'foo_translation' ),
                ),
            ),
        );
    }

    public function get_fields()
    {
        return array(
            'use_featured_images' => array(
                'label'           => esc_html__( 'Use Featured Images?', 'foo_translation' ),
                'type'            => 'yes_no_button',
                'options'           => array(
                    'no' => esc_html__( 'No', 'foo_translation' ),
                    'yes'  => esc_html__( 'Yes', 'foo_translation' ),
                ),
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Would you like to use the featured images in the background of the category cards.', 'foo_translation' ),
                'toggle_slug'     => 'main_content',
            ),
            'use_background_color' => array(
                'label'           => esc_html__( 'Use a background color overlay?', 'foo_translation' ),
                'type'            => 'yes_no_button',
                'options'           => array(
                    'no' => esc_html__( 'No', 'foo_translation' ),
                    'yes'  => esc_html__( 'Yes', 'foo_translation' ),
                ),
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Would you like to add a background color to the background of the category cards. (If also using Featured Images, the background color with overlay on top of the Featured Image.)', 'foo_translation' ),
                'toggle_slug'     => 'main_content',
            ),
            'background_color' => array(
                'label'           => esc_html__( 'Background Color', 'foo_translation' ),
                'type'            => 'color',
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Choose the background color', 'foo_translation' ),
                'toggle_slug'     => 'main_content',
            ),
            'use_gradient' => array(
                'label'           => esc_html__( 'Use a gradient for the background color?', 'foo_translation' ),
                'type'            => 'yes_no_button',
                'options'           => array(
                    'no' => esc_html__( 'No', 'foo_translation' ),
                    'yes'  => esc_html__( 'Yes', 'foo_translation' ),
                ),
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Choose whether to include a gradient for the background color', 'foo_translation' ),
                'toggle_slug'     => 'main_content',
            ),
            'gradient_type' => array(
                'label'           => esc_html__( 'Gradient Selection', 'foo_translation' ),
                'type'            => 'select',
                'options'         => array(
                    'linear' => esc_html__( 'Linear', 'foo_translation' ),
                    'radial'  => esc_html__( 'Radial', 'foo_translation' ),
                ),
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Select a gradient to use', 'foo_translation' ),
                'toggle_slug'     => 'main_content',
            ),
            'secondary_background_color' => array(
                'label'           => esc_html__( 'Background Color 2', 'foo_translation' ),
                'type'            => 'color',
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Choose the second background color for the gradient', 'foo_translation' ),
                'toggle_slug'     => 'main_content',
            ),
        );
    }

    public function render( $attrs, $content = null, $render_slug ) {
        return '<h1>Category Grid</h1>';
    }
}

new CategoryGrid;

Answer 1

Okay so I ended up figuring out what the issue with my code was. There ended up being a couple issues with the way I had my fields set up:

So first of all the yes_no_button field type HAS to have the value for the options equal to on and off. After using the ACF plugin a lot lately for creating gutenberg blocks and being able to assign both the value and the label I had made a bad assumption in thinking I would be able to do the same with Divi's field. So Divi's yes_no_button field can have whatever for the label but the value for the options themselves must be on/off. SO that means I changed my field from:

'use_background_color' => array(
            'label'           => esc_html__( 'Use a background color overlay?', 'foo_translation' ),
            'type'            => 'yes_no_button',
            'options'           => array(
                'yes' => esc_html__( 'Yes', 'foo_translation' ),
                'no'  => esc_html__( 'No', 'foo_translation' ),
            ),
            'option_category' => 'basic_option',
            'description'     => esc_html__( 'Would you like to add a background color to the background of the category cards. (If also using Featured Images, the background color with overlay on top of the Featured Image.)', 'foo_translation' ),
            'toggle_slug'     => 'main_content',
        ),

to:

'use_background_color' => array(
            'label'           => esc_html__( 'Use a background color overlay?', 'foo_translation' ),
            'type'            => 'yes_no_button',
            'options'           => array(
                'on' => esc_html__( 'Yes', 'foo_translation' ), //value changed to 'on'
                'off'  => esc_html__( 'No', 'foo_translation' ), //value changed to 'off'
            ),
            'option_category' => 'basic_option',
            'description'     => esc_html__( 'Would you like to add a background color to the background of the category cards. (If also using Featured Images, the background color with overlay on top of the Featured Image.)', 'foo_translation' ),
            'toggle_slug'     => 'main_content',
        ),

Unfortuantely after this fix, even though my yes/no buttons were now working correctly, my first color field was still broken. But then I noticed the hint for that field was a Divi-generated hint and not the custom hint I had added for the description parameter. This led me to believe there was some sort of naming overlap with the slug I had chosen for the field (background_color). So after changing the background_color field name to primary_background_color:

'primary_background_color' => array(
            'label'           => esc_html__( 'Background Color', 'foo_translation' ),
            'type'            => 'color-alpha',
            'option_category' => 'basic_option',
            'description'     => esc_html__( 'Choose the background color', 'foo_translation' ),
            'toggle_slug'     => 'main_content',
        ),

everything now works as expected! So if anyone stumbles across this I can't stress enough taking a look at this list that was created showcasing all of divi's fields and their options and paying attention better than I did to the way the fields are set up and maybe choose more specific field names!