Skip to content

Sidebar: Replace Gridicons and Material icons with WordPress icons - #94945

Merged
mmtr merged 2 commits into
trunkfrom
update/global-view-icons
Oct 1, 2024
Merged

Sidebar: Replace Gridicons and Material icons with WordPress icons#94945
mmtr merged 2 commits into
trunkfrom
update/global-view-icons

Conversation

@mmtr

@mmtr mmtr commented Sep 26, 2024 •
edited
Loading

Copy link
Copy Markdown
Member

Part of https://github.com/Automattic/dotcom-forge/issues/9083

Proposed Changes

Replaces sidebar icons of the Gridicons and Matericon icons libraries of the /sites and /me sections with icons from the WordPress icons library

Before After
Screenshot 2024-09-26 at 13 26 40 Screenshot 2024-09-26 at 13 26 09
Screenshot 2024-10-01 at 12 55 23 Screenshot 2024-10-01 at 12 56 58

Why are these changes being made?

To reduce the number of non-WordPress icons that we currently have

Testing Instructions

  • Use the Calypso live link below
  • Go to /sites
  • Make sure the sidebar icons look as expected (only the "Domains" icon has changed)
  • Go to /me
  • Make sure the sidebar icons look as expected (all icons except "Apps" have changed)

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests 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)?

@mmtr
mmtr requested a review from a team September 26, 2024 13:35
@mmtr mmtr self-assigned this Sep 26, 2024
@mmtr
mmtr requested review from a team as code owners September 26, 2024 13:35
@mmtr
mmtr requested a review from chriskmnds September 26, 2024 13:35
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 26, 2024
@github-actions

github-actions Bot commented Sep 26, 2024 •
edited by matticbot
Loading

Copy link
Copy Markdown
Calypso Live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-120945
Jetpack Cloud live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-120945&env=jetpack
Automattic for Agencies live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-120945&env=a8c-for-agencies

@matticbot

matticbot commented Sep 26, 2024 •
edited
Loading

Copy link
Copy Markdown
Contributor

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

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

Details 
name                   parsed_size           gzip_size
entry-stepper               +486 B  (+0.0%)      +91 B  (+0.0%)
entry-main                  +486 B  (+0.0%)      +92 B  (+0.0%)
entry-subscriptions         +378 B  (+0.0%)      +59 B  (+0.0%)
entry-login                 +378 B  (+0.0%)      +59 B  (+0.0%)
entry-domains-landing       +378 B  (+0.1%)      +59 B  (+0.0%)
entry-browsehappy           +378 B  (+0.2%)      +59 B  (+0.1%)

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

Sections (~34475 bytes added 📈 [gzipped])

