Adding controls to the font customizer via a plugin

Hey Drew,

I assume you mean adding your selectors the dynamic typography option?

If so, there are two things you need to do.

First is 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;
} );

Next is the javascript:

import {
	addFilter,
} from '@wordpress/hooks';

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;
}

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

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

The javascript is using @wordpress/scripts, so you'll need a compiler to build the dist file (or use wp.hooks).

Hope this helps!

Thanks so much for this! We're struggling with the JS component -- despite using wp.hooks, it's still not working. Is it at all possible to do the addFilter actions here via PHP instead?

Unfortunately not - it requires javascript.

Are you getting any console errors?

Hey Tom, my dev just went on a holiday break and will be back the week of Jan 9, is it okay to leave this open until then?

Of course, no problem!

Many thanks and have a fun, safe, and relaxing New Year!

Thanks, you too! :)

Hi Tom,

Thanks for letting us keep this open!

Yes, there have been a few console errors, all related to @import.

The first was that we couldn't use the @import because it wasn't a module, which was easy enough to fix by setting the script type to module.

The next was a 404 error that it couldn't find the file at @wordpress/hooks with the notice.

This was fixed by changing it to ../@wordpress/hooks. Now, we're faced with another error (which was also appeared alongside the 404 error initially), which is saying that loading @wordpress/hooks is blocked because of a disallowed MIME type. Folks on Stack Overflow suggest adding .js to the end of the call for the file (e.g. ../@wordpress/hooks.js) but that didn't work.

So, we pivoted to using wp.hooks and haven't gotten any console errors since switching, but the controls still aren't working. I've confirmed that 1) The JS and PHP files are loading, 2) the JS file is loaded with a wp-hooks dependency (and it would throw an error if it weren't). So, I'm not sure what the next steps to get it working would be!

Thanks in advance, Tom!

If you add a console.log('hi'); inside either of the functions, do you see the word hi in your console (once you navigate to and open the typography/font manager)?

That would be the best way to ensure the functions are being filtered in correctly. Then we can debug further :)

No hi in sight...! But, when I look at the sources in the debugger, the JS file is there.

Ok so the javascript isn't being read.

Is the JS added to a custom file? If so, how are you enqueuing it?

It is in a custom file and being enqueued properly -- the JS file appears in the list of files being loaded in the debugging panel. I've tried using both add_action ('wp_enqueue_scripts', 'function_name'); and add_action( 'customize_preview_init', 'function_name' ); and while both load the JS file in the debugger, the fields are still missing.

Reading the JS file is what allowed me to see all the errors with loading @wordpress/hooks in the first place...

Try this instead: add_action( 'customize_controls_enqueue_scripts', 'function_name', 200 );

Still no luck I'm afraid. No errors in the console log either.

I've also deactivated all other plugins to make sure it's not a compatibility issue but that didn't get it working either!