Add Global sidebar footer #87576

okmttdhr · 2024-02-19T03:50:44Z

Related to

Proposed Changes

This PR updates the global sidebar to include a footer that matches the latest design: pfsHM7-aY-p2. (part of https://github.com/Automattic/dotcom-forge/issues/5628)

The original implementation is ported from #86766. You can see the diff by un-selecting the first 2 commits: https://github.com/Automattic/wp-calypso/pull/87576/files/008f0b465481fb9ad3c7ba170a8738b876776dd5..1c5b8e9ae74b008d29629ddf31c42612bddbbaad.

Testing Instructions

Open Calypso Live
Go to /sites
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-19T03:50:56Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2024-02-19T03:56:07Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/global-sidebar-footer on your sandbox.

matticbot · 2024-02-19T03:59:38Z

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

App Entrypoints (~24 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-subscriptions          +71 B  (+0.0%)      +24 B  (+0.0%)
entry-stepper                +71 B  (+0.0%)      +24 B  (+0.0%)
entry-main                   +71 B  (+0.0%)      +24 B  (+0.0%)
entry-login                  +71 B  (+0.0%)      +24 B  (+0.0%)
entry-domains-landing        +71 B  (+0.0%)      +24 B  (+0.0%)
entry-browsehappy            +71 B  (+0.0%)      +24 B  (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~11783 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
woocommerce-installation               +3358 B  (+0.9%)    +1402 B  (+1.2%)
woocommerce                            +3358 B  (+1.0%)    +1402 B  (+1.4%)
themes                                 +3358 B  (+0.3%)    +1402 B  (+0.4%)
theme                                  +3358 B  (+0.4%)    +1402 B  (+0.6%)
subscribers                            +3358 B  (+0.4%)    +1402 B  (+0.6%)
stats                                  +3358 B  (+0.4%)    +1402 B  (+0.5%)
sites-dashboard                        +3358 B  (+0.4%)    +1402 B  (+0.6%)
site-purchases                         +3358 B  (+0.2%)    +1402 B  (+0.3%)
site-monitoring                        +3358 B  (+0.7%)    +1402 B  (+1.0%)
settings-writing                       +3358 B  (+0.5%)    +1402 B  (+0.8%)
settings-security                      +3358 B  (+0.7%)    +1402 B  (+0.9%)
settings-reading                       +3358 B  (+0.7%)    +1402 B  (+1.0%)
settings-podcast                       +3358 B  (+0.6%)    +1402 B  (+0.9%)
settings-performance                   +3358 B  (+0.6%)    +1402 B  (+0.9%)
settings-newsletter                    +3358 B  (+0.7%)    +1402 B  (+0.9%)
settings-jetpack                       +3358 B  (+0.6%)    +1402 B  (+0.8%)
settings-discussion                    +3358 B  (+0.8%)    +1402 B  (+1.1%)
settings                               +3358 B  (+0.4%)    +1402 B  (+0.5%)
scan                                   +3358 B  (+0.4%)    +1402 B  (+0.6%)
promote-post-i2                        +3358 B  (+0.8%)    +1402 B  (+1.1%)
preview                                +3358 B  (+1.0%)    +1402 B  (+1.3%)
posts-custom                           +3358 B  (+0.5%)    +1402 B  (+0.7%)
posts                                  +3358 B  (+0.5%)    +1402 B  (+0.7%)
plugins                                +3358 B  (+0.1%)    +1402 B  (+0.2%)
plans                                  +3358 B  (+0.2%)    +1402 B  (+0.3%)
people                                 +3358 B  (+0.5%)    +1402 B  (+0.7%)
pages                                  +3358 B  (+0.6%)    +1402 B  (+0.9%)
migrate                                +3358 B  (+0.9%)    +1402 B  (+1.3%)
media                                  +3358 B  (+0.2%)    +1402 B  (+0.3%)
marketplace                            +3358 B  (+0.3%)    +1402 B  (+0.5%)
marketing                              +3358 B  (+0.5%)    +1402 B  (+0.7%)
jetpack-social                         +3358 B  (+0.8%)    +1402 B  (+1.1%)
jetpack-search                         +3358 B  (+0.6%)    +1402 B  (+0.8%)
jetpack-connect                        +3358 B  (+0.3%)    +1402 B  (+0.4%)
jetpack-cloud-settings                 +3358 B  (+0.5%)    +1402 B  (+0.8%)
jetpack-cloud-pricing                  +3358 B  (+0.4%)    +1402 B  (+0.6%)
jetpack-cloud-plugin-management        +3358 B  (+0.2%)    +1402 B  (+0.3%)
jetpack-cloud-overview                 +3358 B  (+0.7%)    +1402 B  (+1.0%)
jetpack-cloud-features-comparison      +3358 B  (+0.5%)    +1402 B  (+0.7%)
jetpack-cloud                          +3358 B  (+0.8%)    +1402 B  (+1.1%)
import                                 +3358 B  (+0.7%)    +1402 B  (+0.9%)
hosting                                +3358 B  (+0.4%)    +1402 B  (+0.6%)
home                                   +3358 B  (+0.2%)    +1402 B  (+0.3%)
gutenberg-editor                       +3358 B  (+0.5%)    +1402 B  (+0.7%)
google-my-business                     +3358 B  (+0.7%)    +1402 B  (+0.9%)
github-deployments                     +3358 B  (+0.6%)    +1402 B  (+0.7%)
export                                 +3358 B  (+1.0%)    +1402 B  (+1.3%)
email                                  +3358 B  (+0.5%)    +1402 B  (+0.6%)
earn                                   +3358 B  (+0.4%)    +1402 B  (+0.6%)
domains                                +3358 B  (+0.2%)    +1402 B  (+0.3%)
customize                              +3358 B  (+0.9%)    +1402 B  (+1.3%)
concierge                              +3358 B  (+0.6%)    +1402 B  (+1.0%)
comments                               +3358 B  (+0.4%)    +1402 B  (+0.6%)
checkout                               +3358 B  (+0.2%)    +1402 B  (+0.3%)
backup                                 +3358 B  (+0.3%)    +1402 B  (+0.4%)
add-ons                                +3358 B  (+0.9%)    +1402 B  (+1.2%)
activity                               +3358 B  (+0.4%)    +1402 B  (+0.6%)
site-blocks                            +3114 B  (+0.4%)    +1238 B  (+0.6%)
security                               +3114 B  (+0.3%)    +1319 B  (+0.5%)
purchases                              +3114 B  (+0.1%)    +1356 B  (+0.2%)
privacy                                +3114 B  (+0.4%)    +1254 B  (+0.6%)
notification-settings                  +3114 B  (+0.4%)    +1279 B  (+0.5%)
me                                     +3114 B  (+0.4%)    +1216 B  (+0.6%)
help                                   +3114 B  (+0.4%)    +1271 B  (+0.6%)
developer                              +3114 B  (+0.4%)    +1226 B  (+0.6%)
account-close                          +3114 B  (+0.4%)    +1256 B  (+0.6%)
account                                +3114 B  (+0.3%)    +1319 B  (+0.5%)

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 (~4093 bytes added 📈 [gzipped])

name                                           parsed_size           gzip_size
async-load-menu-items-help-center-help-center      +6634 B    (new)    +2890 B    (new)
async-load-calypso-reader-sidebar                  +3114 B  (+2.4%)    +1203 B  (+3.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 👍

arthur791004

Tested and looks good to me! The position of the Help Center looks weird but we can address it in the follow-up PR 🙂

arthur791004 · 2024-02-19T06:44:37Z

client/layout/global-sidebar/menu-items/help-center/help-center.jsx

+const HELP_CENTER_STORE = HelpCenter.register();
+
+const SidebarHelpCenter = ( { tooltip, tooltipPlacement } ) => {
+	//const helpIconRef = useRef();


Do we still need this in the future?

* 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

okmttdhr force-pushed the add/global-sidebar-footer branch from 9e76648 to b3bbf08 Compare February 19, 2024 04:10

okmttdhr marked this pull request as ready for review February 19, 2024 04:17

okmttdhr self-assigned this Feb 19, 2024

okmttdhr requested review from a team February 19, 2024 04:19

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 requested a review from eoigal February 19, 2024 04:19

okmttdhr added 7 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

okmttdhr force-pushed the add/global-sidebar-footer branch from 1fabcc4 to 1c5b8e9 Compare February 19, 2024 06:05

taipeicoder approved these changes Feb 19, 2024

View reviewed changes

okmttdhr merged commit 256fb64 into trunk Feb 19, 2024
12 checks passed

okmttdhr deleted the add/global-sidebar-footer branch February 19, 2024 06:44

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Feb 19, 2024

arthur791004 approved these changes Feb 19, 2024

View reviewed changes

okmttdhr mentioned this pull request Feb 19, 2024

Add WP Admin link to Global Site Sidebar #87584

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Global sidebar footer #87576

Add Global sidebar footer #87576

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

matticbot commented Feb 19, 2024 •

edited

Loading

taipeicoder left a comment

arthur791004 left a comment

arthur791004 Feb 19, 2024

Add Global sidebar footer #87576

Add Global sidebar footer #87576

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

matticbot commented Feb 19, 2024 • edited Loading

taipeicoder left a comment

Choose a reason for hiding this comment

arthur791004 left a comment

Choose a reason for hiding this comment

arthur791004 Feb 19, 2024

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

matticbot commented Feb 19, 2024 •

edited

Loading