[Site Design Revamp] Remove preview mode selector from nav bar

[twstokes]

• Item A Subtask of [Site Design Revamp] Main View Updates #18433
• Related PR: Remove event for tapping the mode button on the design view WordPress-iOS-Shared#309

This PR:

• Removes the mode selector from the nav bar on the Site Design screen
• Enforces mobile-sized thumbnails for all devices

Before - iPhone	After - iPhone

Before - iPad	After - iPad

To test:

Mobile thumbnails - Phone

1. Using a phone, start the Site Creation Flow and navigate to the Site Design screen
2. Expect thumbnails to be screenshots of the mobile layout
3. Select a design and tap the "Preview" button
4. Expect preview to be in the mobile layout
5. Tap the device mode picker at the top right and confirm that the mode is set to Mobile
6. Tap Tablet to switch to the tablet mode
7. Expect preview to be in the tablet layout
8. Dismiss the preview
9. Expect thumbnails to be screenshots of the mobile layout (they did not switch to tablet layout)
10. Select a design and tap the "Preview" button
11. Expect preview to be in the tablet layout (the Preview view retained the last layout mode)

Mobile thumbnails - iPad

1. Using an iPad, start the Site Creation Flow and navigate to the Site Design screen
2. Expect thumbnails to be screenshots of the mobile layout (not tablet)
3. Select a design and tap the "Preview" button
4. Expect preview to be in the tablet layout
5. Tap the device mode picker at the top right and confirm that the mode is set to Tablet
6. Tap Mobile to switch to the mobile mode
7. Expect preview to be in the mobile layout
8. Dismiss the preview
9. Expect thumbnails to be screenshots of the mobile layout (they did not switch to tablet layout)
10. Select a design and tap the "Preview" button
11. Expect preview to be in the mobile layout (the Preview view retained the last layout mode)

Tracks events - Phone

1. Using a phone, start the Site Creation Flow and navigate to the Site Design screen
2. Expect enhanced_site_creation_site_design_viewed to be fired with preview_mode set to mobile
3. Select a design and tap the "Preview" button
4. Expect enhanced_site_creation_site_design_preview_viewed to be fired with preview_mode set to mobile and template set to the corresponding design
5. Expect enhanced_site_creation_site_design_preview_loading to be fired with preview_mode set to mobile and template set to the corresponding design
6. Expect enhanced_site_creation_site_design_preview_loaded to be fired with preview_mode set to mobile and template set to the corresponding design
7. Tap the device mode picker at the top right and switch to Tablet
8. Expect enhanced_site_creation_site_design_preview_mode_button_tapped to be fired with preview_mode set to mobile
9. Expect enhanced_site_creation_site_design_preview_mode_changed to be fired with preview_mode set to tablet
10. Expect enhanced_site_creation_site_design_preview_loading to be fired with preview_mode set to tablet and template set to the corresponding design
11. Expect enhanced_site_creation_site_design_preview_loaded to be fired with preview_mode set to tablet and template set to the corresponding design
12. Tap "Create Site" (the button may say "Choose" depending on Site Name treatment)
13. Expect enhanced_site_creation_site_design_selected to be fired with template set to the corresponding design

Tracks events - iPad

1. Using an iPad, start the Site Creation Flow and navigate to the Site Design screen
2. Expect enhanced_site_creation_site_design_viewed to be fired with preview_mode set to mobile
3. Select a design and tap the "Preview" button
4. Expect enhanced_site_creation_site_design_preview_viewed to be fired with preview_mode set to mobile and template set to the corresponding design
5. Expect enhanced_site_creation_site_design_preview_loading to be fired with preview_mode set to mobile and template set to the corresponding design
6. Expect enhanced_site_creation_site_design_preview_loaded to be fired with preview_mode set to mobile and template set to the corresponding design
7. Tap the device mode picker at the top right and switch to Mobile
8. Expect enhanced_site_creation_site_design_preview_mode_button_tapped to be fired with preview_mode set to tablet
9. Expect enhanced_site_creation_site_design_preview_mode_changed to be fired with preview_mode set to mobile
10. Expect enhanced_site_creation_site_design_preview_loading to be fired with preview_mode set to mobile and template set to the corresponding design
11. Expect enhanced_site_creation_site_design_preview_loaded to be fired with preview_mode set to mobile and template set to the corresponding design
12. Tap "Create Site" (the button may say "Choose" depending on Site Name treatment)
13. Expect enhanced_site_creation_site_design_selected to be fired with template set to the corresponding design

Regression Notes

1. Potential unintended areas of impact

   • Site Design thumbnails
   • Tracks event sent related to the Site Design view

2. What I did to test those areas of impact (or what existing automated tests I relied on)

   • Manual steps above

3. What automated tests I added (or what prevented me from doing so)

   • Added testSiteDesignPreviewDeviceIsAlwaysMobile

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding unit tests for my changes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[wpmobilebot]

You can test the changes in Jetpack from this Pull Request by:

• Clicking here or scanning the QR code below to access App Center
• Then installing the build number pr18455-49e6b1b on your iPhone

If you need access to App Center, please ask a maintainer to add you.

[wpmobilebot]

You can test the changes in WordPress from this Pull Request by:

• Clicking here or scanning the QR code below to access App Center
• Then installing the build number pr18455-49e6b1b on your iPhone

If you need access to App Center, please ask a maintainer to add you.

[mkevins]

The code changes look good, and this works as expected (tested on iPhone 11, and iPad Pro (12.9-inch) simulator). I had a question about the added test, but it isn't a blocker.

One subtle thing I noticed, that could be different from the Android implementation, is that the selected preview mode in the preview screen gets reset every time it is re-opened (on Android, this is "remembered" when back is pressed, since the underlying state is persisted in the thumbnail screen). I think either behavior is fine, fwiw, and I'm just noting this for completeness.

[twstokes]

The code changes look good, and this works as expected (tested on iPhone 11, and iPad Pro (12.9-inch) simulator). I had a question about the added test, but it isn't a blocker.

One subtle thing I noticed, that could be different from the Android implementation, is that the selected preview mode in the preview screen gets reset every time it is re-opened (on Android, this is "remembered" when back is pressed, since the underlying state is persisted in the thumbnail screen). I think either behavior is fine, fwiw, and I'm just noting this for completeness.

Thanks @mkevins - that's a good observation and a pattern I hadn't considered. I imagine users will want to stick to the preview mode as they try out different designs, so I'm going to update this PR to match that functionality.

[ovitrif]

Just a remark that I can review the additional updates when they are pushed 🙇

[twstokes]

Just a remark that I can review the additional updates when they are pushed 🙇

Thank you @ovitrif! This is ready for review again.

The changes include:

• The Preview view will retain the last mode it was in.
• I removed the testSiteDesignPreviewPreviewDeviceCanBeChanged test as I didn't find as much value in it as originally thought.
• I added steps 10 and 11 to the Thumbnails tests.

[ovitrif]

Great work @twstokes ! 🎉

Works as expected in tests. Let's

[ovitrif]

A few CI checks failed, seems nothing caused by the changes, thus I retriggered them 🤞

[twstokes]

A few CI checks failed, seems nothing caused by the changes, thus I retriggered them 🤞

Thanks @ovitrif for the review and for retriggering the tests! Looks like they're all good now. ✅