Context: Following the plans to refocus the WordPress apps on core features, we plan to move features that are specific to WordPress.com to the Jetpack app. As such, we will eventually replace all mentions of the WordPress app in Calypso with Jetpack.
Proposed Changes
This PR updates the app banners that are displayed in the Reader, Notifications, Stats, and editor via the mobile web. References to the WordPress app are updated to Jetpack, and the opportunity has also been taken to update the banner’s design.
| Before |
After |
 |
 |
Note, the banner’s links won’t lead to the Jetpack app with this iteration. This PR is mainly focused on updating the banner’s design and the groundwork necessary for the links to work in the future.
I’ve given an overview of the code changes in the sections below (click each section’s heading for more).
Banner UI changes ⤵️
- The
jetpack/app-branding feature flag (added in #66814) is used to add a new banner that displays when the flag is set to true (currently only for wpcalypso and development builds).
- Note, the feature flag, along with any code related to the WordPress-specific banner, will be removed when we’re ready to deploy all web-related changes as part of the Jetpack app migration.
- The new
jetpackAppBanner component is similar to the current wordpressAppBanner component, except with changes to the copy, the inclusion of the BannerIcon component, and the addition of the jetpack class name for styling.
- The
jetpack class name is currently used to specifically target UI elements in the jetpackAppBanner, but will eventually be removed (along with other styles specific to wordpressAppBanner) when the changes are ready to be shipped to users.
Icon animations ⤵️
- The
lottie-web dependency has been added to the package.json and yarn.lock files. This dependency enables the usage of After Effects animations. As the full features of the library aren’t used in our case, we’re able to import the features we need from lottie-web/build/player/lottie_light for better performance.
- A new
animations/app-promo directory has been added to house the animated icons. These include RTL versions of the icons.
- References to the files have been added to the
getAppBannerData() function, where they can then be retrieved for use in the banner, depending on the section of the screen the user is on.
- By default,
jest doesn’t handle canvas properly, which leads to an error in tests when combined with lottie-web. To resolve this, canvas has also been added as a devOnly dependency.
Deep linking ⤵️
- iOS: As per #26118, the app banner points to
apps.wp.com for iOS users. The Jetpack app won’t open until we make updates to that site.
- Android: Updates to the URIs have been made here but won’t work until some further changes have been made in the Android codebase (PR pending).
Testing Instructions
Prerequisite: The app banner can be viewed via the mobile web (which can also be emulated using browser tools) when navigating directly to the Reader, Stats, Notifications, or the editor. Note, if the banner has previously been dismissed in your browser, it’ll be necessary to clear your cache.
The following should be confirmed for both iOS and Android:
- Verify that the banner appears as expected when navigating to the Reader, Stats, Notifications, and the editor.
- For now, the banner’s “open” link won’t open the Jetpack app (see
deep links section above for further details). We should, however, confirm that the links to the WordPress app continue to function as before for users.
It’d also be useful to verify the banner works as expected with the following:
- Different devices of varying sizes, including tablets.
- Different Calypso colour schemes.
- Different locales, including RTL.
Screenshots
LTR/RTL animation comparison ⤵️
Different sections ⤵️
| Reader |
Editor |
 |
|
| Stats |
Notes |
 |
 |
Different colour schemes ⤵️
| Midnight |
Sunrise |
 |
 |
Mobile/tablet comparison ⤵️
| iPad Air |
Landscape |
 |
 |
Pre-merge Checklist
Related to #
Unfortunately, no screenshots were provided by the developer.
