Site Assembler - Snackbar notifications as in the editor

[miksansegundo]

Related to #74758

Proposed Changes

• Add feature flag pattern-assembler/notices
• Use withNotices HOC to handle the notices state
• Use SnackbarList component to handle the stack of notices.
• Show a notice stacked (as in the editor but on the bottom-right of the screen) when any pattern is added, replaced, or removed.
• Use the same notice copy as the editor Block pattern "Name" inserted.
• Auto dismisses after 10 seconds (as in the editor). The time is hardcoded in the component, maybe for accessibility reasons.
• Dismiss a notice immediately on click (as in the editor).

Screen.Recording.2566-03-24.at.14.19.54.mov

Testing Instructions

• Click on the Calypso Live link from the first comment
• Create a new site
• Continue until the design picker
• Scroll down and click Start designing
• Click Homepage > Add patterns to add patterns and verify that the notice shows the category name of the patterns added
• Replace the patterns and verify that the notice shows the category name of the new pattern and says replaced.
• Remove patterns to verify that the notice says removed
• Click on a notice to dismiss it
• Wait 10 seconds to see the notice disappear
• Click the < back or Save button and verify the notices stay
• Go back to the design picker or click Continue to verify the notices disappear

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-ajp-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[miksansegundo]

I'll add more details in the description, a video and more testing steps soon.

[matticbot]

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

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

name           parsed_size           gzip_size
entry-stepper      +1859 B  (+0.1%)     +630 B  (+0.1%)

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

