MU WPCOM: Port the wpcom block editor nux feature from the ETK (2nd try)

[arthur791004]

Related https://github.com/Automattic/dotcom-forge/issues/8241, Automattic/wp-calypso#92861

Proposed changes:

Tip

Changes are too large because I copied wpcom-block-editor-nux, dotcom-fse/lib and @automattic/tour-kit into jetpack-mu-wpcom

It would be better to follow the Test Instructions below to check whether the functionalities work as expected or not

UPDATED (2nd try)

• Resolve p1722523924373239/1722523002.749599-slack-C02DQP0FP
  • The “Next Steps” button - 1e63416
  • In the editor, images are loaded from the CDN (s0.wp.com) in production

---

• Migrates wpcom-block-editor-nux to jetpack-mu-wpcom
• Resolved the @automattic/tour-kit dependency as follows:
  • The following packages are outdated so we have to release the new packages to resolve the peer dependencies issue
    • @automattic/components
    • @automattic/tour-kit
    • @automattic/viewport-react
  • However, I found we cannot introduce the @automattic/components to the jetpack-mu-wpcom because:
    • It requires @automattic/calypso-analytics package that uses the EventEmitter from the events package. I'm unsure whether to introduce the events package on the browser side.
    • It requires i18n-calypso package, and the issue is the same as above.
    • It requires @emotion/* packages that are used by the following components and I don't think it makes sense to introduce the whole @emotion/* packages for this purpose.
      • LoadingPlaceholder
      • SiteThumbnail
      • UpsellMenuGroup
  • Next, I found the @automattic/tour-kit is only used by the wpcom-block-editor-nux, so I decided to move the whole package to jetpack-mu-wpcom to get rid of those dependencies
  • Finally, just copied the following components to jetpack-mu-wpcom because I think they are not too complicated
    • PaginationControl
    • ClipboardButton
    • FormInputCheckbox
    • FormLabel
• Resolved the recordTracksEvent call
  • Replaced the recordTracksEvent with the wpcomTrackEvent as we did for other migrations
• Got rid of the type definition to remove the following dependencies
  • @automattic/onboarding
  • starter-page-templates/store
  • wpcom-block-editor-nav-sidebar/src/store

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Before getting started, you have to

• Apply changes to your sites
• Sandbox your API and ensure your siteSlug domain points to your sandbox for simple sites

UPDATED (2nd try)

• Follow “Draft post modal & First post published modal” to ensure you can see the image and the “Next Steps” button on the first post published modal
  

---

Welcome Tour

• Go to the Editor
• Make sure the Welcome Tour works as before
  

Blogging prompts modal

• Go to /wp-admin/post-new.php?new_prompt=true
• Make sure you can see the blogging prompts modal
  

Purchase notice (Payments block)

• Go to /wp-admin/post-new.php?notice=purchase-success
• Make sure you can see the purchase notice
  

Draft post modal & First post published modal - Only for the "write" intent

• Create a new site
• Select the "Write & Publish" goal
• Select the "Choose a design" starting point
• Verify write your post modal show
  
• Publish the post
• Verify the first post published modal show (the "write" intent only)
  

Seller celebration modal - Only for the "sell" intent

• Go to /setup?siteSlug=your_site
• Select the Sell online
• After the onboarding, go to create a new page
• Insert any payment blocks and save
  • Paid Content
  • Pay with PayPal
  • Payment Buttons
• Make sure you can see the seller celebration modal
  

Sharing modal - Not for the start-writing or design-first intent

• Go to /wp-admin/post-new.php to create a new post on your PUBILC site
• Publish the post
• Make sure you can see the sharing modal
  

Video celebration modal - Only for the "videopress" intent

• Start the flow at /setup/videopress
• When you land on the Site Editor, upload a video and save
• Make sure you can see the video celebration modal
  
• Note that the modal doesn't seem to work on atomic sites as it requests the /sites/:site endpoint to get the value of options?.launchpad_checklist_tasks_statuses?.video_uploaded from the response to check whether the video has been uploaded

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the wpcom-block-editor-nux branch.

  • For jetpack-mu-wpcom changes, also add define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); to your wp-config.php file.

• To test on Simple, run the following command on your sandbox:

  bin/jetpack-downloader test jetpack wpcom-block-editor-nux
  

  bin/jetpack-downloader test jetpack-mu-wpcom-plugin wpcom-block-editor-nux
  

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team Review" label and ask someone from your team review the code. Once reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

[arthur791004]

@taipeicoder I made a change to fix the image is broken because they are loaded from the CDN (s0.wp.com) in production by default. Could you take another look? Thank you!

[taipeicoder]

Works as intended 👍