Plans comparison: make "not" in features' list bold on mobile

[chriskmnds]

Changes proposed in this Pull Request

Partially addresses c/4PHxCS4J-tr

Makes "not" in the features list bold on mobile.

Media

Testing instructions

1. Go to /start/plans
2. Switch to mobile viewport and ensure "not" appears bold in the plan features comparison list.
3. Go to /plans/[SITE_URL] with a personal site and ensure the same for 2 above.

TODO

• Create respective Landpack PR. 1013-gh-Automattic/landpack
• Create respective WPCOM diff for Landpack changes. D78915-code (generated via yarn deploy)
• Create respective WPCOM diff for landing pages. (TBD D78440-code)
• Create respective LOHP diff (regeneration). D78443-code

Related to #

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-8c2206d2b0e0cc4f0a8c564a4f7ddc7c7f4eaa5b

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-8c2206d2b0e0cc4f0a8c564a4f7ddc7c7f4eaa5b&env=jetpack

[matticbot]

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

Sections (~20 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
themes                     +975 B  (+0.2%)      +20 B  (+0.0%)
settings-performance       +975 B  (+0.2%)      +20 B  (+0.0%)
scan                       +975 B  (+0.1%)      +20 B  (+0.0%)
plugins                    +975 B  (+0.1%)      +20 B  (+0.0%)
plans                      +975 B  (+0.1%)      +20 B  (+0.0%)
migrate                    +975 B  (+0.3%)      +20 B  (+0.0%)
media                      +975 B  (+0.0%)      +20 B  (+0.0%)
marketplace                +975 B  (+0.1%)      +20 B  (+0.0%)
hosting                    +975 B  (+0.2%)      +20 B  (+0.0%)
home                       +975 B  (+0.1%)      +20 B  (+0.0%)
earn                       +975 B  (+0.2%)      +20 B  (+0.0%)
domains                    +975 B  (+0.1%)      +20 B  (+0.0%)
checkout                   +975 B  (+0.1%)      +20 B  (+0.0%)
backup                     +975 B  (+0.1%)      +20 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 (~20 bytes added 📈 [gzipped])

name                                                             parsed_size           gzip_size
async-load-signup-steps-plans                                         +975 B  (+0.3%)      +20 B  (+0.0%)
async-load-signup-steps-import-from-wordpress-import-everything       +975 B  (+0.3%)      +20 B  (+0.0%)
async-load-signup-steps-import-from-wordpress                         +975 B  (+0.1%)      +20 B  (+0.0%)
async-load-signup-steps-import-from                                   +975 B  (+0.1%)      +20 B  (+0.0%)
async-load-signup-steps-domains                                       +975 B  (+0.2%)      +20 B  (+0.0%)
async-load-design-blocks                                              +975 B  (+0.0%)      +20 B  (+0.0%)
async-load-calypso-post-editor-media-modal                            +975 B  (+0.1%)      +20 B  (+0.0%)
async-load-calypso-post-editor-editor-media-modal                     +975 B  (+0.1%)      +20 B  (+0.0%)
async-load-calypso-my-sites-checkout-modal                            +975 B  (+0.1%)      +20 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal                       +975 B  (+0.1%)      +20 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.

[chriskmnds]

@niranjan-uma-shankar will this create a new call for translations? Any thoughts to get around if so, as it's only stylistic changes? :-)

[chriskmnds]

stylistic changes

in en at least 🤔

[southp]

I believe this will only result in some fuzzy strings which can be resolved relatively easy. We can also add "String Freeze" label to see what will happen :)

[chriskmnds]

TIL about String Freeze. I may not recall correctly, but I think we merged stuff early behind features flags in the past to get translations before rollout, but this is obviously a solver (if I understand).

cc @razvanpapadopol 😎

[razvanpapadopol]

[Status] String Freeze label is used for Calypso changes where you want to have the strings translated before you merge the PR. Otherwise, even without using the GH label, they will be sent for translation when the PR is merged but you should make sure there is a mechanism in place to prevent showing the untranslated strings to real users. Read more in FG: PCYsg-3hI-p2#calypso

we merged stuff early behind features flags in the past to get translations before rollout

This is the only way for ETK, where the process starts only after a version of the plugin containing those strings is released. Read more about ETK processs: PCYsg-ly5-p2#i18n

[chriskmnds]

Ah, yes. Indeed recall the ETK scenario now. So yeah, different process. Thanks for the insight/summary! 😎

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7227965

Thank you @chriskmnds for including a screenshot in the description! This is really helpful for our translators.

[southp]

Confirmed that it works as expected. LGTM 🚢

[a8ci18n]

Translation for this Pull Request has now been finished.