Gallery preview: add a "No items found" state which is displayed when rendering the gallery wpview and no attachments are found. Props gcorne, fixes #27558

git-svn-id: https://develop.svn.wordpress.org/trunk@27899 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/js/mce-view.js

@@ -26,7 +26,7 @@ window.wp = window.wp || {};
 
 	_.extend( wp.mce.View.prototype, {
 		initialize: function() {},
-		html: function() {},
+		getHtml: function() {},
 		render: function() {
 			var html = this.getHtml();
 			// Search all tinymce editor instances and update the placeholders
@@ -267,18 +267,20 @@ window.wp = window.wp || {};
 
 			fetch: function() {
 				this.attachments = wp.media.gallery.attachments( this.shortcode, this.postID );
-				this.attachments.more().done( _.bind( this.render, this ) );
+				this.dfd = this.attachments.more().done( _.bind( this.render, this ) );
 			},
 
 			getHtml: function() {
 				var attrs = this.shortcode.attrs.named,
-					options,
-					attachments;
+					attachments = false,
+					options;
 
-				if ( ! this.attachments.length ) {
+				// Don't render errors while still fetching attachments
+				if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) {
 					return;
 				}
 
+				if ( this.attachments.length ) {
 					attachments = this.attachments.toJSON();
 
 					_.each( attachments, function( attachment ) {
@@ -288,6 +290,7 @@ window.wp = window.wp || {};
 							attachment.thumbnail = attachment.sizes.full;
 						}
 					} );
+				}
 
 				options = {
 					attachments: attachments,

src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -328,6 +328,30 @@ audio {
 	overflow-x: hidden;
 }
 
+.gallery-error {
+	border: 1px solid #dedede;
+	padding: 20px 0;
+	margin: 0;
+}
+
+.selected .gallery-error {
+	border-color: transparent;
+}
+
+.gallery-error .dashicons {
+	display: block;
+	margin: 0 auto;
+	width: 32px;
+	height: 32px;
+	font-size: 32px;
+}
+
+.gallery-error p {
+	margin: 0;
+	text-align: center;
+	font-family: 'Open Sans', sans-serif;
+}
+
 .gallery .gallery-item {
 	float: left;
 	margin: 0;

src/wp-includes/media-template.php

@@ -970,15 +970,17 @@ function wp_print_media_templates() {
 			</div>
 		</div>
 	</script>
+
 	<script type="text/html" id="tmpl-editor-gallery">
 		<div class="toolbar">
 			<div class="dashicons dashicons-edit edit"></div><div class="dashicons dashicons-no-alt remove"></div>
 		</div>
-		<div class="gallery gallery-columns-{{ data.columns }}">
+		<# if ( data.attachments ) { #>
+			<div class="gallery gallery-columns-{{{ data.columns }}}">
 				<# _.each( data.attachments, function( attachment, index ) { #>
 					<dl class="gallery-item">
 						<dt class="gallery-icon">
-						<img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" />
+							<img src="{{{ attachment.thumbnail.url }}}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" />
 						</dt>
 						<dd class="wp-caption-text gallery-caption">
 							{{ attachment.caption }}
@@ -987,9 +989,13 @@ function wp_print_media_templates() {
 					<# if ( index % data.columns === data.columns - 1 ) { #>
 						<br style="clear: both;">
 					<# } #>
-
 				<# } ); #>
 			</div>
+		<# } else { #>
+			<div class="gallery-error">
+				<div class="dashicons dashicons-format-gallery"></div><p><?php _e( 'No items found.' ); ?></p>
+			</div>
+		<# } #>
 	</script>
 
 	<script type="text/html" id="tmpl-editor-audio">