From c5f7f95979163add8c37017490ea6afd25fb8b0d Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Wed, 2 Apr 2014 02:17:39 +0000
Subject: [PATCH] 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                | 29 +++++++-------
 .../js/tinymce/skins/wordpress/wp-content.css | 24 ++++++++++++
 src/wp-includes/media-template.php            | 38 +++++++++++--------
 3 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/src/wp-includes/js/mce-view.js b/src/wp-includes/js/mce-view.js
index 05ff0453e3..7af5873f4a 100644
--- a/src/wp-includes/js/mce-view.js
+++ b/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,27 +267,30 @@ 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;
 				}
 
-				attachments = this.attachments.toJSON();
+				if ( this.attachments.length ) {
+					attachments = this.attachments.toJSON();
 
-				_.each( attachments, function( attachment ) {
-					if ( attachment.sizes.thumbnail ) {
-						attachment.thumbnail = attachment.sizes.thumbnail;
-					} else {
-						attachment.thumbnail = attachment.sizes.full;
-					}
-				} );
+					_.each( attachments, function( attachment ) {
+						if ( attachment.sizes.thumbnail ) {
+							attachment.thumbnail = attachment.sizes.thumbnail;
+						} else {
+							attachment.thumbnail = attachment.sizes.full;
+						}
+					} );
+				}
 
 				options = {
 					attachments: attachments,
diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
index 6151554e5c..4b511dded3 100644
--- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
+++ b/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;
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 1d7536880a..aa2e11f922 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -970,26 +970,32 @@ 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 }}">
-			<# _.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 }}" />
-					</dt>
-					<dd class="wp-caption-text gallery-caption">
-						{{ attachment.caption }}
-					</dd>
-				</dl>
-				<# if ( index % data.columns === data.columns - 1 ) { #>
-					<br style="clear: both;">
-				<# } #>
-
-			<# } ); #>
-		</div>
+		<# 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 }}" />
+						</dt>
+						<dd class="wp-caption-text gallery-caption">
+							{{ attachment.caption }}
+						</dd>
+					</dl>
+					<# 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">