Editor tabs and controls

The form editor is a React app, extended through @wordpress/hooks filters named remaily.*. Load your script with remaily_editor_enqueue, which runs only on the editor screen:

add_action( 'remaily_editor_enqueue', function ( $form ) {
    wp_enqueue_script( 'my-crm', MY_URL . 'crm.js', [ 'remaily-editor', 'wp-hooks', 'wp-element' ] );
} );

The editor’s own controls are on window.remailyEditorUI: Field, Text, Textarea, NumberInput, Select, Choice, Radios, Toggle, ChipsControl, CountriesControl, LinesControl, FormatControl, DateControl, ExtensionsControl, Button, Icon and Message. The form’s data is on window.remailyEditor.

A tab of your own

remaily.tabs adds a tab after Advanced. Its component gets the form’s config, its template and update( key, value ) to change a part of the config:

const { Text } = window.remailyEditorUI;

const CrmTab = ( { config, update } ) => (
    <Text label="List" value={ config.crm.list } onChange={ ( list ) => update( 'crm', { ...config.crm, list } ) } />
);

wp.hooks.addFilter( 'remaily.tabs', 'my-crm', ( tabs ) => [ ...tabs, { id: 'crm', label: 'CRM', Component: CrmTab } ] );

The tab’s settings are saved with the form once PHP knows them: give their defaults with remaily_config_defaults and clean them with remaily_config_sanitize.

add_filter( 'remaily_config_defaults', fn( $defaults ) => $defaults + [ 'crm' => [ 'list' => '' ] ] );

add_filter( 'remaily_config_sanitize', fn( $clean, $raw ) => $clean + [
    'crm' => [ 'list' => sanitize_key( $raw['crm']['list'] ?? '' ) ],
], 10, 2 );

Controls in a field’s sidebar

Filter	Gets	Returns
remaily.control	( control, { id, def, value, field, onChange } )	An element for a def.type of your own, such as stars or a color picker, or control unchanged
remaily.fieldControls	( controls, { name, field, type, set } )	The list of extra elements shown under the field’s settings

wp.hooks.addFilter( 'remaily.control', 'my-stars', ( control, { def, value, onChange } ) =>
    def.type === 'stars' ? <MyStars value={ value } onChange={ onChange } /> : control
);