Create custom tab in WordPress 5 media upload

Can someone help me create custom tab in WordPress media library. With WordPress version 4 i used to media_upload_tabs function to build that nice work. But now, in WordPress version 5 the function is not working.

Can someone help me create custom tab in WordPress media library. With WordPress version 4 i used to media_upload_tabs function to build that nice work. But now, in WordPress version 5 the function is not working.

• uploads
• media-library
• block-editor

Share Improve this question edited Apr 19, 2019 at 18:19 RiddleMeThis 3,78788 gold badges2121 silver badges3030 bronze badges asked Apr 19, 2019 at 8:29 Mr.hiepdzMr.hiepdz 3122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The only way I could get this to work in WP 5 was to install the Classic Editor.

Then I could use media_view_settings to add the tab.

add_filter('media_view_settings', 'addMediaTab');

function addMediaTab($settings) {
    $settings['tabs'] = array('mymediatab' => 'My Media Tab');
    return $settings;
}

BUT it appears the new UI doesn't include those sections in Gutenberg, you will end up with something like this if you use the Classic Editor.

You can also do this with JS.

var Library = wp.media.controller.Library;
var oldMediaFrame = wp.media.view.MediaFrame.Post;

wp.media.view.MediaFrame.Post = oldMediaFrame.extend({
    initialize: function () {
        oldMediaFrame.prototype.initialize.apply(this, arguments);
        var options = this.options;
        this.states.add([
            new Library({
                id: 'inserts',
                title: 'My New Tab',
                priority: 20,
                toolbar: 'main-insert',
                filterable: 'all',
                library: wp.media.query(options.library),
                multiple: false,
                editable: false,
                library: wp.media.query(_.defaults({
                    newtab: 'newtab',
                }, options.library)),
                displaySettings: true,
                displayUserSettings: true
            }),
        ]);
    },
});

More Info

Ticket with more info about Media_upload_tabs & WP5

JS Demo Example