Masterbar: Add recovery mode menu item.

[jmdodd]

Allow users with the masterbar module active to exit recovery mode without needing to log out of their site.

• This adds the core wp_admin_bar_recovery_mode_menu() menu item to the masterbar, improving compatibility of Jetpack with the new core WordPress Site Health feature.

Testing instructions:

• Temporarily set wp_is_recovery_mode() in wp-includes/load.php to return an early true.
• Load wp-admin and observe that the Exit Recovery Mode menu item is present in the masterbar.
• Temporarily set wp_is_recovery_mode() to return an early false.
• Load wp-admin and observe that the Exit Recovery Mode menu item is not present in the masterbar.

Proposed changelog entry for your changes:

• Masterbar: Improve Site Health compatibility by adding recovery mode exit option.

[jetpackbot]

	Warnings
⚠️	The PR is missing at least one [Status] label. Suggestions: [Status] In Progress, [Status] Needs Review

This is an automated check which relies on PULL_REQUEST_TEMPLATE. We encourage you to follow that template as it helps Jetpack maintainers do their job. If you think 'Testing instructions' or 'Proposed changelog entry' are not needed for your PR - please explain why you think so. Thanks for cooperation 🤖

Generated by 🚫 dangerJS against d42d653

[jeherve]

This works well for me. Not blocking, but I think that maybe we could add some styling to this button in the future, just like for the original menu item?

Something like

diff --git a/modules/masterbar/overrides.css b/modules/masterbar/overrides.css
index aadbe9abf..d6a09be0d 100644
--- a/modules/masterbar/overrides.css
+++ b/modules/masterbar/overrides.css
@@ -75,6 +75,12 @@
 	font-size: 28px;
 }
 
+.jetpack-masterbar #wpadminbar #wp-admin-bar-recovery-mode {
+	background-color: #ca4a1f;
+	color: #fff;
+	margin-right: 1em;
+}
+
 @media screen and (max-width: 480px) {
 	.jetpack-masterbar.post-new-php.block-editor-page #wp-toolbar ul li {
 		flex: 1;
@@ -119,4 +125,8 @@
 	.jetpack-masterbar.post-new-php.block-editor-page #wpadminbar li#wp-admin-bar-newdash {
 		order: 3;
 	}
+
+	.jetpack-masterbar #wpadminbar #wp-admin-bar-recovery-mode {
+		display: none;
+	}
 }

What do you think?

[jeherve]

Merging this one for now. Styling can come in a future PR if needed.

[jeherve]

@Automattic/jetpack-design What's your take on the above?

vs.

Noting that I used WordPress' color here, #ca4a1f. I'm not sure what Muriel's color would be here. $muriel-hot-orange-500, #f67c00?

[pablohoneyhoney]

Don’t have enough context here, but have you tried just color the font? It would conflict less with everything else. Thanks, Pablo

…

On May 27, 2019, at 11:02 AM, Jeremy Herve ***@***.***> wrote: @Automattic/jetpack-design What's your take on the above? vs. Noting that I used WordPress' color here, #ca4a1f. I'm not sure what Muriel's color would be here. $muriel-hot-yellow-400? — You are receiving this because you are on a team that was mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[jeherve]

To give you more context, this is an element that usually appears in the admin bar on self-hosted WordPress sites.

We want to implement the same button in the WordPress.com admin bar, on Jetpack sites (self-hosted, but mostly Atomic). The button will only appear when something is wrong on your site, and you need to take action.

Here is how the button appears in WordPress core today:

[scottsweb]

Because this button originally comes from core, I think we can stick with core colours in this instance.

If a user has the calypsoified theme enabled on wp-admin though, then I think using the orange would make more sense - that indicates to me they are probably an Atomic user.

[pablohoneyhoney]

The user don’t know what Atomic and other nuances are : ) I understand the user won’t be interacting in both environments, right? For the sake of respecting the clean .com bar, I’d color the text in red/orange (the usual color for errors?) rather than a box/background. Cheers, _ Pablo Honey Sr. Design Director, ProdX pablo@automattic.com Brooklyn, NYC (US) EST

…

On May 28, 2019, at 3:25 AM, Scott Evans ***@***.***> wrote: Because this button originally comes from core, I think we can stick with core colours in this instance. If a user has the calypsoified theme enabled on wp-admin though, then I think using the orange would make more sense - that indicates to me they are probably an Atomic user. — You are receiving this because you are on a team that was mentioned. Reply to this email directly, view it on GitHub <#12467?email_source=notifications&email_token=AGCVUQ7EJ753GCCDJNTBSQDPXUCCBA5CNFSM4HPTHCYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWLVV6Y#issuecomment-496458491>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGCVUQ2UKSRUMXRVJN7UCN3PXUCCBANCNFSM4HPTHCYA>.

[jeherve]

I understand the user won’t be interacting in both environments, right?

Not on Atomic, no, but on Jetpack one can freely activate and deactivate the WordPress.com toolbar feature, thus going from the core admin bar to the WordPress.com toolbar as they please.

I’d color the text in red/orange (the usual color for errors?) rather than a box/background.

Like so?

If so, it seems we would have to make that text bold as well:

https://webaim.org/resources/contrastchecker/?fcolor=CA4A1F&bcolor=23282D

Would that work?