Administration: Add a "Drag boxes here" message to empty dashboard meta boxes so it's clear to users that it's possible to drag meta boxes into empty spaces.

Props xavortm
Fixes #26399

Built from https://develop.svn.wordpress.org/trunk@36295


git-svn-id: http://core.svn.wordpress.org/trunk@36262 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -1843,6 +1843,23 @@ html.wp-toolbar {
 .metabox-holder .postbox-container .empty-container {
 	border: 3px dashed #b4b9be;
 	height: 250px;
+	position: relative;
+}
+
+.metabox-holder .postbox-container .empty-container:after {
+	content: attr(data-emptystring);
+	margin: auto;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 1em;
+	width: 200px;
+	text-align: center;
+	color: #ccc;
+	font-size:18px;
+	display: none;
 }
 
 .metabox-holder.columns-1 .postbox-container .empty-container,

wp-admin/css/common.css

@@ -1843,6 +1843,23 @@ html.wp-toolbar {
 .metabox-holder .postbox-container .empty-container {
 	border: 3px dashed #b4b9be;
 	height: 250px;
+	position: relative;
+}
+
+.metabox-holder .postbox-container .empty-container:after {
+	content: attr(data-emptystring);
+	margin: auto;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	height: 1em;
+	width: 200px;
+	text-align: center;
+	color: #ccc;
+	font-size:18px;
+	display: none;
 }
 
 .metabox-holder.columns-1 .postbox-container .empty-container,

wp-admin/css/dashboard-rtl.css

@@ -991,6 +991,11 @@ a.rsswidget {
 		min-height: 0;
 	}
 
+	#dashboard-widgets #postbox-container-3 .empty-container:after, 
+	#dashboard-widgets #postbox-container-4 .empty-container:after { 
+		display: none; 
+	}
+
 	#wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container {
 		width: 100%;
 	}
@@ -1011,6 +1016,10 @@ a.rsswidget {
 	.columns-prefs .columns-prefs-4 {
 		display: none;
 	}
+
+	.metabox-holder .postbox-container .empty-container:after {
+		display: block;
+	}
 }
 
 /* three columns on the dash */
@@ -1033,6 +1042,14 @@ a.rsswidget {
 		height: 0;
 		min-height: 0;
 	}
+
+	#dashboard-widgets #postbox-container-4 .empty-container:after {
+		display: none;
+	}
+
+	.metabox-holder .postbox-container .empty-container:after {
+		display: block;
+	}
 }
 
 @media screen and (max-width: 870px) {

wp-admin/css/dashboard.css

@@ -991,6 +991,11 @@ a.rsswidget {
 		min-height: 0;
 	}
 
+	#dashboard-widgets #postbox-container-3 .empty-container:after, 
+	#dashboard-widgets #postbox-container-4 .empty-container:after { 
+		display: none; 
+	}
+
 	#wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container {
 		width: 100%;
 	}
@@ -1011,6 +1016,10 @@ a.rsswidget {
 	.columns-prefs .columns-prefs-4 {
 		display: none;
 	}
+
+	.metabox-holder .postbox-container .empty-container:after {
+		display: block;
+	}
 }
 
 /* three columns on the dash */
@@ -1033,6 +1042,14 @@ a.rsswidget {
 		height: 0;
 		min-height: 0;
 	}
