Wordpress: wp_enqueue_media causes javascript error from /wp-admin/upload.php?mode=list page

Question

I'm using Wordpress 4.0, I'm calling wp_enqueue_media from different wp-admin pages since the plugin I'm writing makes possible to upload images not only from the wp-admin pages in which Wordpress core already allows it.

I'm calling wp_enqueue_media this way:

function my_admin_load_styles_and_scripts() {
    wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'my_admin_load_styles_and_scripts' );

The problem I'm facing is that this enqueue is causing the following javascript exception when called from the /wp-admin/upload.php?mode=list page:

TypeError: wp.media(...) is undefined

All other pages are working just fine, even /wp-admin/upload.php?mode=grid

Any ideas? Thanks for your help

Answer 1

I was having the same issue... what I did to fix it was to make sure I didn't include wp_enqueue_media() on the upload.php page! Wrap your function in this if statement

if( is_admin() && ! empty ( $_SERVER['PHP_SELF'] ) && 'upload.php' !== basename( $_SERVER['PHP_SELF'] ) ) {
    function my_admin_load_styles_and_scripts() {
        wp_enqueue_media();
    }
    add_action( 'admin_enqueue_scripts', 'my_admin_load_styles_and_scripts' );
}

The "is_admin()" part also assures that this is only run in the admin area, and not the front end. Makes things just a bit cleaner in my opinion.

UPDATE: 1

Here's what I found out through some research. When you check out wp-admin/upload.php, there is a new section for the grid layout. Inside that section, you get the following called (lines 24-26):

wp_enqueue_media();
wp_enqueue_script( 'media-grid' );
wp_enqueue_script( 'media' );

You probably don't get any error here because wp_enqueue_media() has a built-in check to make sure it only gets called once per page (line 2785 in wp-includes/media.php).

Further down the upload.php page, after the grid code you only see the following call (line 192):

wp_enqueue_script( 'media' );

There is no call for wp_enqueue_media() (bug in WordPress? I don't know), but it's this line that is causing the issue. You can update your code to this:

if( is_admin() ) {
    function my_admin_load_styles_and_scripts() {
        $mode = get_user_option( 'media_library_mode', get_current_user_id() ) ? get_user_option( 'media_library_mode', get_current_user_id() ) : 'grid';
        $modes = array( 'grid', 'list' );
        if ( isset( $_GET['mode'] ) && in_array( $_GET['mode'], $modes ) ) {
            $mode = $_GET['mode'];
            update_user_option( get_current_user_id(), 'media_library_mode', $mode );
        }
        if( ! empty ( $_SERVER['PHP_SELF'] ) && 'upload.php' === basename( $_SERVER['PHP_SELF'] ) && 'grid' !== $mode ) {
            wp_dequeue_script( 'media' );
        }
        wp_enqueue_media();
    }
    add_action( 'admin_enqueue_scripts', 'my_admin_load_styles_and_scripts' );
}

And it stops the error...

Explanation: Lines 3-8 are taken directly from wp-admin/upload.php (lines 15-21). They simply will tell you if you are viewing the grid mode, or list mode when you show up on upload.php. This is important because whichever mode you choose, it is saved in the database as an option. The next time you return to the upload page, the query string in the URL is not used, but the option is. So targeting just the query string in the URL is not reliable. On line 9, we have moved the check, since we only want this extenuating code to happen on the upload.php page, and only removing the script when we are in list mode. Line 10 de-registers the script for the page.

However I don't know what else "breaks" on the upload.php list view by removing the media script. And I don't know if it's added back somewhere down the road by using wp_enqueue_media() as I haven't had time to fully look through the function. I did try to add it back after my call to wp_enqueue_media(), but the same error appears. But hopefully this gets you in the right direction.