diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 6bba2580a8..7c027067d0 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -941,7 +941,6 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
- display: block;
line-height: 19px;
height: 19px;
text-align: left;
@@ -949,6 +948,14 @@
margin: 0 5%;
}
+.attachment .data-hidden {
+ display: none;
+}
+
+.attachment .data-visible {
+ display: block;
+}
+
/**
* Attachments Browser
*/
@@ -2518,13 +2525,22 @@ video#inline-media-node {
line-height: 29px;
}
-.media-grid-view .view-switch {
+.media-grid-view .view-switch,
+.media-grid-field-options {
display: inline-block;
float: none;
margin-top: 13px;
vertical-align: middle;
}
+.media-grid-field-options span {
+ padding-right: 5px;
+}
+
+.media-grid-field-options label {
+ margin-right: 10px;
+}
+
/**
* Position both the frame and the uploader window into the content
* area of the screen.
diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js
index e97a97224b..dfc8cde96a 100644
--- a/src/wp-includes/js/media-grid.js
+++ b/src/wp-includes/js/media-grid.js
@@ -485,4 +485,32 @@
});
+ media.view.GridFieldOptions = media.View.extend({
+ className: 'media-grid-field-options',
+ template: media.template( 'media-grid-field-options' ),
+
+ events: {
+ 'change input': 'toggleFields'
+ },
+
+ toggleFields: function(e) {
+ var $el = $( e.currentTarget ), fields, setting;
+ setting = $el.data( 'setting' );
+ fields = $( '.data-' + setting, '.data-fields' );
+ if ( $el.is( ':checked' ) ) {
+ fields.show();
+ deleteUserSetting( 'hidegrid' + setting );
+ } else {
+ fields.hide();
+ setUserSetting( 'hidegrid' + setting, 1 );
+ }
+
+ if ( $( ':checked', this.$el ).length ) {
+ fields.parent().show();
+ } else {
+ fields.parent().hide();
+ }
+ }
+ });
+
}(jQuery, _, Backbone, wp));
\ No newline at end of file
diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
index 5220fada8a..6bf147c8a5 100644
--- a/src/wp-includes/js/media-views.js
+++ b/src/wp-includes/js/media-views.js
@@ -5551,7 +5551,10 @@
},
createToolbar: function() {
- var filters, FiltersConstructor, screenReaderText;
+ var filters,
+ LibraryViewSwitcher,
+ FiltersConstructor,
+ screenReaderText;
/**
* @member {wp.media.view.Toolbar}
@@ -5566,14 +5569,19 @@
// browser view. Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar );
// which the controller can tap into and add this view?
if ( _.contains( this.controller.options.mode, 'grid' ) ) {
- var libraryViewSwitcherConstructor = media.View.extend({
+ LibraryViewSwitcher = media.View.extend({
className: 'view-switch media-grid-view-switch',
template: media.template( 'media-library-view-switcher')
});
- this.toolbar.set( 'libraryViewSwitcher', new libraryViewSwitcherConstructor({
+ this.toolbar.set( 'libraryViewSwitcher', new LibraryViewSwitcher({
controller: this.controller,
priority: -90
}).render() );
+
+ this.toolbar.set( 'gridFieldOptions', new media.view.GridFieldOptions({
+ controller: this.controller,
+ priority: -50
+ }).render() );
}
filters = this.options.filters;
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index c950af6079..74f0d8f146 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -229,6 +229,25 @@ function wp_print_media_templates() {
+
+