Sections (~2121 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
pattern-assembler-step                 +4861 B  (+0.5%)    +1494 B  (+0.5%)
import-flow                            +4861 B  (+0.2%)    +1494 B  (+0.2%)
woocommerce-installation               +1859 B  (+0.4%)     +627 B  (+0.4%)
woocommerce                            +1859 B  (+0.4%)     +627 B  (+0.5%)
themes                                 +1859 B  (+0.2%)     +627 B  (+0.2%)
theme                                  +1859 B  (+0.3%)     +627 B  (+0.3%)
stats                                  +1859 B  (+0.2%)     +627 B  (+0.3%)
sites-dashboard                        +1859 B  (+0.3%)     +627 B  (+0.4%)
site-purchases                         +1859 B  (+0.1%)     +627 B  (+0.2%)
site-logs                              +1859 B  (+0.5%)     +627 B  (+0.5%)
settings-writing                       +1859 B  (+0.2%)     +627 B  (+0.3%)
settings-security                      +1859 B  (+0.3%)     +627 B  (+0.4%)
settings-reading                       +1859 B  (+0.4%)     +627 B  (+0.4%)
settings-performance                   +1859 B  (+0.3%)     +627 B  (+0.3%)
settings-jetpack                       +1859 B  (+0.3%)     +627 B  (+0.3%)
settings-discussion                    +1859 B  (+0.4%)     +627 B  (+0.4%)
settings                               +1859 B  (+0.2%)     +627 B  (+0.2%)
scan                                   +1859 B  (+0.2%)     +627 B  (+0.2%)
reader                                 +1859 B  (+0.2%)     +627 B  (+0.3%)
purchases                              +1859 B  (+0.1%)     +627 B  (+0.1%)
promote-post                           +1859 B  (+0.3%)     +627 B  (+0.4%)
preview                                +1859 B  (+0.4%)     +627 B  (+0.5%)
posts-custom                           +1859 B  (+0.3%)     +627 B  (+0.3%)
posts                                  +1859 B  (+0.3%)     +627 B  (+0.3%)
plugins                                +1859 B  (+0.1%)     +627 B  (+0.1%)
plans                                  +1859 B  (+0.1%)     +627 B  (+0.2%)
people                                 +1859 B  (+0.3%)     +627 B  (+0.3%)
pages                                  +1859 B  (+0.3%)     +627 B  (+0.3%)
notification-settings                  +1859 B  (+0.2%)     +627 B  (+0.2%)
migrate                                +1859 B  (+0.4%)     +627 B  (+0.4%)
media                                  +1859 B  (+0.1%)     +627 B  (+0.1%)
marketplace                            +1859 B  (+0.2%)     +627 B  (+0.2%)
marketing                              +1859 B  (+0.2%)     +627 B  (+0.3%)
jetpack-social                         +1859 B  (+0.4%)     +627 B  (+0.4%)
jetpack-search                         +1859 B  (+0.3%)     +627 B  (+0.4%)
jetpack-connect                        +1859 B  (+0.1%)     +627 B  (+0.2%)
jetpack-cloud-settings                 +1859 B  (+0.3%)     +627 B  (+0.3%)
jetpack-cloud-pricing                  +1859 B  (+0.2%)     +627 B  (+0.3%)
jetpack-cloud-plugin-management        +1859 B  (+0.2%)     +627 B  (+0.2%)
jetpack-cloud-features-comparison      +1859 B  (+0.3%)     +627 B  (+0.3%)
jetpack-cloud-agency-dashboard         +1859 B  (+0.2%)     +627 B  (+0.3%)
jetpack-cloud                          +1859 B  (+0.5%)     +627 B  (+0.5%)
import                                 +1859 B  (+0.3%)     +627 B  (+0.4%)
hosting                                +1859 B  (+0.2%)     +627 B  (+0.2%)
home                                   +1859 B  (+0.1%)     +627 B  (+0.2%)
help                                   +1859 B  (+0.2%)     +627 B  (+0.2%)
gutenberg-editor                       +1859 B  (+0.3%)     +627 B  (+0.3%)
google-my-business                     +1859 B  (+0.3%)     +627 B  (+0.3%)
export                                 +1859 B  (+0.4%)     +627 B  (+0.5%)
email                                  +1859 B  (+0.2%)     +627 B  (+0.3%)
earn                                   +1859 B  (+0.3%)     +627 B  (+0.3%)
domains                                +1859 B  (+0.1%)     +627 B  (+0.1%)
customize                              +1859 B  (+0.4%)     +627 B  (+0.5%)
concierge                              +1859 B  (+0.3%)     +627 B  (+0.4%)
comments                               +1859 B  (+0.2%)     +627 B  (+0.2%)
checkout                               +1859 B  (+0.1%)     +627 B  (+0.1%)
backup                                 +1859 B  (+0.2%)     +627 B  (+0.2%)
add-ons                                +1859 B  (+0.4%)     +627 B  (+0.5%)
activity                               +1859 B  (+0.2%)     +627 B  (+0.3%)
account                                +1859 B  (+0.2%)     +627 B  (+0.2%)

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

name                                                            parsed_size           gzip_size
async-load-signup-steps-woocommerce-install-transfer                +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-woocommerce-install-step-store-address      +1859 B  (+0.7%)     +627 B  (+0.7%)
async-load-signup-steps-woocommerce-install-step-business-info      +1859 B  (+0.7%)     +627 B  (+0.7%)
async-load-signup-steps-woocommerce-install-confirm                 +1859 B  (+0.8%)     +627 B  (+0.8%)
async-load-signup-steps-woocommerce-install                         +1859 B  (+1.0%)     +627 B  (+1.0%)
async-load-signup-steps-website-content                             +1859 B  (+0.6%)     +627 B  (+0.7%)
async-load-signup-steps-user                                        +1859 B  (+0.6%)     +627 B  (+0.6%)
async-load-signup-steps-theme-selection                             +1859 B  (+0.6%)     +627 B  (+0.7%)
async-load-signup-steps-test-step                                   +1859 B  (+0.9%)     +627 B  (+1.0%)
async-load-signup-steps-store-features                              +1859 B  (+0.8%)     +627 B  (+0.9%)
async-load-signup-steps-starting-point                              +1859 B  (+0.8%)     +627 B  (+0.9%)
async-load-signup-steps-social-profiles                             +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-site-type                                   +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-site-title                                  +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-site-picker                                 +1859 B  (+0.6%)     +627 B  (+0.6%)
async-load-signup-steps-site-or-domain                              +1859 B  (+0.8%)     +627 B  (+0.9%)
async-load-signup-steps-site-options                                +1859 B  (+0.8%)     +627 B  (+0.9%)
async-load-signup-steps-site                                        +1859 B  (+0.8%)     +627 B  (+0.9%)
async-load-signup-steps-rewind-were-backing                         +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-rewind-migrate                              +1859 B  (+0.8%)     +627 B  (+0.9%)
async-load-signup-steps-rewind-form-creds                           +1859 B  (+0.8%)     +627 B  (+0.8%)
async-load-signup-steps-reader-landing                              +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-plans-pm                                    +1859 B  (+0.4%)     +627 B  (+0.5%)
async-load-signup-steps-plans-atomic-store                          +1859 B  (+0.5%)     +627 B  (+0.6%)
async-load-signup-steps-plans                                       +1859 B  (+0.4%)     +627 B  (+0.4%)
async-load-signup-steps-page-picker                                 +1859 B  (+0.8%)     +627 B  (+0.8%)
async-load-signup-steps-p2-site                                     +1859 B  (+0.8%)     +627 B  (+0.8%)
async-load-signup-steps-p2-join-workspace                           +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-p2-get-started                              +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-p2-details                                  +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-p2-confirm-email                            +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-p2-complete-profile                         +1859 B  (+0.6%)     +627 B  (+0.7%)
async-load-signup-steps-new-or-existing-site                        +1859 B  (+0.8%)     +627 B  (+0.9%)
async-load-signup-steps-intent                                      +1859 B  (+0.8%)     +627 B  (+0.9%)
async-load-signup-steps-emails                                      +1859 B  (+0.8%)     +627 B  (+0.8%)
async-load-signup-steps-domains                                     +1859 B  (+0.3%)     +627 B  (+0.4%)
async-load-signup-steps-difm-site-picker                            +1859 B  (+0.6%)     +627 B  (+0.6%)
async-load-signup-steps-design-picker                               +1859 B  (+0.7%)     +627 B  (+0.8%)
async-load-signup-steps-creds-permission                            +1859 B  (+0.8%)     +627 B  (+0.8%)
async-load-signup-steps-creds-confirm                               +1859 B  (+0.8%)     +627 B  (+0.8%)
async-load-signup-steps-creds-complete                              +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-courses                                     +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-clone-start                                 +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-clone-ready                                 +1859 B  (+0.8%)     +627 B  (+0.8%)
async-load-signup-steps-clone-point                                 +1859 B  (+0.5%)     +627 B  (+0.6%)
async-load-signup-steps-clone-jetpack                               +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-clone-destination                           +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-clone-credentials                           +1859 B  (+0.7%)     +627 B  (+0.8%)
async-load-signup-steps-clone-cloning                               +1859 B  (+0.9%)     +627 B  (+0.9%)
async-load-signup-steps-add-ons                                     +1859 B  (+0.8%)     +627 B  (+0.8%)
async-load-quick-language-switcher                                  +1859 B  (+0.7%)     +627 B  (+0.7%)
async-load-design-wordpress-components-gallery                      +1859 B  (+0.2%)     +627 B  (+0.3%)
async-load-design-playground                                        +1859 B  (+0.1%)     +627 B  (+0.1%)
async-load-design-blocks                                            +1859 B  (+0.1%)     +627 B  (+0.1%)
async-load-design                                                   +1859 B  (+0.1%)     +627 B  (+0.1%)
async-load-calypso-lib-account-settings-helper                      +1859 B  (+0.6%)     +627 B  (+0.6%)
async-load-calypso-components-sites-popover                         +1859 B  (+0.6%)     +627 B  (+0.6%)
async-load-calypso-blocks-jitm-templates-modal                      +1859 B  (+1.0%)     +627 B  (+1.0%)
async-load-calypso-blocks-inline-help-popover                       +1859 B  (+0.2%)     +627 B  (+0.3%)
async-load-automattic-help-center                                   +1859 B  (+0.3%)     +627 B  (+0.3%)

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.

[and1can]

Left some questions about SASS and testing.

[miksansegundo]

@Automattic/lego I added a video and more details in the description. It's ready for review!

[miksansegundo]

@davewhitley @Automattic/lego Initially, I wasn't going to include the notice when a section pattern is removed but I decided to include it for testing. Also, for the same reason, this PR shows a notice when the header or footer pattern is added, replaced, or removed.

While using the category name makes sense for section patterns because it's the name shown in the list, in the case of the header and footer patterns, using the category name Headers and Footers is a bit confusing. What are your thoughts on this?

For headers and footers, we could add an exception to use the singular in the notice Pattern "Header" added..

Another idea is adding from category before the category name: Pattern from category "Headers" added..

The editor uses the pattern name in the notice, we could use Pattern "Centered header" added.

[arthur791004]

LGTM 👍

[davewhitley]

Should we use "inserted" here instead instead of "added"?

[miksansegundo]

Should we use "inserted" here instead instead of "added"?

Yes, I'll follow up with other PR to update that copy in all the areas.

[autumnfjeld]

@miksansegundo Some questions/comments:

1. Copy change: Image pattern inserted. (which is a short form of the complete sentence "You've inserted an image pattern." Or "An image pattern has been inserted."

• Don't use quotes, they aren't needed.

2. For consistency I think it is nice to also show the snack bar for Header & Footer. Following what @davewhitley suggested in p1679589621328049/1679571847.256539-slack-C048CUFRGFQ copy should be:

   • Header inserted.
   • Footer inserted.

3. I wonder-should we wait and ship this until after we get the thumbnail list in place? Then the snackbar can say the actual pattern name and not the category.

Regardless, once we replace the text list of sections patterns with a thumbnail list, then the snackbars should use the pattern name as we are not constricted by space.

[miksansegundo]

@autumnfjeld thanks for the feedback.

I've updated the copy to use the same convention already used in the editor: Block pattern "Name" inserted..

[a8ci18n]

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

Hi @miksansegundo, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

• Block pattern "%(patternName)s" inserted.
• Block pattern "%(patternName)s" replaced.
• Block pattern "%(patternName)s" removed.

Thank you in advance!

[a8ci18n]

Translation for this Pull Request has now been finished.