Use the plugin's icon picker modal elsewhere

[STV11C]

Hi, I have a Pro License of FA, and was hoping to utilise the Icon Picker Modal on a custom admin editor metabox text field.

I've worked out how to call the icon picker on a custom button by using the same onclick event:
onclick="__FontAwesomeOfficialPlugin__openIconChooserModal()"
but I can't workout how to add the selected icon's value (shortcode or class) into my custom metabox text field.

Any ideas if this is possible with the WP Plugin?

Cheers!

[mlwilkerson]

Hi, there's no official API for doing this through the WP plugin, per se. So there might be some vulnerability to breaking changes with the following approach...

However, the implementation of that icon chooser modal is just the fa-icon-chooser web component, which does have an API for listening/handling the event that fires when the user selects an icon from the chooser.

There's some example code here that shows it being used. I can't recall off the top of my head whether there's a specific ID for the DOM element that is the chooser, but you could probably just query for the first--and hopefully only--one with querySelector('fa-icon-chooser').

Then add the event listener on the finish event:

el.addEventListener('finish', handleResult)

The event handler callback function will receive an IconChooserResult object.

That IconChooserResult object would have prefix and iconName properties corresponding to the user's selection.

Like:

{ prefix: "fad", iconName: "alien" }

You'd just need to put code in that event handler to do whatever needs doing with that result.

[mlwilkerson]

Also, using that __FontAwesomeOfficialPlugin__openIconChooserModal() function may also be susceptible to breaking changes. It's all underscored like that because it's intentionally not part of the public API of the plugin. Swim at your own risk!

[STV11C]

Hi @mlwilkerson

Thanks for your feedback above, and I've finally gotten around to trying to implement the icon picker again within my custom WordPress theme options.

I took your advice and installed/compiled the fa-icon-chooser web component via NPM as per instructions on page.

I can see the JS has compiled into my main JS bundle and have it loaded on my admin theme options page (outside of the Gutenberg editor).

Questions:

1. Can you please point in the right direction to now launch/open the icon picker via a button (preferably in PHP)? The website instructions say to mount fa-icon-chooser in the DOM, but not sure what this means.
2. With this web component, can I reference the settings from the main FA plugin set by the user (e.g. their Kit ID etc) to determine which icons to show in the picker?

If I have missed the point on this web component and I can't use it within other WP Admin pages, please let me know :)

Thanks again for your help here.

[mlwilkerson]

Hi @STV11C. I'd recommend that you analyze the code for this plugin to see an example. This plugin uses the React wrapper, though that's only for convenience. The event that causes the icon chooser to be opened is specific to how it's wired into the block editor. Again, once you have figured out how to open and close it, you ought to be able to just add an event handler for that finish event that it emits.