Adding controls to the font customizer via a plugin

Hi there,

I just tested this. Here's what I did.

Create new JS file: editor.js

function typographyElementGroups( groups ) {
    const newGroups = {};

    newGroups.yourGroupId = 'Your Group Name';

    groups = { ...groups, ...newGroups };

    return groups;
}

function typographyElements( elements ) {
    const newElements = {};

    newElements[ 'your-selector-id' ] = {
        module: 'core',
        group: 'yourGroupId',
        label: 'Your Selector Label',
        placeholders: {},
    };

    newElements[ 'another-selector-id' ] = {
        module: 'core',
        group: 'yourGroupId',
        label: 'Your Second Selector Label',
        placeholders: {},
    };

    elements = { ...elements, ...newElements };

    return elements;
}

wp.hooks.addFilter(
	'generate_typography_element_groups',
	'your-company-name/customizer/add-typography-groups',
	typographyElementGroups
);

wp.hooks.addFilter(
	'generate_typography_elements',
	'your-company-name/customizer/add-typography-elements',
	typographyElements
);

Add the PHP:

add_filter( 'generate_typography_css_selector', function( $selector ) {
    switch ( $selector ) {
        case 'your-selector-id':
            $selector = '.your-css-selector';
            break;

        case 'another-selector-id':
            $selector = '.another-css-selector';
            break;
    }

    return $selector;
} );

add_action( 'customize_controls_enqueue_scripts', function() {
	wp_enqueue_script(
		'my-custom-editor-script',
		plugin_dir_url( __FILE__ ) . 'editor.js',
		array( 'wp-hooks' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'editor.js' ),
		true
	);
} );

And the result: https://www.screencast.com/t/9EACpdyWo4A

Let me know if that helps or not. You'll need to update the URL/path to editor.js depending on your setup.

Thanks for this, Tom! Our Typography panel doesn't look like that, so perhaps that's why it's not working. We don't have the option to configure "Other" or anything from the screenshot you shared.

This is what we see on our end: https://www.loom.com/i/febe6eb7fbaa4f2bbc644a005534d758

Aha! That's the old typography system. I suggest upgrading to the new system: https://docs.generatepress.com/article/switching-to-dynamic-typography/

Oh gosh, that did it. Thanks so much for your patience and help Tom!

Glad I could help! :)