diff --git a/src/js/media/views/attachment.js b/src/js/media/views/attachment.js index 4ecda8347b00a..defaf04faad41 100644 --- a/src/js/media/views/attachment.js +++ b/src/js/media/views/attachment.js @@ -18,10 +18,22 @@ Attachment = View.extend(/** @lends wp.media.view.Attachment.prototype */{ template: wp.template('attachment'), attributes: function() { + var title = this.model.get( 'title' ) || wp.i18n.__( 'uploading…' ), + filesize = this.model.get( 'filesizeHumanReadable' ); + + if ( filesize ) { + title = wp.i18n.sprintf( + /* translators: 1: Attachment title, 2: File size. */ + wp.i18n.__( '%1$s, %2$s' ), + title, + filesize + ); + } + return { 'tabIndex': 0, 'role': 'checkbox', - 'aria-label': this.model.get( 'title' ) || wp.i18n.__( 'uploading…' ), + 'aria-label': title, 'aria-checked': false, 'data-id': this.model.get( 'id' ) }; diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 0feac6b178d7f..3adb3c6faf036 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -1141,6 +1141,13 @@ select#media-attachment-date-filters { padding: 5px 10px; } +.wp-core-ui .attachment .attachment-file-size { + display: block; + margin-top: 2px; + font-size: 11px; + font-weight: 400; +} + .wp-core-ui .attachment .thumbnail img { position: absolute; } diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php index bc887bafd1197..f093db898c2e0 100644 --- a/src/wp-includes/media-template.php +++ b/src/wp-includes/media-template.php @@ -622,7 +622,12 @@ function wp_print_media_templates() { <# } #>
-
{{ data.filename }}
+
+ {{ data.filename }} + <# if ( data.filesizeHumanReadable ) { #> + {{ data.filesizeHumanReadable }} + <# } #> +
<# } #>