Add WP Admin link to Global Site Sidebar #87584

okmttdhr · 2024-02-19T06:55:57Z

Related to

Proposed Changes

This PR adds the WP Admin link to the Global Site Sidebar.
Design: pfsHM7-aY-p2

Testing Instructions

Open Calypso Live
Go to any Calypso page (e.g., /home)
See how the sidebar looks like

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2024-02-19T06:56:07Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-98140

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-98140&env=jetpack

matticbot · 2024-02-19T07:04:24Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~5147 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
security                               +1849 B  (+0.2%)     +584 B  (+0.2%)
woocommerce-installation               +1836 B  (+0.5%)     +614 B  (+0.5%)
woocommerce                            +1836 B  (+0.6%)     +614 B  (+0.6%)
themes                                 +1836 B  (+0.2%)     +614 B  (+0.2%)
theme                                  +1836 B  (+0.2%)     +614 B  (+0.3%)
subscribers                            +1836 B  (+0.2%)     +614 B  (+0.3%)
stats                                  +1836 B  (+0.2%)     +614 B  (+0.2%)
site-purchases                         +1836 B  (+0.1%)     +614 B  (+0.1%)
site-monitoring                        +1836 B  (+0.4%)     +614 B  (+0.4%)
site-blocks                            +1836 B  (+0.2%)     +655 B  (+0.3%)
settings-writing                       +1836 B  (+0.3%)     +614 B  (+0.3%)
settings-reading                       +1836 B  (+0.4%)     +614 B  (+0.5%)
settings-podcast                       +1836 B  (+0.3%)     +614 B  (+0.4%)
settings-performance                   +1836 B  (+0.4%)     +614 B  (+0.4%)
settings-newsletter                    +1836 B  (+0.4%)     +614 B  (+0.4%)
settings-jetpack                       +1836 B  (+0.3%)     +614 B  (+0.4%)
settings-discussion                    +1836 B  (+0.4%)     +614 B  (+0.5%)
settings                               +1836 B  (+0.2%)     +614 B  (+0.2%)
scan                                   +1836 B  (+0.2%)     +614 B  (+0.3%)
purchases                              +1836 B  (+0.1%)     +614 B  (+0.1%)
promote-post-i2                        +1836 B  (+0.4%)     +614 B  (+0.5%)
privacy                                +1836 B  (+0.2%)     +613 B  (+0.3%)
preview                                +1836 B  (+0.5%)     +614 B  (+0.6%)
posts-custom                           +1836 B  (+0.3%)     +614 B  (+0.3%)
posts                                  +1836 B  (+0.3%)     +614 B  (+0.3%)
plugins                                +1836 B  (+0.1%)     +614 B  (+0.1%)
plans                                  +1836 B  (+0.1%)     +614 B  (+0.2%)
people                                 +1836 B  (+0.3%)     +614 B  (+0.3%)
pages                                  +1836 B  (+0.3%)     +614 B  (+0.4%)
notification-settings                  +1836 B  (+0.2%)     +602 B  (+0.2%)
migrate                                +1836 B  (+0.5%)     +614 B  (+0.5%)
media                                  +1836 B  (+0.1%)     +614 B  (+0.1%)
me                                     +1836 B  (+0.2%)     +627 B  (+0.3%)
marketplace                            +1836 B  (+0.2%)     +614 B  (+0.2%)
marketing                              +1836 B  (+0.2%)     +614 B  (+0.3%)
jetpack-social                         +1836 B  (+0.4%)     +614 B  (+0.5%)
jetpack-search                         +1836 B  (+0.3%)     +614 B  (+0.3%)
jetpack-connect                        +1836 B  (+0.2%)     +614 B  (+0.2%)
jetpack-cloud-settings                 +1836 B  (+0.3%)     +614 B  (+0.3%)
jetpack-cloud-pricing                  +1836 B  (+0.2%)     +614 B  (+0.3%)
jetpack-cloud-plugin-management        +1836 B  (+0.1%)     +614 B  (+0.1%)
jetpack-cloud-overview                 +1836 B  (+0.4%)     +614 B  (+0.4%)
jetpack-cloud-features-comparison      +1836 B  (+0.3%)     +614 B  (+0.3%)
jetpack-cloud                          +1836 B  (+0.4%)     +614 B  (+0.5%)
import                                 +1836 B  (+0.4%)     +614 B  (+0.4%)
hosting                                +1836 B  (+0.2%)     +614 B  (+0.3%)
home                                   +1836 B  (+0.1%)     +614 B  (+0.1%)
help                                   +1836 B  (+0.2%)     +612 B  (+0.3%)
gutenberg-editor                       +1836 B  (+0.3%)     +614 B  (+0.3%)
google-my-business                     +1836 B  (+0.4%)     +614 B  (+0.4%)
github-deployments                     +1836 B  (+0.3%)     +614 B  (+0.3%)
export                                 +1836 B  (+0.5%)     +614 B  (+0.6%)
email                                  +1836 B  (+0.2%)     +614 B  (+0.3%)
earn                                   +1836 B  (+0.2%)     +614 B  (+0.3%)
domains                                +1836 B  (+0.1%)     +614 B  (+0.1%)
developer                              +1836 B  (+0.2%)     +625 B  (+0.3%)
customize                              +1836 B  (+0.5%)     +614 B  (+0.6%)
concierge                              +1836 B  (+0.4%)     +614 B  (+0.4%)
comments                               +1836 B  (+0.2%)     +614 B  (+0.3%)
checkout                               +1836 B  (+0.1%)     +614 B  (+0.1%)
add-ons                                +1836 B  (+0.5%)     +614 B  (+0.5%)
activity                               +1836 B  (+0.2%)     +614 B  (+0.3%)
account-close                          +1836 B  (+0.2%)     +636 B  (+0.3%)
account                                +1836 B  (+0.2%)     +597 B  (+0.2%)
settings-security                      +1787 B  (+0.4%)     +607 B  (+0.4%)
sites-dashboard                         +701 B  (+0.1%)     +185 B  (+0.1%)
backup                                  +701 B  (+0.1%)     +191 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~162 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-reader-sidebar                    +1836 B  (+1.4%)     +705 B  (+1.8%)
async-load-calypso-blocks-editor-checkout-modal      -1122 B  (-0.1%)     -543 B  (-0.2%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

taipeicoder

LGTM, with a minor i18n feedback.

taipeicoder · 2024-02-19T07:10:44Z

client/layout/global-sidebar/footer.tsx

+				data-tooltip={ translate( 'WP Admin' ) }
+			>
+				<Icon icon={ wordpress } className="wpicon" />
+				WP Admin


This should probably need translation as well.

arthur791004 · 2024-02-19T07:34:29Z

client/layout/global-sidebar/footer.tsx

+			>
+				<Icon icon={ wordpress } className="wpicon" />
+				{ translate( 'WP Admin' ) }
+				<Icon icon={ external } className="external" />


With this icon, I think we have to open the wp-admin on the new tab.

I initially felt the same, but I believe it's preferable to remain in the same tab for this scenario.
W3C generally advises against opening new tabs, and it specifies that it should be avoided unless in explicit situations. I thought our scenario did not meet the criteria for opening a new tab as outlined by the WCAG here: https://www.w3.org/TR/WCAG20-TECHS/G200.html.

Opening a page containing context-sensitive information, such as help instructions, or an alternate means of completing a form, such as a calendar-based date picker, will significantly disrupt a multi-step workflow, such as filling in and submitting a form, if the page is opened in the same window or tab.

The user is logged into a secured area of a site, and following a link to a page outside of the secured area would terminate the user's logon. In this case opening external links in an external window allows the user to access such references while keeping their login active in the original window.

While it's debatable, I've concluded that opening a new tab, even when an external icon is present, is not the best approach in this instance.

External links and new tabs | by Sean Elliott | Medium

Should Links Open In New Windows? — Smashing Magazine

External Links, New Tabs, and Accessibility / Coder's Block

When to use target="_blank" | CSS-Tricks - CSS-Tricks

I found another reason to stay in the same tab: #87551 (comment).
Maybe we should be aligned with the header action. Or could we just remove the external icon? @nuriapenya

Sounds good! I agree to remove the external icon for now 👍

client/layout/global-sidebar/footer.tsx

arthur791004 · 2024-02-19T07:37:24Z

client/layout/global-sidebar/footer.tsx

+				href={ `https://${ selectedSiteSlug }/wp-admin/plugins.php` }
+				className="sidebar__footer-wpadmin tooltip tooltip-top"
+				title={ translate( 'WP Admin' ) }
+				data-tooltip={ translate( 'WP Admin' ) }


It seems a bit duplicate. Maybe we don't need the tooltip here 🤔

Do you have any thoughts, referring to your previous review: #85013 (comment), @taipeicoder? 🙂

I'm in favor of leaving out the shortcut, but keeping the tooltip for accessibility purposes. Even though it might be redundant 🙂

IIRC the screen reader should be able to capture the text of the link, so we probably don't need to add the title here since it doesn't provide any additional information 🙂

eoigal

LGTM, I don't have strong preference on new tab or not - its something we can return to later if needs be.

* Port the Global Sidebar Footer from the PR: #86766 * Port Help Center from the PR: #86766 * JS to TS * Add Global Sidebar Footer * Remove help icon * Add tooltips * Add background-color * Add WP Admin link * Translate the word * Fix wp-admin link * Remove the external icon * Remove the tooltip

okmttdhr added 9 commits February 19, 2024 15:05

Port the Global Sidebar Footer from the PR: #86766

ea185a6

Port Help Center from the PR: #86766

008f0b4

JS to TS

b0a8642

Add Global Sidebar Footer

f72c525

Remove help icon

f642230

Add tooltips

88fb4aa

Add background-color

1c5b8e9

Add WP Admin link

4d41d4d

Merge branch 'trunk' into add/global-site-sidebar-footer

f4f5a0d

okmttdhr marked this pull request as ready for review February 19, 2024 07:02

okmttdhr requested review from eoigal and a team February 19, 2024 07:03

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Feb 19, 2024

okmttdhr self-assigned this Feb 19, 2024

okmttdhr added the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Feb 19, 2024

taipeicoder approved these changes Feb 19, 2024

View reviewed changes

Translate the word

0324375

arthur791004 reviewed Feb 19, 2024

View reviewed changes

Fix wp-admin link

b99cb60

eoigal approved these changes Feb 19, 2024

View reviewed changes

okmttdhr added 2 commits February 20, 2024 10:19

Remove the external icon

4bd3f88

Remove the tooltip

ac48883

okmttdhr force-pushed the add/global-site-sidebar-footer branch from 40ea132 to ac48883 Compare February 20, 2024 01:22

okmttdhr merged commit 733c8bb into trunk Feb 20, 2024
11 checks passed

okmttdhr deleted the add/global-site-sidebar-footer branch February 20, 2024 01:41

github-actions bot removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging labels Feb 20, 2024

This was referenced Feb 20, 2024

Live Preview: Remove the redundant tooltip #87617

Merged

Nav redesign: Restore the external link icon on the Global Site View sidebar #87621

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add WP Admin link to Global Site Sidebar #87584

Add WP Admin link to Global Site Sidebar #87584

okmttdhr commented Feb 19, 2024 •

edited

Loading

github-actions bot commented Feb 19, 2024 •

edited by matticbot

Loading

matticbot commented Feb 19, 2024 •

edited

Loading

taipeicoder left a comment •

edited

Loading

taipeicoder Feb 19, 2024

arthur791004 Feb 19, 2024

okmttdhr Feb 19, 2024 •

edited

Loading

okmttdhr Feb 19, 2024

arthur791004 Feb 19, 2024

arthur791004 Feb 19, 2024

okmttdhr Feb 19, 2024 •

edited

Loading

taipeicoder Feb 19, 2024

eoigal left a comment

Add WP Admin link to Global Site Sidebar #87584

Add WP Admin link to Global Site Sidebar #87584

Conversation

okmttdhr commented Feb 19, 2024 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Feb 19, 2024 • edited by matticbot Loading

matticbot commented Feb 19, 2024 • edited Loading

taipeicoder left a comment • edited Loading

Choose a reason for hiding this comment

taipeicoder Feb 19, 2024

Choose a reason for hiding this comment

arthur791004 Feb 19, 2024

Choose a reason for hiding this comment

okmttdhr Feb 19, 2024 • edited Loading

Choose a reason for hiding this comment

okmttdhr Feb 19, 2024

Choose a reason for hiding this comment

arthur791004 Feb 19, 2024

Choose a reason for hiding this comment

arthur791004 Feb 19, 2024

Choose a reason for hiding this comment

okmttdhr Feb 19, 2024 • edited Loading

Choose a reason for hiding this comment

taipeicoder Feb 19, 2024

Choose a reason for hiding this comment

eoigal left a comment

Choose a reason for hiding this comment

okmttdhr commented Feb 19, 2024 •

edited

Loading

github-actions bot commented Feb 19, 2024 •

edited by matticbot

Loading

matticbot commented Feb 19, 2024 •

edited

Loading

taipeicoder left a comment •

edited

Loading

okmttdhr Feb 19, 2024 •

edited

Loading

okmttdhr Feb 19, 2024 •

edited

Loading