Details 
name                               parsed_size           gzip_size
site-blocks                            +9187 B  (+1.2%)    +2463 B  (+1.2%)
privacy                                +9187 B  (+1.2%)    +2481 B  (+1.2%)
notification-settings                  +9187 B  (+1.1%)    +2459 B  (+1.0%)
me                                     +9187 B  (+1.3%)    +2463 B  (+1.2%)
help                                   +9187 B  (+1.2%)    +2445 B  (+1.2%)
developer                              +9187 B  (+1.2%)    +2480 B  (+1.2%)
account-close                          +9187 B  (+1.3%)    +2463 B  (+1.2%)
account                                +9187 B  (+1.0%)    +2485 B  (+0.9%)
security                               +7406 B  (+0.8%)    +1813 B  (+0.7%)
purchases                              +7362 B  (+0.4%)    +2721 B  (+0.5%)
woocommerce                            +2111 B  (+0.7%)     +149 B  (+0.2%)
jetpack-cloud-features-comparison      +1836 B  (+0.3%)     +719 B  (+0.4%)
plugins                                +1769 B  (+0.1%)     +461 B  (+0.1%)
themes                                 +1666 B  (+0.2%)     +413 B  (+0.1%)
scan                                   +1666 B  (+0.2%)     +389 B  (+0.2%)
domains                                +1666 B  (+0.1%)     +429 B  (+0.1%)
concierge                              +1666 B  (+0.3%)     +426 B  (+0.3%)
comments                               +1666 B  (+0.2%)     +426 B  (+0.2%)
backup                                 +1666 B  (+0.1%)     +389 B  (+0.1%)
activity                               +1666 B  (+0.2%)     +389 B  (+0.2%)
subscribers                            +1640 B  (+0.2%)     +391 B  (+0.2%)
settings-writing                       +1640 B  (+0.3%)     +429 B  (+0.3%)
settings-security                      +1640 B  (+0.3%)     +429 B  (+0.3%)
settings-reading                       +1640 B  (+0.4%)     +429 B  (+0.3%)
settings-podcast                       +1640 B  (+0.3%)     +429 B  (+0.3%)
settings-performance                   +1640 B  (+0.3%)     +429 B  (+0.3%)
settings-newsletter                    +1640 B  (+0.3%)     +429 B  (+0.3%)
settings-jetpack                       +1640 B  (+0.3%)     +387 B  (+0.2%)
settings-discussion                    +1640 B  (+0.4%)     +429 B  (+0.3%)
settings                               +1640 B  (+0.2%)     +430 B  (+0.2%)
promote-post-i2                        +1640 B  (+0.4%)     +433 B  (+0.3%)
preview                                +1640 B  (+0.6%)     +424 B  (+0.5%)
posts-custom                           +1640 B  (+0.2%)     +441 B  (+0.2%)
posts                                  +1640 B  (+0.2%)     +441 B  (+0.2%)
plans                                  +1640 B  (+0.1%)     +432 B  (+0.1%)
people                                 +1640 B  (+0.3%)     +429 B  (+0.2%)
pages                                  +1640 B  (+0.3%)     +431 B  (+0.3%)
migrate                                +1640 B  (+0.5%)     +440 B  (+0.4%)
media                                  +1640 B  (+0.1%)     +440 B  (+0.1%)
marketplace                            +1640 B  (+0.2%)     +444 B  (+0.1%)
marketing                              +1640 B  (+0.2%)     +429 B  (+0.2%)
jetpack-social                         +1640 B  (+0.2%)     +397 B  (+0.2%)
jetpack-search                         +1640 B  (+0.3%)     +423 B  (+0.3%)
jetpack-cloud-settings                 +1640 B  (+0.3%)     +387 B  (+0.2%)
jetpack-cloud-pricing                  +1640 B  (+0.2%)     +431 B  (+0.2%)
gutenberg-editor                       +1640 B  (+0.3%)     +431 B  (+0.2%)
google-my-business                     +1640 B  (+0.3%)     +427 B  (+0.3%)
export                                 +1640 B  (+0.5%)     +434 B  (+0.4%)
email                                  +1640 B  (+0.2%)     +393 B  (+0.2%)
earn                                   +1640 B  (+0.2%)     +430 B  (+0.2%)
checkout                               +1640 B  (+0.1%)     +393 B  (+0.1%)
add-ons                                +1640 B  (+0.5%)     +432 B  (+0.4%)
woocommerce-installation               +1444 B  (+0.4%)     -164 B  (-0.2%)
customize                              +1397 B  (+0.4%)     +754 B  (+0.8%)
theme                                  +1248 B  (+0.2%)     +268 B  (+0.1%)
jetpack-cloud-plugin-management        +1248 B  (+0.1%)     +362 B  (+0.1%)
import                                 +1145 B  (+0.2%)     +325 B  (+0.1%)
staging-site                           +1132 B  (+0.1%)     +362 B  (+0.1%)
sites-dashboard                        +1132 B  (+0.1%)     +362 B  (+0.1%)
site-performance                       +1132 B  (+0.1%)     +362 B  (+0.1%)
site-monitoring                        +1132 B  (+0.1%)     +362 B  (+0.1%)
site-logs                              +1132 B  (+0.1%)     +362 B  (+0.1%)
hosting-features                       +1132 B  (+0.1%)     +362 B  (+0.1%)
hosting                                +1132 B  (+0.1%)     +362 B  (+0.1%)
github-deployments                     +1132 B  (+0.1%)     +362 B  (+0.1%)
jetpack-cloud-overview                 +1119 B  (+0.3%)     +311 B  (+0.2%)
jetpack-cloud                          +1119 B  (+0.3%)     +326 B  (+0.3%)
home                                   +1119 B  (+0.1%)     +364 B  (+0.1%)
stats                                  +1106 B  (+0.1%)     +336 B  (+0.1%)
jetpack-connect                         +620 B  (+0.1%)      +55 B  (+0.0%)
devdocs                                 +512 B  (+0.3%)      +98 B  (+0.2%)
site-purchases                          +435 B  (+0.0%)     +244 B  (+0.1%)
patterns                                +307 B  (+0.0%)      -66 B  (-0.0%)
write-flow                               -13 B  (-0.0%)      -38 B  (-0.0%)
videopress-flow                          -13 B  (-0.0%)      -38 B  (-0.0%)
build-flow                               -13 B  (-0.0%)      -38 B  (-0.0%)

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 (~199 bytes removed 📉 [gzipped])

Details 
name                                                                              parsed_size           gzip_size
async-load-calypso-reader-sidebar                                                     +1640 B  (+1.2%)     +457 B  (+1.2%)
async-load-comment-block-editor                                                       -1247 B  (-0.0%)     -522 B  (-0.1%)
async-load-calypso-components-web-preview-component                                   -1020 B  (-0.2%)     -383 B  (-0.3%)
async-load-automattic-global-styles-src-components-global-styles-variations            -713 B  (-0.0%)     -416 B  (-0.1%)
async-load-calypso-jetpack-cloud-sections-sidebar-navigation-manage-selected-...       -521 B  (-0.4%)      -99 B  (-0.3%)
async-load-automattic-design-preview                                                   +307 B  (+0.0%)      -68 B  (-0.0%)

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.

@matticbot

matticbot commented Sep 26, 2024 •
edited
Loading

Copy link
Copy Markdown
Contributor

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

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

  • help-center
  • notifications
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/global-view-icons on your sandbox.

xavier-lc
xavier-lc approved these changes Sep 30, 2024
View reviewed changes

@xavier-lc xavier-lc left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes look good 👌

@mmtr
Merge remote-tracking branch 'origin/trunk' into update/global-view-i…
d299613 
…cons

# Conflicts:
#	apps/o2-blocks/package.json
#	apps/odyssey-stats/package.json
#	apps/wpcom-block-editor/package.json
#	client/me/sidebar/index.jsx
#	client/package.json
#	package.json
#	packages/command-palette/package.json
#	packages/components/package.json
#	packages/design-preview/package.json
#	packages/domain-picker/package.json
#	packages/help-center/package.json
#	packages/odie-client/package.json
#	packages/onboarding/package.json
#	packages/plans-grid-next/package.json
#	packages/plans-grid/package.json
#	packages/search/package.json
#	packages/subscriber/package.json
#	packages/verbum-block-editor/package.json
#	yarn.lock
@mmtr
mmtr removed request for a team and chriskmnds October 1, 2024 10:54
@mmtr
mmtr merged commit d5e9306 into trunk Oct 1, 2024
@mmtr
mmtr deleted the update/global-view-icons branch October 1, 2024 11:14
@github-actions 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 Oct 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@xavier-lc xavier-lc xavier-lc approved these changes

Assignees

@mmtr mmtr

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mmtr @matticbot @xavier-lc