Ticket #31233: 31233.16.diff

src/wp-admin/css/common.css

@@ -1288 +1288 @@
         padding: 2px;
 }
 
+.notice-dismissible {
+        padding-right: 38px;
+        position: relative;
+}
+
+.notice-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        border: none;
+        margin: 0;
+        padding: 0.692em;
+        background: none;
+        color: #bbb;
+        cursor: pointer;
+}
+
+@-moz-document url-prefix() {
+        .notice-close {
+                top: 1px;
+                right: 1px;
+        }
+}
+
+noindex:-o-prefocus, .notice-close {
+  height: 38px;
+  width: 38px;
+}
+
+.notice-close:hover {
+        color: #c00;
+}
+
+.notice-close:active,
+.notice-close:focus { 
+        color: #c00;
+        outline: none;
+        -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
+        box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
+.ie8 .notice-close:focus { 
+        outline: 1px solid #5b9dd9;
+}
+
+.notice-close .dashicons-dismiss {
+        position: relative;
+        top: 0;
+        left: 0;
+        vertical-align: text-bottom;
+}
+
+.notice-close .dashicons-dismiss:before {
+        vertical-align: top;
+}
+
+.ie8 .notice-close .dashicons-dismiss:before {
+        display: block;
+}
+
 .notice-success,
 div.updated {
-     border-color: #7ad03a;
+        border-color: #7ad03a;
 }
 
 .notice-warning {
-    border-color: #ffba00;
+        border-color: #ffba00;
 }
 
 .notice-error,
 div.error {
-    border-color: #dd3d36;
+        border-color: #dd3d36;
 }
 
 .notice-info {
-    border-color: #00a0d2;
+        border-color: #00a0d2;
 }
 
 .wrap .notice,
@@ -3122 +3182 @@
         }
 
         /* Feedback Messages */
-        .wrap div.updated, .wrap div.error, .media-upload-form div.error {
+        .notice, .wrap div.updated, .wrap div.error, .media-upload-form div.error {
                 margin: 20px 0 10px 0;
                 padding: 5px 10px;
                 font-size: 14px;
                 line-height: 175%;
         }
 
+        .notice-dismissible {
+                padding-right: 46px;
+        }
+
+        .notice-close {
+                padding: 0.929em;
+        }
+        
+        noindex:-o-prefocus, .notice-close {
+                height: 46px;
+                width: 46px;
+        }
+        
+        noindex:-o-prefocus, .notice-close .dashicons-dismiss {
+                vertical-align: bottom;
+        }
+
         .wrap .icon32 + h2 {
                 margin-top: -2px;
         }

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

@@ -410 +410 @@
 <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>
+<div id="message" class="notice notice-success notice-dismissible">
+        <p><?php echo $message; ?></p>
+        <button class="notice-close hide-if-no-js">
+                <span class="dashicons dashicons-dismiss">
+                        <span class="screen-reader-text"></span>
+                </span>
+        </button>
+</div>
 <?php endif; ?>
 <div id="lost-connection-notice" class="error hidden">
         <p><span class="spinner"></span> <?php _e( '<strong>Connection lost.</strong> Saving has been disabled until you&#8217;re reconnected.' ); ?>

src/wp-admin/js/common.js

@@ -373 +373 @@
         $firstHeading.nextAll( 'div.updated, div.error, div.notice' ).addClass( 'below-h2' );
         $( 'div.updated, div.error, div.notice' ).not( '.below-h2, .inline' ).insertAfter( $firstHeading );
 
+        // Make notices dismissible
+        $( '.notice-dismissible' ).each( function() {
+                var $this = $( this ),
+                        $button = $( '.notice-close', $this ),
+                        btnText = commonL10n.dismiss || '',
+                        append  = false;
+
+                // Create the button markup if it has not been added
+                if ( $button.length === 0 ) {
+                        $button = $( '<button class="notice-close hide-if-no-js"><span class="dashicons dashicons-dismiss"><span class="screen-reader-text"></span></span></button>' );
+                        append = true;
+                }
+
+                // Ensure plain text
+                $button.find( '.screen-reader-text' ).text( btnText );
+
+                // Only append if we need to
+                if ( append ) {
+                        $this.append( $button );
+                }
+
+                $button.on( 'click.wp-dismiss-notice', function( event ) {
+                        event.preventDefault();
+                        $this.slideUp( 'fast' );
+                });
+        });
+
         // Init screen meta
         screenMeta.init();
 

src/wp-includes/script-loader.php

@@ -79 +79 @@
 
         $scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), false, 1 );
         did_action( 'init' ) && $scripts->localize( 'common', 'commonL10n', array(
-                'warnDelete' => __("You are about to permanently delete the selected items.\n  'Cancel' to stop, 'OK' to delete.")
+                'warnDelete' => __( "You are about to permanently delete the selected items.\n  'Cancel' to stop, 'OK' to delete." ),
+                'dismiss'    => __( 'Dismiss this notice.' ),
         ) );
 
         $scripts->add( 'wp-a11y', "/wp-includes/js/wp-a11y$suffix.js", array( 'jquery' ), false, 1 );