Hooks and filters overview

In order for your custom modifiers to show up and work correctly, there are a few things to note:

• Ensure the scripts your filters are defined in have Index as a dependency or listen for when the Index hooks are instantiated
• Define your filters with WordPress’ wp.hooks.addFilter Javascript function
• Provide a label, icon, and permission to handle
• Make sure your onClick code handles both single and multiple items.

Ensuring your modifiers are defined at the right time

WordPress’ javascript hooks and filters work just like add_filter and add_action and must be added at the correct time in order to work. The easiest way to do this is to define your filters in their own .js file and make Index a dependency:

add_action('admin_enqueue_scripts', function() {
	wp_enqueue_script(
		'your-filter-file',
		PATH,
		['ndx-content'],
		VERSION,
		true,
	);
});

Since we’re in the dashboard, we hook into the admin_enqueue_scripts action and enqueue our script. The slug “ndx-content” is the name of the main Index script and can be set as a dependency so that it’s loaded first.

Alternative method to ensure your modifier is defined

If the above solution is not possible for your workflow, you can use a work around (this method is not recommended but life happens):

wp.hooks.addAction(
	"hookAdded",
	"core/i18n",
	fucntion(name, functionName, callback, priority) {
		if(name === `${type}_modifiers` && priority === 10) {
			// Add your filter definition here
		}
	},
	10
)

Please note the following:

• ${type} should be changed to the post type you’re targeting (we’ll cover in the filter definition below)
• If you use this method, you cannot set your own filter priority to 10 as it will cause an infinite loop