Admin notices: Add more variety and make more generically usable.

There is now a base class of `notice`, with additional classes of `notice-success`, `notice-warning`, `notice-error`, and a new blue `notice-info`.

Also corrects some misleading notice colors, such as plugin tested up to warnings and login messages.

props avryl, melchoyce.
fixes #27418.


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

src/wp-admin/css/common.css

@@ -550,40 +550,6 @@ code {
 	margin: 10px 20px 0 2px;
 }
 
-div.updated,
-div.error {
-	padding: 0 0.6em;
-	margin: 5px 15px 2px;
-}
-
-div.updated p,
-div.error p {
-	margin: 0.5em 0;
-	padding: 2px;
-}
-
-.wrap div.updated,
-.wrap div.error,
-.media-upload-form div.error {
-	margin: 5px 0 15px;
-}
-
-div.updated {
-	border-left: 4px solid #7ad03a;
-	padding: 1px 12px;
-	background-color: #fff;
-	-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-	box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-}
-
-div.error {
-	border-left: 4px solid #dd3d36;
-	background: #fff;
-	-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-	box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-	padding: 1px 12px;
-}
-
 .attention {
 	color: #2ea2cc;
 }
@@ -1247,11 +1213,54 @@ th.action-links {
 
 }
 
-
 /*------------------------------------------------------------------------------
   4.0 - Notifications
 ------------------------------------------------------------------------------*/
 
+.notice,
+div.updated,
+div.error {
+	background: #fff;
+	border-left: 4px solid #fff;
+	-webkit-box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
+	box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
+	margin: 5px 15px 2px;
+	padding: 1px 12px;
+}
+
+.notice p,
+div.updated p,
+div.error p {
+	margin: 0.5em 0;
+	padding: 2px;
+}
+
+.notice-success,
+div.updated {
+     border-color: #7ad03a;
+}
+
+.notice-warning {
+    border-color: #ffba00;
+}
+
+.notice-error,
+div.error {
+    border-color: #dd3d36;
+}
+
+.notice-info {
+    border-color: #2ea2cc;
+}
+
+.wrap .notice,
+.wrap div.updated,
+.wrap div.error,
+.media-upload-form .notice,
+.media-upload-form div.error {
+	margin: 5px 0 15px;
+}
+
 #update-nag,
 .update-nag {
 	display: inline-block;

src/wp-admin/css/login.css

@@ -54,7 +54,7 @@ p {
 }
 
 .login .message {
-	border-left: 4px solid #7ad03a;
+	border-left: 4px solid #2ea2cc;
 	padding: 1px 12px;
 	background-color: #fff;
 	-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);

src/wp-admin/edit-form-advanced.php

@@ -388,7 +388,7 @@ if ( isset( $post_new_file ) && current_user_can( $post_type_object->cap->create
 	echo ' <a href="' . esc_url( admin_url( $post_new_file ) ) . '" class="add-new-h2">' . esc_html( $post_type_object->labels->add_new ) . '</a>';
 ?></h2>
 <?php if ( $notice ) : ?>
-<div id="notice" class="error"><p id="has-newer-autosave"><?php echo $notice ?></p></div>
+<div id="notice" class="notice notice-warning"><p id="has-newer-autosave"><?php echo $notice ?></p></div>
 <?php endif; ?>
 <?php if ( $message ) : ?>
 <div id="message" class="updated"><p><?php echo $message; ?></p></div>

src/wp-admin/includes/plugin-install.php

@@ -504,9 +504,9 @@ function install_plugin_information() {
 	<div id="section-holder" class="wrap">
 	<?php
 		if ( ! empty( $api->tested ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $api->tested ) ), $api->tested, '>' ) ) {
-			echo '<div class="error"><p>' . __('<strong>Warning:</strong> This plugin has <strong>not been tested</strong> with your current version of WordPress.') . '</p></div>';
+			echo '<div class="notice notice-warning"><p>' . __('<strong>Warning:</strong> This plugin has <strong>not been tested</strong> with your current version of WordPress.') . '</p></div>';
 		} else if ( ! empty( $api->requires ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $api->requires ) ), $api->requires, '<' ) ) {
-			echo '<div class="error"><p>' . __('<strong>Warning:</strong> This plugin has <strong>not been marked as compatible</strong> with your version of WordPress.') . '</p></div>';
+			echo '<div class="notice notice-warning"><p>' . __('<strong>Warning:</strong> This plugin has <strong>not been marked as compatible</strong> with your version of WordPress.') . '</p></div>';
 		}
 
 		foreach ( (array) $api->sections as $section_name => $content ) {

src/wp-admin/includes/template.php

@@ -2084,7 +2084,7 @@ function convert_to_screen( $hook_name ) {
  */
 function _local_storage_notice() {
 	?>
-	<div id="local-storage-notice" class="hidden">
+	<div id="local-storage-notice" class="hidden notice">
 	<p class="local-restore">
 		<?php _e('The backup of this post in your browser is different from the version below.'); ?>
 		<a class="restore-backup" href="#"><?php _e('Restore the backup.'); ?></a>

src/wp-includes/js/autosave.js

@@ -345,7 +345,7 @@ window.autosave = function() {
 				};
 
 				$notice = $( '#local-storage-notice' );
-				$('.wrap h2').first().after( $notice.addClass( 'updated' ).show() );
+				$('.wrap h2').first().after( $notice.addClass( 'notice-warning' ).show() );
 
 				$notice.on( 'click.autosave-local', function( event ) {
 					var $target = $( event.target );
@@ -354,10 +354,12 @@ window.autosave = function() {
 						restorePost( restorePostData );
 						$target.parent().hide();
 						$(this).find( 'p.undo-restore' ).show();
+						$notice.removeClass( 'notice-warning' ).addClass( 'notice-success' );
 					} else if ( $target.hasClass( 'undo-restore-backup' ) ) {
 						restorePost( undoPostData );
 						$target.parent().hide();
 						$(this).find( 'p.local-restore' ).show();
+						$notice.removeClass( 'notice-success' ).addClass( 'notice-warning' );
 					}
 
 					event.preventDefault();