[Home Page Picker] Enable the feature

[antonis]

Fixes: wordpress-mobile/gutenberg-mobile#2727

Description

Enables the new Home Page Picker for release

To test:

Note: An easy way to test the analytics is to debug the app and filter Logcat to look for the string 🔵 Tracked:

Start the Home Page Picker screen

1. Start the site creation flow (e.g. Choose site > Add button)
2. Select the Create WordPress.com site option
3. Verify that you see the Choose Design screen
4. In the console expect to see:
   🔵 Tracked: enhanced_site_creation_site_design_viewed

Create a site with the default design

1. Start the Home Page Picker
2. Press SKIP
3. In the console expect to see:
   🔵 Tracked: enhanced_site_creation_site_design_skipped
4. Search for and Choose a domain
5. Tap Create Site
6. Expect Your site to be created with the default design

Create a site with a specific design

1. Start the Home Page Picker
2. Select a design
3. Press Choose
4. In the console expect to see something like (where alves is your selected design):
   🔵 Tracked: enhanced_site_creation_site_design_selected, Properties: {"template":"alves"}
5. Search for and Choose a domain
6. Tap Create Site
7. Expect Your site to be created with the selected design

Error tracking

1. Turn your internet access off (e.g. with flight mode)
2. Start the Home Page Picker
3. In the console expect to see something like:
   🔵 Tracked: enhanced_site_creation_error_shown, Properties: {"error_context":"design","error_description":"Error fetching designs","error_type":"unknown"}

Preview Design

1. Start Home Page Picker
2. Select a design
3. Press the Preview button on the bottom toolbar
4. Verify that the selected design preview loads
5. Verify that the following events are tracked (where alves the design you selected)

🔵 Tracked: enhanced_site_creation_site_design_preview_viewed, Properties: {"template":"alves"}
🔵 Tracked: enhanced_site_creation_site_design_preview_loading, Properties: {"template":"alves"}
🔵 Tracked: enhanced_site_creation_site_design_preview_loaded, Properties: {"template":"alves"}

Choose Design from Preview

1. Follow the Preview Design steps above
2. Press Choose
3. Search and select a domain
4. Select create site
5. Verify that the created site has the selected design
6. Verify that the following events are tracked (where alves the design you selected)

🔵 Tracked: enhanced_site_creation_site_design_preview_viewed, Properties: {"template":"alves"}
🔵 Tracked: enhanced_site_creation_site_design_preview_loading, Properties: {"template":"alves"}
🔵 Tracked: enhanced_site_creation_site_design_preview_loaded, Properties: {"template":"alves"}
🔵 Tracked: enhanced_site_creation_site_design_selected, Properties: {"template":"alves"}

Preview Error

1. Start Home Page Picker
2. Disable the internet connection (e.g. flight mode)
3. Select a design
4. Press the Preview button on the bottom toolbar
5. Verify that that you see the error screen below
6. Enable the network connection
7. Press Retry
8. Verify that the selected design preview loads
9. Verify that the following events are tracked (where alves the design you selected)

🔵 Tracked: enhanced_site_creation_site_design_preview_viewed, Properties: {"template":"alves"}
🔵 Tracked: enhanced_site_creation_error_shown, Properties: {"error_context":"design","error_description":"Preview error","error_type":"internet_unavailable_error"}
🔵 Tracked: enhanced_site_creation_site_design_preview_loading, Properties: {"template":"alves"}
🔵 Tracked: enhanced_site_creation_site_design_preview_loaded, Properties: {"template":"alves"}

Screenshots

Choose Design	Preview Design

PR submission checklist:

• I have considered adding unit tests where possible.
• 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.

[peril-wordpress-mobile]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[peril-wordpress-mobile]

You can test the changes on this Pull Request by downloading the APK here.

[mkevins]

I've retested all flows above, and everything is working as expected. I've also verified the events in both the console as well as the live view, and everything is emitted as expected. 🎉

There are a couple of issues I discovered:

Blank preview after site creation

After creating the site, I observed that sometimes the preview remains blank. I'm unsure why this is, but I have a hunch it happens when using non-WPCOM domains. I also observed this on WordPress-iOS, for a .blog domain, but have not seen this for .com domains in either app.

Unreadable (low-contrast) font in brice theme:

