Changeset 51117

Timestamp:

06/08/2021 10:47:00 PM (4 years ago)

Author:

antpb

Message:

Administration: Introduce dashboard notice to discourage use of out of date browser.

If a browser matches Internet Explorer, the dashboard will display a notice recommending a more modern browser.

Props youknowriad, sabernhardt, afercia, SergeyBiryukov, davidbaumwald, netweb, johnbillion, jeherve.
See #48743.

Location:

trunk/src/wp-admin

Files:

• css/dashboard.css (modified) (2 diffs)
• includes/dashboard.php (modified) (3 diffs)

trunk/src/wp-admin/css/dashboard.css

@@ -1027 +1027 @@
 
 #dashboard_browser_nag p.browser-update-nag.has-browser-icon {
-    padding-right: 125px;
+    padding-right: 128px;
 }
 
 #dashboard_browser_nag .browser-icon {
-    margin-top: -35px;
-}
-
-#dashboard_browser_nag.postbox.browser-insecure {
+    margin-top: -32px;
+}
+
+#dashboard_browser_nag.postbox {
     background-color: #b32d2e;
+    background-image: none;
     border-color: #b32d2e;
-}
-
-#dashboard_browser_nag.postbox {
-    background-color: #dba617;
-    background-image: none;
-    border-color: #f0c33c;
     color: #fff;
     box-shadow: none;
 }
 
-#dashboard_browser_nag.postbox.browser-insecure h2 {
-    border-bottom-color: #e65054;
-    color: #fff;
-}
-
 #dashboard_browser_nag.postbox h2 {
-    border-bottom-color: #f5e6ab;
+    border-bottom-color: transparent;
     background: transparent none;
     color: #fff;
@@ -1061 +1051 @@
 #dashboard_browser_nag a {
     color: #fff;
+}
+
+#dashboard_browser_nag.postbox .postbox-header {
+    border-color: transparent;
 }
 

trunk/src/wp-admin/includes/dashboard.php

@@ -1659 +1659 @@
  *
  * @since 3.2.0
+ * @since 5.8.0 Display special message for Internet Explorer users.
+ *
+ * @global bool $is_IE
+ *
  */
 function wp_dashboard_browser_nag() {
+    global $is_IE;
+
     $notice   = '';
     $response = wp_check_browser_version();
 
     if ( $response ) {
-        if ( $response['insecure'] ) {
+        if ( $is_IE ) {
+            $msg = __( "For the best WordPress experience, please use Microsoft Edge or another modern browser instead of Internet Explorer." );
+        } elseif ( $response['insecure'] ) {
             $msg = sprintf(
                 /* translators: %s: Browser name and link. */
@@ -1683 +1691 @@
             $img_src = ( is_ssl() && ! empty( $response['img_src_ssl'] ) ) ? $response['img_src_ssl'] : $response['img_src'];
 
-            $notice           .= '<div class="alignright browser-icon"><a href="' . esc_attr( $response['update_url'] ) . '"><img src="' . esc_attr( $img_src ) . '" alt="" /></a></div>';
+            $notice .= '<div class="alignright browser-icon"><img src="' . esc_attr( $img_src ) . '" alt="" /></div>';
             $browser_nag_class = ' has-browser-icon';
         }
@@ -1694 +1702 @@
         }
 
-        $notice .= '<p>' . sprintf(
-            /* translators: 1: Browser update URL, 2: Browser name, 3: Browse Happy URL. */
-            __( '<a href="%1$s" class="update-browser-link">Update %2$s</a> or learn how to <a href="%3$s" class="browse-happy-link">browse happy</a>' ),
-            esc_attr( $response['update_url'] ),
-            esc_html( $response['name'] ),
-            esc_url( $browsehappy )
-        ) . '</p>';
+        if ( $is_IE ) {
+            $msg_browsehappy = sprintf(
+                /* translators: %s: Browse Happy URL. */
+                __( 'Learn how to <a href="%s" class="update-browser-link">browse happy</a>' ),
+                esc_url( $browsehappy )
+            );
+        } else {
+            $msg_browsehappy = sprintf(
+                /* translators: 1: Browser update URL, 2: Browser name, 3: Browse Happy URL. */
+                __( '<a href="%1$s" class="update-browser-link">Update %2$s</a> or learn how to <a href="%3$s" class="browse-happy-link">browse happy</a>' ),
+                esc_attr( $response['update_url'] ),
+                esc_html( $response['name'] ),
+                esc_url( $browsehappy )
+            );
+        }
+
+        $notice .= '<p>' . $msg_browsehappy . '</p>';
         $notice .= '<p class="hide-if-no-js"><a href="" class="dismiss" aria-label="' . esc_attr__( 'Dismiss the browser warning panel' ) . '">' . __( 'Dismiss' ) . '</a></p>';
         $notice .= '<div class="clear"></div>';