MU WPCOM: Port the wpcom block editor nux feature from the ETK

[lsl]

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

• 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

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]

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.

[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

[okmttdhr]

Tested and ensured the following works well on an Atomic site

• Welcome Tour ✅
• Blogging prompts modal ✅
• Purchase notice (Payments block) ✅
• Sharing modal ✅

Will test the following;

• Draft post modal & First post published modal
• Seller celebration modal -> Tested and worked well ✅
• Video celebration modal -> Tested and worked well ✅

[okmttdhr]

• Go to /wp-admin/post-new.php?showDraftPostModal=true
• Go to /start/setup-site?siteSlug=<your_site>
• Select write intent and you'll redirect to the post editor
• Verify write your post modal show. If it's not shown, go to /wp-admin/post.php?showDraftPostModal=true directly. It doesn't work if you go through the onboarding flow with the "write" intent now...

* Note that if it's still not shown, open the "Welcome Guide" manually because we want to display it and hide the Welcome Guide the first time and then display the Welcome Guide after you refresh the page.

hmm, I could not display the modal even in production.
I selected the intent, made sure I hid the Welcome Modal, and then visited both /wp-admin/post-new.php?showDraftPostModal=true and /wp-admin/post.php?showDraftPostModal=true but nothing appeared. 🤔

[arthur791004]

hmm, I could not display the modal even in production.

Yes. It's buggy on production as the showDraftPostModal flag doesn't pass to the editor correctly.

made sure I hid the Welcome Modal

Sorry for not being clear. I mean you have to open the Welcome Guide if it's not shown because they share the same toggle 😓

[okmttdhr]

hmm, I could not display the modal even in production.
Yes. It's buggy on production as the showDraftPostModal flag doesn't pass to the editor correctly.

I'm not sure if I can approve this PR, but if it's unstable in production, I guess we can merge it?
It would be good to have a separate issue for this buggy modal (maybe in One Board?).

[arthur791004]

It would be good to have a separate issue for this buggy modal (maybe in One Board?).

Yes. It will raise another PR to fix it!

[arthur791004]

I'm not sure if I can approve this PR, but if it's unstable in production, I guess we can merge it?
It would be good to have a separate issue for this buggy modal (maybe in One Board?).

Sorry, I realized I was wrong. Referring to Automattic/wp-calypso#57019, the modal is shown only when you land on the post editor through the “Choose a design” since it's unclear for users why they land on the post editor after selecting a design.

So, the correct steps are

1. Create a new site
2. Select the "Write & Publish" goal
3. Select the "Choose a design" starting point
4. You will see the modal when you land on the post editor

[okmttdhr]

Thanks for the update @arthur791004!

Here's my testing result:

1. Created a new site
2. Selected the "Write & Publish" goal
3. Selected the "Choose a design" starting point
4. Sandboxed the newly created site right before landing on the post editor
5. Landed on the post editor and confirmed wpcom-block-editor-nux was from jetpack-mu-wpcom
6. I could not observe the "Write your first post" modal 🙄
7. Published the post
8. Observed the "First post published modal" ✅

[okmttdhr]

I could not observe the "Write your first post" modal 🙄

The modal does not seem to display even in production (i.e., ETK), too. 😶‍🌫️

[arthur791004]

I could not observe the "Write your first post" modal 🙄

hmmm...it's weird that I can see the modal by either ETK or jetpack-mu-wpcom 🤔

[fushar]

I can't also see any modal in production following the above steps 😂

[arthur791004]

Am I missing to mention something 🤔

Screen.Recording.2024-07-30.at.4.50.46.PM.mov

[okmttdhr]

Could you go to the Site Editor on any of your sites to open the Welcome Guide and then follow the steps below to see whether the modal is shown? 🙏

After opening the Welcome Modal and following the steps, I finally succeeded in testing the "Write your first post" modal! Thank you for your work covering all the scenarios.

[okmttdhr]

I believe we're good to go 🙏 🚀