I observed that the brice theme has low-contrast font when opening the home page in the editor. I'm not sure if this is a known issue, and / or if this project is the place to address this. I also haven't tested this with other themes to see if the issue exists elsewhere as well:

[antonis]

Hey @mkevins 👋
thank you for reviewing this 🙇

There are a couple of issues I discovered:

Blank preview after site creation

After creating the site, I observed that sometimes the preview remains blank. I'm unsure why this is, but I have a hunch it happens when using non-WPCOM domains. I also observed this on WordPress-iOS, for a .blog domain, but have not seen this for .com domains in either app.

Unreadable (low-contrast) font in brice theme:

I observed that the brice theme has low-contrast font when opening the home page in the editor. I'm not sure if this is a known issue, and / or if this project is the place to address this. I also haven't tested this with other themes to see if the issue exists elsewhere as well:

I'll try to investigate this on the mobile side. Since the same behaviour is reproduced on iOS too @enejb and @Tug might have a better insight.

[mkevins]

It seems that the low-contrast text issue will be resolved by wordpress-mobile/gutenberg-mobile#2703. I've confirmed this by editing the same page via the test apk in #13279:

🎉 - nice work Gerardo! 😃

[antonis]

Hey @mkevins 👋
I fixed the wrong analytics issue with 816b63b
Thank you for catching this 👍

[mkevins]

Hey @mkevins
I fixed the wrong analytics issue with 816b63b
Thank you for catching this

Thanks for the fast response with a fix! 👍

I've tested w/ the latest changes, and the event is firing as expected now.

[antonis]

I updated the gutenberg-mobile ref (e6560aa) and the Unreadable (low-contrast) font in brice theme issue is fixed.
Thank you @mkevins for tracing this down and @geriux for fixing it 🙇

[geriux]

Hey there 👋 this is looking great nice work! Not sure if its related to this PR but while testing I saw the emojis aren't showing up when I try to create a new page:

Tested it using the latest APK on a Redmi Note 8T Android OS 9

[antonis]

Hey @geriux 👋

Thank you for taking the time to review this 👍 I really appreciate it 🙇

Not sure if its related to this PR but while testing I saw the emojis aren't showing up when I try to create a new page:

This is not part of this PR but It's a problem that should be solved 😄
I wasn't able to reproduce the issue. I even tried devices with really small screen size unsuccessfully. My guess is that the specific devices has special fonts for emojis (I guess it won't be the only one) that need more than the available space. I applied a (blind) fix ea7a157 that allows autosizing of text for the emoji. If/when you have the time please check if this solves the issue with the latest apk.

[geriux]

I wasn't able to reproduce the issue. I even tried devices with really small screen size unsuccessfully. My guess is that the specific devices has special fonts for emojis (I guess it won't be the only one) that need more than the available space. I applied a (blind) fix ea7a157 that allows autosizing of text for the emoji. If/when you have the time please check if this solves the issue with the latest apk.

Thanks for the fix @antonis ! Now they're showing up correctly 🎉

[antonis]

Hello @kyleaparker 👋 ,
thank you for the review and the detailed feedback 🙏

• On the domains screen, remove the ellipsis from the title "Choose a domain ..." (see screenshot below)

This was was due to English resources (non US locale) still having the old wording (Choose a domain name for your site). I updated this for EN_GB/CA/AU and should be ok in the latest build.

• The spacing of the back icon, title, and sub-text is inconsistent between screens.

Aligned with the Choose a design in the latest build

• On a slow connection the homepage images load in one by one. Do we have a skeleton loading state we can use to fade the images in once they're available? I think this would help the loading state feel a bit smoother.

I'll align with @chipsnyder response on this. At this point we have a loading skeleton showing only one thumb while the api call is performed. After that placeholder images are shown while each thumbnail is generating/downloading.

• I'd mentioned this in a previous PR but I think it would be useful to add the Skip option to the domains screen

A separate issue has been created to investigate this further wordpress-mobile/gutenberg-mobile#2828

• I think we should change the wording of the sub-text on the Choose a Design screen from "Pick your favorite homepage layout. You can customize or change it later." to "Pick your favorite homepage layout. You can edit and customize it later." At least until we know which approach we are going to take on switching homepage layouts. cc @iamthomasbishop I'd like to hear your thoughts on changing the wording here.

Changed the wording according to the suggestion in the latest build

[kyleaparker]

Thanks for the reply @antonis, all sounds good to me 👍

[Tug]