+
+	#dashboard-widgets #postbox-container-4 .empty-container:after {
+		display: none;
+	}
+
+	.metabox-holder .postbox-container .empty-container:after {
+		display: block;
+	}
 }
 
 @media screen and (max-width: 870px) {

wp-admin/js/postbox.js

@@ -197,10 +197,13 @@ var postboxes;
 			$( '#dashboard-widgets .meta-box-sortables:visible' ).each( function() {
 				var t = $(this);
 
-				if ( visible == 1 || t.children('.postbox:visible').length )
+				if ( visible == 1 || t.children('.postbox:visible').length ) {
 					t.removeClass('empty-container');
-				else
+				}
+				else {
 					t.addClass('empty-container');
+					t.attr('data-emptyString', postBoxL10n.postBoxEmptyString);
+				}
 			});
 
 			if ( side.length ) {

wp-admin/js/postbox.min.js

@@ -1 +1 @@
-var postboxes;!function(a){var b=a(document);postboxes={handle_click:function(){var c,d=a(this),e=d.parent(".postbox"),f=e.attr("id");"dashboard_browser_nag"!==f&&(e.toggleClass("closed"),c=!e.hasClass("closed"),d.hasClass("handlediv")?d.attr("aria-expanded",c):d.closest(".postbox").find("button.handlediv").attr("aria-expanded",c),"press-this"!==postboxes.page&&postboxes.save_state(postboxes.page),f&&(!e.hasClass("closed")&&a.isFunction(postboxes.pbshow)?postboxes.pbshow(f):e.hasClass("closed")&&a.isFunction(postboxes.pbhide)&&postboxes.pbhide(f)),b.trigger("postbox-toggled",e))},add_postbox_toggles:function(c,d){var e=a(".postbox .hndle, .postbox .handlediv");this.page=c,this.init(c,d),e.on("click.postboxes",this.handle_click),a(".postbox .hndle a").click(function(a){a.stopPropagation()}),a(".postbox a.dismiss").on("click.postboxes",function(b){var c=a(this).parents(".postbox").attr("id")+"-hide";b.preventDefault(),a("#"+c).prop("checked",!1).triggerHandler("click")}),a(".hide-postbox-tog").bind("click.postboxes",function(){var d=a(this),e=d.val(),f=a("#"+e);d.prop("checked")?(f.show(),a.isFunction(postboxes.pbshow)&&postboxes.pbshow(e)):(f.hide(),a.isFunction(postboxes.pbhide)&&postboxes.pbhide(e)),postboxes.save_state(c),postboxes._mark_area(),b.trigger("postbox-toggled",f)}),a('.columns-prefs input[type="radio"]').bind("click.postboxes",function(){var b=parseInt(a(this).val(),10);b&&(postboxes._pb_edit(b),postboxes.save_order(c))})},init:function(b,c){var d=a(document.body).hasClass("mobile"),e=a(".postbox .handlediv");a.extend(this,c||{}),a("#wpbody-content").css("overflow","hidden"),a(".meta-box-sortables").sortable({placeholder:"sortable-placeholder",connectWith:".meta-box-sortables",items:".postbox",handle:".hndle",cursor:"move",delay:d?200:0,distance:2,tolerance:"pointer",forcePlaceholderSize:!0,helper:function(a,b){return b.clone().find(":input").attr("name",function(a,b){return"sort_"+parseInt(1e5*Math.random(),10).toString()+"_"+b}).end()},opacity:.65,stop:function(){var c=a(this);return c.find("#dashboard_browser_nag").is(":visible")&&"dashboard_browser_nag"!=this.firstChild.id?void c.sortable("cancel"):void postboxes.save_order(b)},receive:function(b,c){"dashboard_browser_nag"==c.item[0].id&&a(c.sender).sortable("cancel"),postboxes._mark_area()}}),d&&(a(document.body).bind("orientationchange.postboxes",function(){postboxes._pb_change()}),this._pb_change()),this._mark_area(),e.each(function(){var b=a(this);b.attr("aria-expanded",!b.parent(".postbox").hasClass("closed"))})},save_state:function(b){var c,d;"nav-menus"!==b&&(c=a(".postbox").filter(".closed").map(function(){return this.id}).get().join(","),d=a(".postbox").filter(":hidden").map(function(){return this.id}).get().join(","),a.post(ajaxurl,{action:"closed-postboxes",closed:c,hidden:d,closedpostboxesnonce:jQuery("#closedpostboxesnonce").val(),page:b}))},save_order:function(b){var c,d=a(".columns-prefs input:checked").val()||0;c={action:"meta-box-order",_ajax_nonce:a("#meta-box-order-nonce").val(),page_columns:d,page:b},a(".meta-box-sortables").each(function(){c["order["+this.id.split("-")[0]+"]"]=a(this).sortable("toArray").join(",")}),a.post(ajaxurl,c)},_mark_area:function(){var b=a("div.postbox:visible").length,c=a("#post-body #side-sortables");a("#dashboard-widgets .meta-box-sortables:visible").each(function(){var c=a(this);1==b||c.children(".postbox:visible").length?c.removeClass("empty-container"):c.addClass("empty-container")}),c.length&&(c.children(".postbox:visible").length?c.removeClass("empty-container"):"280px"==a("#postbox-container-1").css("width")&&c.addClass("empty-container"))},_pb_edit:function(b){var c=a(".metabox-holder").get(0);c&&(c.className=c.className.replace(/columns-\d+/,"columns-"+b)),a(document).trigger("postboxes-columnchange")},_pb_change:function(){var b=a('label.columns-prefs-1 input[type="radio"]');switch(window.orientation){case 90:case-90:b.length&&b.is(":checked")||this._pb_edit(2);break;case 0:case 180:a("#poststuff").length?this._pb_edit(1):b.length&&b.is(":checked")||this._pb_edit(2)}},pbshow:!1,pbhide:!1}}(jQuery);
+var postboxes;!function(a){var b=a(document);postboxes={handle_click:function(){var c,d=a(this),e=d.parent(".postbox"),f=e.attr("id");"dashboard_browser_nag"!==f&&(e.toggleClass("closed"),c=!e.hasClass("closed"),d.hasClass("handlediv")?d.attr("aria-expanded",c):d.closest(".postbox").find("button.handlediv").attr("aria-expanded",c),"press-this"!==postboxes.page&&postboxes.save_state(postboxes.page),f&&(!e.hasClass("closed")&&a.isFunction(postboxes.pbshow)?postboxes.pbshow(f):e.hasClass("closed")&&a.isFunction(postboxes.pbhide)&&postboxes.pbhide(f)),b.trigger("postbox-toggled",e))},add_postbox_toggles:function(c,d){var e=a(".postbox .hndle, .postbox .handlediv");this.page=c,this.init(c,d),e.on("click.postboxes",this.handle_click),a(".postbox .hndle a").click(function(a){a.stopPropagation()}),a(".postbox a.dismiss").on("click.postboxes",function(b){var c=a(this).parents(".postbox").attr("id")+"-hide";b.preventDefault(),a("#"+c).prop("checked",!1).triggerHandler("click")}),a(".hide-postbox-tog").bind("click.postboxes",function(){var d=a(this),e=d.val(),f=a("#"+e);d.prop("checked")?(f.show(),a.isFunction(postboxes.pbshow)&&postboxes.pbshow(e)):(f.hide(),a.isFunction(postboxes.pbhide)&&postboxes.pbhide(e)),postboxes.save_state(c),postboxes._mark_area(),b.trigger("postbox-toggled",f)}),a('.columns-prefs input[type="radio"]').bind("click.postboxes",function(){var b=parseInt(a(this).val(),10);b&&(postboxes._pb_edit(b),postboxes.save_order(c))})},init:function(b,c){var d=a(document.body).hasClass("mobile"),e=a(".postbox .handlediv");a.extend(this,c||{}),a("#wpbody-content").css("overflow","hidden"),a(".meta-box-sortables").sortable({placeholder:"sortable-placeholder",connectWith:".meta-box-sortables",items:".postbox",handle:".hndle",cursor:"move",delay:d?200:0,distance:2,tolerance:"pointer",forcePlaceholderSize:!0,helper:function(a,b){return b.clone().find(":input").attr("name",function(a,b){return"sort_"+parseInt(1e5*Math.random(),10).toString()+"_"+b}).end()},opacity:.65,stop:function(){var c=a(this);return c.find("#dashboard_browser_nag").is(":visible")&&"dashboard_browser_nag"!=this.firstChild.id?void c.sortable("cancel"):void postboxes.save_order(b)},receive:function(b,c){"dashboard_browser_nag"==c.item[0].id&&a(c.sender).sortable("cancel"),postboxes._mark_area()}}),d&&(a(document.body).bind("orientationchange.postboxes",function(){postboxes._pb_change()}),this._pb_change()),this._mark_area(),e.each(function(){var b=a(this);b.attr("aria-expanded",!b.parent(".postbox").hasClass("closed"))})},save_state:function(b){var c,d;"nav-menus"!==b&&(c=a(".postbox").filter(".closed").map(function(){return this.id}).get().join(","),d=a(".postbox").filter(":hidden").map(function(){return this.id}).get().join(","),a.post(ajaxurl,{action:"closed-postboxes",closed:c,hidden:d,closedpostboxesnonce:jQuery("#closedpostboxesnonce").val(),page:b}))},save_order:function(b){var c,d=a(".columns-prefs input:checked").val()||0;c={action:"meta-box-order",_ajax_nonce:a("#meta-box-order-nonce").val(),page_columns:d,page:b},a(".meta-box-sortables").each(function(){c["order["+this.id.split("-")[0]+"]"]=a(this).sortable("toArray").join(",")}),a.post(ajaxurl,c)},_mark_area:function(){var b=a("div.postbox:visible").length,c=a("#post-body #side-sortables");a("#dashboard-widgets .meta-box-sortables:visible").each(function(){var c=a(this);1==b||c.children(".postbox:visible").length?c.removeClass("empty-container"):(c.addClass("empty-container"),c.attr("data-emptyString",postBoxL10n.postBoxEmptyString))}),c.length&&(c.children(".postbox:visible").length?c.removeClass("empty-container"):"280px"==a("#postbox-container-1").css("width")&&c.addClass("empty-container"))},_pb_edit:function(b){var c=a(".metabox-holder").get(0);c&&(c.className=c.className.replace(/columns-\d+/,"columns-"+b)),a(document).trigger("postboxes-columnchange")},_pb_change:function(){var b=a('label.columns-prefs-1 input[type="radio"]');switch(window.orientation){case 90:case-90:b.length&&b.is(":checked")||this._pb_edit(2);break;case 0:case 180:a("#poststuff").length?this._pb_edit(1):b.length&&b.is(":checked")||this._pb_edit(2)}},pbshow:!1,pbhide:!1}}(jQuery);

wp-includes/script-loader.php

@@ -495,6 +495,9 @@ function wp_default_scripts( &$scripts ) {
 		$scripts->add( 'xfn', "/wp-admin/js/xfn$suffix.js", array('jquery'), false, 1 );
 
 		$scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array('jquery-ui-sortable'), false, 1 );
+		did_action( 'init' ) && $scripts->localize( 'postbox', 'postBoxL10n', array(
+			'postBoxEmptyString' => __( 'Drag boxes here' ),
+		) );
 
 		$scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'suggest' ), false, 1 );
 		did_action( 'init' ) && $scripts->localize( 'tags-box', 'tagsBoxL10n', array(

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.5-alpha-36294';
+$wp_version = '4.5-alpha-36295';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.