Divi Builder - Registering custom field for the settings

divibuilder-field.jsx

## SimpleFontSelect.jsx

```
import React from 'react';

/**
 * SimpleFontSelect field component.
 *
 * This component is used to render warning field in the Visual Builder.
 *
 * @since ??
 *
 * @param {object} props Component props.
 * @param {string} props.name The field name.
 * @param {string} props.value The field value.
 *
 * @returns {ReactElement} SimpleFontSelect field component.
 */
const SimpleFontSelect = (props) => {
    const {
        name,
        value,
        options = [],
    } = props;

    //Generate default font options
    if(! options.length){
        options.push({value: '', label: 'Default'});
        options.push({value: 'Arial', label: 'Arial'});
        options.push({value: 'Verdana', label: 'Verdana'});
        options.push({value: 'Georgia', label: 'Georgia'});
        options.push({value: 'Times New Roman', label: 'Times New Roman'});
    }

    return (
        <div
            id={`et-vb-field-${name}`}
            className="et-vb-field-select-font"
        >
            <select
                name={name}
                value={value}
                onChange={(event) => {
                    if ( props.onChange ) {
                        props.onChange(event.target.value);
                    }
                }}
            >
                {!options.length && (
                    <option value="">No font available</option>
                )}
                {options.map((option) => (
                    <option
                        key={option.value}
                        value={option.value}
                    >
                        {option.label}
                    </option>
                ))}
            </select>

        </div>
    );
};

SimpleFontSelect.defaultProps = {
    value: '',
};

const name = 'test/simple-font-select';

/**
 * Static `fieldName` is required to `<FieldContainer />` can recognize the field that is
 * used inside it without the need to pass prop into it. This is used for copy paste style.
 *
 * @since ??
 * @private
 */
SimpleFontSelect.fieldName = name;

export {
    name,
    SimpleFontSelect,
};
```

## Adding content settings font grpup

```
<FontHeaderGroup
                    title="Footer Heading Text"
                    attrName="footer.decoration.headingFont"
                    defaultGroupAttr={defaultSettingsAttrs?.footer?.decoration?.headingFont?.asMutable({ deep: true }) ?? {}}
                    fields={{
                        h1: {
                            family:{
                                component: {
                                    type: 'field',
                                    name: 'test/simple-font-select',
                                    props: {
                                        options: [
                                            {value: 'JC Made', label: 'JC Made'},
                                            {value: 'Another Font', label: 'Another Font'},
                                        ],
                                    }
                                }
                            }
                        },
                    }}
                />
```

## Registering field and module.


// Plugin main index.jsx

```
// Wait until the WordPress environment is ready
window.vendor.wp.hooks.addFilter(
    'divi.fieldLibrary.fieldComponentMap',  // Hook name
    'test',  // Namespace for your filter
    (fieldComponentMap) => {
        return {
            ...fieldComponentMap,
            'test/simple-font-select': {
                name: 'test/simple-font-select',
                component: SimpleFontSelect,  // Your custom component
            },
        };
    }
);
```

## Registering the module in main index.jsx

```
// Register module.
addAction('divi.moduleLibrary.registerModuleLibraryStore.after', 'd5Tut.simpleQuickModule', () => {
    registerModule(simpleQuickModule.metadata, simpleQuickModule);
});
```