Administration: Improve user experience and clarify when in recovery mode.

This changeset introduces several changes around usability when recovery mode is active:

* Display a notice in the admin clarifying that the user is in recovery mode.
* Use a highlight color for the admin bar link to exit recovery mode.
* Exit recovery mode automatically when logging out.
* Include a recovery mode indicator in the title tag.

Props aandrewdixon, azaozz, dhanukanuwan, flixos90, henrywright, karmatosed, mapk, melchoyce, spacedmonkey, TimothyBlynJacobs, tinkerbelly.
See #46608.


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

src/wp-admin/admin-header.php

@@ -52,6 +52,11 @@ if ( $admin_title == $title ) {
 	$admin_title = sprintf( __( '%1$s ‹ %2$s — WordPress' ), $title, $admin_title );
 }
 
+if ( wp_is_recovery_mode() ) {
+	/* translators: %s: Admin screen title. */
+	$admin_title = sprintf( __( '%s — Recovery Mode' ), $admin_title );
+}
+
 /**
  * Filters the title tag content for an admin page.
  *

src/wp-admin/css/colors/_admin.scss

@@ -348,6 +348,26 @@ ul#adminmenu > li.current > a.current:after {
 	background: $adminbar-input-background;
 }
 
+/* Admin Bar: recovery mode */
+
+#wpadminbar #wp-admin-bar-recovery-mode {
+	color: $adminbar-recovery-exit-text;
+	background-color: $adminbar-recovery-exit-background;
+}
+
+#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
+#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
+	color: $adminbar-recovery-exit-text;
+}
+
+#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover >.ab-item,
+#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
+#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
+#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
+	color: $adminbar-recovery-exit-text;
+	background-color: $adminbar-recovery-exit-background-alt;
+}
+
 /* Admin Bar: my account */
 
 #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {

src/wp-admin/css/colors/_variables.scss

@@ -55,4 +55,8 @@ $menu-collapse-focus-icon: $menu-highlight-icon !default;
 $adminbar-avatar-frame: lighten( $menu-background, 7% ) !default;
 $adminbar-input-background: lighten( $menu-background, 7% ) !default;
 
+$adminbar-recovery-exit-text: $menu-bubble-text !default;
+$adminbar-recovery-exit-background: $menu-bubble-background !default;
+$adminbar-recovery-exit-background-alt: mix(black, $adminbar-recovery-exit-background, 10%) !default;
+
 $menu-customizer-text: mix( $base-color, $text-color, 40% ) !default;

src/wp-admin/includes/admin-filters.php

@@ -120,6 +120,7 @@ add_action( 'admin_notices', 'update_nag', 3 );
 add_action( 'admin_notices', 'paused_plugins_notice', 5 );
 add_action( 'admin_notices', 'paused_themes_notice', 5 );
 add_action( 'admin_notices', 'maintenance_nag', 10 );
+add_action( 'admin_notices', 'wp_recovery_mode_nag', 1 );
 
 add_filter( 'update_footer', 'core_update_footer' );
 

src/wp-admin/includes/update.php

@@ -829,3 +829,22 @@ function wp_print_update_row_templates() {
 	</script>
 	<?php
 }
+
+/**
+ * Displays a notice when the user is in recovery mode.
+ *
+ * @since 5.2.0
+ */
+function wp_recovery_mode_nag() {
+	if ( ! wp_is_recovery_mode() ) {
+		return;
+	}
+
+	?>
+	<div class="notice notice-info">
+		<p>
+			<?php esc_html_e( 'You are in recovery mode. This means there may be an error with a theme or plugin. To exit recovery mode, log out or use the Exit button.' ); ?>
+		</p>
+	</div>
+	<?php
+}

src/wp-includes/class-wp-recovery-mode.php

@@ -82,6 +82,7 @@ class WP_Recovery_Mode {
 	public function initialize() {
 		$this->is_initialized = true;
 
+		add_action( 'wp_logout', array( $this, 'exit_recovery_mode' ) );
 		add_action( 'login_form_' . self::EXIT_ACTION, array( $this, 'handle_exit_recovery_mode' ) );
 
 		if ( defined( 'WP_RECOVERY_MODE_SESSION_ID' ) ) {

src/wp-includes/css/admin-bar.css

@@ -384,6 +384,22 @@ html:lang(he-il) .rtl #wpadminbar * {
 	box-shadow: none;
 }
 
+/**
+ * Recovery Mode
+ */
+#wpadminbar #wp-admin-bar-recovery-mode {
+	color: #fff;
+	background-color: #ca4a1f;
+}
+
+#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover >.ab-item,
+#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
+#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
+#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
+	color: #fff;
+	background-color: #c0461e;
+}
+
 /**
  * My Account
  */

src/wp-login.php

@@ -64,6 +64,11 @@ function login_header( $title = 'Log In', $message = '', $wp_error = null ) {
 	/* translators: Login screen title. 1: Login screen name, 2: Network or site name */
 	$login_title = sprintf( __( '%1$s ‹ %2$s — WordPress' ), $title, $login_title );
 
+	if ( wp_is_recovery_mode() ) {
+		/* translators: %s: Login screen title. */
+		$login_title = sprintf( __( '%s — Recovery Mode' ), $login_title );
+	}
+
 	/**
 	 * Filters the title tag content for login page.
 	 *