Add a custom taxonomy dropdown filter to the WordPress Media Library

media-types-filter.js

(function(){
	/**
	 * Create a new MediaLibraryTaxonomyFilter we later will instantiate
	 */
	var MediaLibraryTaxonomyFilter = wp.media.view.AttachmentFilters.extend({
		id: 'media-attachment-taxonomy-filter',

		createFilters: function() {
			var filters = {};
			// Formats the 'terms' we've included via wp_localize_script()
			_.each( MediaLibraryTaxonomyFilterData.terms || {}, function( value, index ) {
				filters[ index ] = {
					text: value.name,
					props: {
						// Change this: key needs to be the WP_Query var for the taxonomy
						media_types: value.slug,
					}
				};
			});
			filters.all = {
				text:  'All Media Types',
				props: {
					media_types: ''
				},
				priority: 10
			};
			this.filters = filters;
		}
	});
	/**
	 * Extend and override wp.media.view.AttachmentsBrowser to include our new filter
	 */
	var AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
	wp.media.view.AttachmentsBrowser = wp.media.view.AttachmentsBrowser.extend({
		createToolbar: function() {
			// Make sure to load the original toolbar
			AttachmentsBrowser.prototype.createToolbar.call( this );
			this.toolbar.set( 'MediaLibraryTaxonomyFilter', new MediaLibraryTaxonomyFilter({
				controller: this.controller,
				model:      this.collection.props,
				priority: -75
			}).render() );
		}
	});
})()

media-types.php

<?php
// Register Custom Taxonomy
function media_types() {

	$labels = array(
		'name'                       => _x( 'Media Types', 'Taxonomy General Name', 'neolife' ),
		'singular_name'              => _x( 'Media Type', 'Taxonomy Singular Name', 'neolife' ),
		'menu_name'                  => __( 'Types', 'neolife' ),
		'all_items'                  => __( 'All Items', 'neolife' ),
		'parent_item'                => __( 'Parent Item', 'neolife' ),
		'parent_item_colon'          => __( 'Parent Item:', 'neolife' ),
		'new_item_name'              => __( 'New Item Name', 'neolife' ),
		'add_new_item'               => __( 'Add New Item', 'neolife' ),
		'edit_item'                  => __( 'Edit Item', 'neolife' ),
		'update_item'                => __( 'Update Item', 'neolife' ),
		'view_item'                  => __( 'View Item', 'neolife' ),
		'separate_items_with_commas' => __( 'Separate items with commas', 'neolife' ),
		'add_or_remove_items'        => __( 'Add or remove items', 'neolife' ),
		'choose_from_most_used'      => __( 'Choose from the most used', 'neolife' ),
		'popular_items'              => __( 'Popular Items', 'neolife' ),
		'search_items'               => __( 'Search Items', 'neolife' ),
		'not_found'                  => __( 'Not Found', 'neolife' ),
		'no_terms'                   => __( 'No items', 'neolife' ),
		'items_list'                 => __( 'Items list', 'neolife' ),
		'items_list_navigation'      => __( 'Items list navigation', 'neolife' ),
	);
	$args = array(
		'labels'                     => $labels,
		'hierarchical'               => true,
		'public'                     => true,
		'show_ui'                    => true,
		'show_admin_column'          => true,
		'show_in_nav_menus'          => false,
		'show_tagcloud'              => false,
		'rewrite'                    => false,
		'show_in_rest'               => false,
	);
	register_taxonomy( 'media_types', array( 'attachment' ), $args );

}
add_action( 'init', 'media_types', 0 );

add_action( 'wp_enqueue_media', function() {
	wp_enqueue_script( 'media-library-taxonomy-filter', get_stylesheet_directory_uri() . '/assets/js/collection-filter.js', array( 'media-editor', 'media-views' ) );
	wp_localize_script( 'media-library-taxonomy-filter', 'MediaLibraryTaxonomyFilterData', array(
		'terms' => get_terms( 'media_types', array( 'hide_empty' => false ) ),
	) );
	// Overrides code styling to accommodate for a third dropdown filter
	add_action( 'admin_footer', function(){
		?>
		<style>
		.media-modal-content .media-frame select.attachment-filters {
			max-width: -webkit-calc(33% - 12px);
			max-width: calc(33% - 12px);
		}
		</style>
		<?php
	});
});