Media Modal: Can no longer set attachment filters

[Bernhard Reiter]

I have a plugin which modifies the media library modal by removing some of the attachment filters. It does so by getting a handle for the toolbar, and then doing

var filters = toolbar.get( 'filters' );

if ( this.get( 'type' ) == 'image' ) {
	// update all
	filters.filters.all.text = acf.__( 'All images' );

	// remove some filters
	delete filters.filters.audio;
	delete filters.filters.video;
	delete filters.filters.image;
}

etc.

This is no longer working as of [61757] -- filters.filters is now undefined.

The reason for this is that [61757] wrapped the media attachment filters <select> and its <label> in a container <div> for accessibility purposes. However, this changes the return value of toolbar.get('filters') from the AttachmentFilters view instance to the wp.media.View corresponding to the <div>, breaking plugins that rely on this to customize the media library filters.

[audrasjb]

As per today's bug scrub:
@joedolson is this one still on your radar?

This change reverts the modifications to the JS API in the media modal so that filters can be modified, and insteads implements the visible labels using CSS.

This results in a more complex CSS to modify, since the lack of a wrapper complicates the layout, but avoids breaking access to the filters in 3rd party code.

Trac ticket: https://core.trac.wordpress.org/ticket/64948

## Use of AI Tools

None.

Trac ticket: https://core.trac.wordpress.org/ticket/64948

## Use of AI Tools

This looks to be a duplicate of ​https://github.com/WordPress/wordpress-develop/pull/11415; can you indicate how this is different?

[ozgursar]

Browser console before applying patch PR 11415

[ozgursar]

Browser console after applying patch PR 11415

[ozgursar]

Patch Testing Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/11415

Environment

• WordPress: 7.1-alpha-62161-src
• PHP: 8.2.29
• Server: nginx/1.29.4
• Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
• Browser: Chrome 146.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Code Snippets 3.9.5
  • Test Reports 1.2.1

Steps taken

1. Add the following PHP snippet to your active theme's functions.php or via Code Snippets plugin to simulate accessing the filters.

add_action( 'admin_footer', function () {
    if ( ! did_action( 'wp_enqueue_media' ) ) {
        return;
    }
    ?>
    <script>
    jQuery( document ).ready( function ( $ ) {
        if ( ! wp || ! wp.media || ! wp.media.view || ! wp.media.view.AttachmentsBrowser ) {
            return;
        }

        var OrigBrowser = wp.media.view.AttachmentsBrowser;

        wp.media.view.AttachmentsBrowser = OrigBrowser.extend( {
            createToolbar: function () {
                OrigBrowser.prototype.createToolbar.apply( this, arguments );

                var toolbar = this.toolbar;
                var filters = toolbar.get( 'filters' );

                console.log( '[Ticket 64948] toolbar.get("filters"):', filters );
                console.log( '[Ticket 64948] filters.filters:', filters && filters.filters );

                // Simulate what affected plugins do:
                if ( filters && typeof filters.filters !== 'undefined' ) {
                    console.info( '[Ticket 64948] PASS: filters.filters is accessible.' );
                } else {
                    console.error( '[Ticket 64948] FAIL: filters.filters is undefined.' );
                }
            }
        } );
    } );
    </script>
    <?php
} );

2. Navigate to any post/page editor or the Media Library
3. Click Add Media to open the media modal
4. Observe the browser console
5. Confirm that filters.filters is undefined
6. Apply the patch and repeat steps 2-4
7. Observe the browser console again
8. Confirm that toolbar.get("filters") and filters.filters are accessible
9. ✅ Patch is solving the problem.

Expected result

• Plugins that customize media library filters by accessing toolbar.get("filters") should continue to work correctly, and no errors related to filters.filters being undefined should appear in the browser console.

Screenshots/Screencast with results

Before

After

Closing in favor of #11415.

[darshitrajyaguru97]

Patch Testing Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/11415

Environment

• WordPress: 7.1-alpha-62161-src
• PHP: 8.2.29
• Server: nginx/1.29.4
• Database: MySQL
• Browser: Chrome
• OS: Windows
• Theme: Twenty Twenty-Five
• Plugins:
  1. Code Snippets 3.9.5
  2. Test Reports 1.2.1
• MU Plugins: None

Steps to Reproduce (Before Patch)

1. Add the following snippet to functions.php or via Code Snippets:

add_action( 'admin_footer', function () {
    if ( ! did_action( 'wp_enqueue_media' ) ) {
        return;
    }
    ?>
    <script>
    jQuery( document ).ready( function ( $ ) {
        if ( ! wp || ! wp.media || ! wp.media.view || ! wp.media.view.AttachmentsBrowser ) {
            return;
        }

        var OrigBrowser = wp.media.view.AttachmentsBrowser;

        wp.media.view.AttachmentsBrowser = OrigBrowser.extend( {
            createToolbar: function () {
                OrigBrowser.prototype.createToolbar.apply( this, arguments );

                var toolbar = this.toolbar;
                var filters = toolbar.get( 'filters' );

                console.log( '[Ticket 64948] toolbar.get("filters"):', filters );
                console.log( '[Ticket 64948] filters.filters:', filters && filters.filters );

                if ( filters && typeof filters.filters !== 'undefined' ) {
                    console.info( '[Ticket 64948] PASS: filters.filters is accessible.' );
                } else {
                    console.error( '[Ticket 64948] FAIL: filters.filters is undefined.' );
                }
            }
        } );
    } );
    </script>
    <?php
} );

2. Open any post/page editor or Media Library
3. Click "Add Media"
4. Check the browser console

Actual Result (Before Patch)

• toolbar.get('filters') returns an object
• filters.filters is undefined
• Console output:

  FAIL: filters.filters is undefined
  

Steps After Applying Patch

1. Apply the patch from PR #11415
2. Repeat the steps above

Result (After Patch)

• toolbar.get('filters') is accessible
• filters.filters is properly defined
• Console output:

  PASS: filters.filters is accessible
  

Expected Result

Plugins relying on toolbar.get('filters') should be able to access filters.filters without encountering undefined, ensuring backward compatibility for media library customizations.

Conclusion

• ✅ Patch successfully resolves the issue
• ✅ Restores expected behavior for plugin integrations
• ✅ No regressions observed during testing

[jorbin]

​https://github.com/WordPress/wordpress-develop/pull/11415/ has an approval and test reports, so I think this is good to move forward.

I actually changed that intentionally; so that's as intended.

[joedolson]

In 62326:

Media: Restore usage of attachment filters in media modal.

[61757] wrapped the media attachment filters, which changed the return value of toolbar filters from AttachmentFilters to a wp.media.View instance, breaking the API to customize media library filters.

Reverts the shape change in the attachment filter return value and implements CSS based positioning for the visible labels.

Props bernhard-reiter, joedolson, ozgursar, audrasjb, darshitrajyaguru97, jorbin.
Fixes #64948.

[joedolson]

Re-opening for dev review to commit to the 7.0 branch.

[jorbin]

[62326] looks good for backport to the 7.0 branch.

[joedolson]

In 62327:

Media: Restore usage of attachment filters in media modal.

[61757] wrapped the media attachment filters, which changed the return value of toolbar filters from AttachmentFilters to a wp.media.View instance, breaking the API to customize media library filters.

Reverts the shape change in the attachment filter return value and implements CSS based positioning for the visible labels.

Reviewed by jorbin.
Merges [62326] to the 7.0 branch.

Props bernhard-reiter, joedolson, ozgursar, audrasjb, darshitrajyaguru97, jorbin.
Fixes #64948.