Gutenberg-mobile: Image block fails to load images on private sites

[koke]

This is WordPress.com specific, but on private sites, Gutenberg won't be able to load any images in the editor as those require authentication.

We need to figure out how networking will work before tackling this one

[etoledom]

I was thinking on letting the parents app manage Image downloading/uploading, authentication and caching with the code that is already in place, and then give back a local URL to RN to show the already downloaded image.

Not sure if it's the best approach, but it will save us from rewriting all that code.

What do you think?

[koke]

I think for images we’ll have to do some of that for #206 anyway.

I wonder if react native offers a way to customize their image loader instead of having to wrap the image component with custom logic

[marecar3]

Hey @SergioEstevao, we need to tackle this one also.

[koke]

I moved this to nice to have since its low reach and I expected not a trivial effort: we will have to figure out how to authenticate image requests. Unless this is much easier than I anticipated, I’d leave it as a nice to have

[marecar3]

Hey @koke, thanks for the update.
@SergioEstevao do you maybe think of some rough estimation for this one? WDYT? Thanks.

[hypest]

I added the "Needs Android dev" label since apparently we're only missing the functionality in the Android side now.

[designsimply]

I ran into this problem while testing WPiOS 12.1 beta. I only had trouble viewing images added through the "Take Photo" flow for private sites on WordPress.com—the other upload flows such as "Choose photo from device" worked normally.

Steps to reproduce:

1. Start logged in to the app with an account that has a WordPress.com private blog.
2. Go to Me > App Settings and toggle "Use Block Editor" on.
3. Go to the private site > Media > + > Take photo.
4. Take a photo and wait for it to upload.
5. Tap on "Write Post."
6. Try to view the image in the post.
7. Give the post a title and publish it.
8. Try switching back and forth from the HTML to Visual views.
9. View the post in a browser and note the image is there.
10. View the post in Blog Posts and note the image is there.
11. Go back to the block editor and try to view the image in the post again.

Result: images uploaded to private WordPress.com blogs via Media > + > Take photo show up as a large icon in the block editor instead of showing an image. (1m57s)

^{Tested with WPAndroid alpha-159 (12.1 alpha) on Pixel 3 Android 9 to madefortesting190313.wordpress.com.}

App logs for reference:

WordPress - alpha-159 - Version code: 699
Android device name: Google Pixel 3

01 - [Mar-29 22:36 STATS] 🔵 Tracked: application_opened
02 - [Mar-29 22:36 READER] notifications update job service > job scheduled
03 - [Mar-29 22:36 STATS] Number of old stats deleted : 0
04 - [Mar-29 22:36 NOTIFS] notifications update job service > created
05 - [Mar-29 22:36 NOTIFS] notifications update service > completed
06 - [Mar-29 22:36 NOTIFS] notifications update job service > all tasks completed
07 - [Mar-29 22:36 NOTIFS] notifications update job service > destroyed
08 - [Mar-29 22:36 API] Dispatching action: PostAction-UPDATE_POST
09 - [Mar-29 22:36 API] Dispatching action: ListAction-LIST_ITEMS_CHANGED
10 - [Mar-29 22:36 API] Dispatching action: PostAction-UPDATE_POST
11 - [Mar-29 22:36 API] Dispatching action: ListAction-LIST_ITEMS_CHANGED
12 - [Mar-29 22:36 STATS] 🔵 Tracked: editor_post_updated, Properties: {"blog_id":159662180,"post_id":43,"has_gutenberg_blocks":true,"is_jetpack":false}
13 - [Mar-29 22:36 MAIN] UploadService > Created
14 - [Mar-29 22:36 MEDIA] MediaUploadHandler > Created
15 - [Mar-29 22:36 POSTS] PostUploadHandler > Created
16 - [Mar-29 22:36 API] Dispatching action: PostAction-PUSH_POST
17 - [Mar-29 22:36 UTILS] trackLastActivity, activityId: Post List
18 - [Mar-29 22:36 POSTS] unknown shortcode - WordPress
19 - [Mar-29 22:36 API] Dispatching action: UploadAction-PUSHED_POST
20 - [Mar-29 22:36 API] Dispatching action: PostAction-PUSHED_POST
21 - [Mar-29 22:36 API] Dispatching action: ListAction-LIST_ITEMS_CHANGED
22 - [Mar-29 22:36 POSTS] PostUploadHandler > Completed
23 - [Mar-29 22:36 MAIN] UploadService > Completed
24 - [Mar-29 22:36 MAIN] UploadService > Destroyed
25 - [Mar-29 22:36 API] Dispatching action: PostAction-FETCH_POST_LIST
26 - [Mar-29 22:36 POSTS] unknown shortcode - WordPress
27 - [Mar-29 22:36 POSTS] unknown shortcode - WordPress
28 - [Mar-29 22:36 POSTS] unknown shortcode - WordPress
29 - [Mar-29 22:36 API] Dispatching action: PostAction-FETCHED_POST_LIST
30 - [Mar-29 22:36 API] Dispatching action: ListAction-FETCHED_LIST_ITEMS
31 - [Mar-29 22:36 POSTS] unknown shortcode - WordPress
32 - [Mar-29 22:36 STATS] 🔵 Tracked: editor_closed
33 - [Mar-29 22:36 STATS] 🔵 Tracked: post_list_button_pressed, Properties: {"blog_id":159662180,"post_id":43,"action":"view","is_jetpack":false}
34 - [Mar-29 22:36 UTILS] No valid URLs passed to URLFilteredWebViewClient! HTTP Links in the page are NOT disabled, and ALL URLs could be loaded by the user!!
35 - [Mar-29 22:36 UTILS] App goes to background
36 - [Mar-29 22:36 STATS] 🔵 Tracked: application_closed, Properties: {"last_visible_screen":"Post List","time_in_app":14}
37 - [Mar-29 22:36 MAIN] ConnectionChangeReceiver successfully unregistered
38 - [Mar-29 22:36 UTILS] App comes from background
39 - [Mar-29 22:36 STATS] 🔵 Tracked: application_opened
40 - [Mar-29 22:36 READER] notifications update job service > job scheduled
41 - [Mar-29 22:36 NOTIFS] notifications update job service > created
42 - [Mar-29 22:36 NOTIFS] notifications update service > completed
43 - [Mar-29 22:36 NOTIFS] notifications update job service > all tasks completed
44 - [Mar-29 22:36 NOTIFS] notifications update job service > destroyed
45 - [Mar-29 22:36 UTILS] trackLastActivity, activityId: Post List
46 - [Mar-29 22:37 UTILS] trackLastActivity, activityId: My Site
47 - [Mar-29 22:37 API] Dispatching action: AccountAction-FETCH_ACCOUNT
48 - [Mar-29 22:37 PROFILING] Visual Editor Startup: begin
49 - [Mar-29 22:37 PROFILING] Visual Editor Startup: 0 ms, EditorFragment.onCreate
50 - [Mar-29 22:37 PROFILING] Visual Editor Startup: 185857 ms, WPMainActivity.onResume
51 - [Mar-29 22:37 PROFILING] Visual Editor Startup: end, 185857 ms
52 - [Mar-29 22:37 API] Dispatching action: AccountAction-FETCHED_ACCOUNT
53 - [Mar-29 22:37 UTILS] trackLastActivity, activityId: Site Picker
54 - [Mar-29 22:37 UTILS] trackLastActivity, activityId: My Site
55 - [Mar-29 22:37 API] Dispatching action: AccountAction-FETCH_ACCOUNT
56 - [Mar-29 22:37 API] Dispatching action: AccountAction-FETCHED_ACCOUNT
57 - [Mar-29 22:37 STATS] 🔵 Tracked: site_menu_opened, Properties: {"blog_id":159662180,"is_jetpack":false,"menu_item":"posts"}
58 - [Mar-29 22:37 API] Dispatching action: PostAction-FETCH_POST_LIST
59 - [Mar-29 22:37 UTILS] trackLastActivity, activityId: Post List
60 - [Mar-29 22:37 POSTS] unknown shortcode - WordPress
61 - [Mar-29 22:37 API] Dispatching action: PostAction-FETCHED_POST_LIST
62 - [Mar-29 22:37 API] Dispatching action: ListAction-FETCHED_LIST_ITEMS
63 - [Mar-29 22:37 POSTS] unknown shortcode - WordPress
64 - [Mar-29 22:37 STATS] 🔵 Tracked: post_list_item_selected, Properties: {"blog_id":159662180,"post_id":43,"has_gutenberg_blocks":true,"action":"edit","is_jetpack":false}
65 - [Mar-29 22:37 STATS] 🔵 Tracked: editor_opened, Properties: {"blog_id":159662180,"post_id":43,"has_gutenberg_blocks":true,"is_jetpack":false}
66 - [Mar-29 22:37 UTILS] trackLastActivity, activityId: Post Editor
67 - [Mar-29 22:37 API] Dispatching action: SiteAction-FETCH_POST_FORMATS
68 - [Mar-29 22:37 API] Dispatching action: TaxonomyAction-FETCH_CATEGORIES
69 - [Mar-29 22:37 API] Dispatching action: PostAction-FETCH_REVISIONS
70 - [Mar-29 22:37 API] Dispatching action: SiteAction-FETCHED_POST_FORMATS
71 - [Mar-29 22:37 POSTS] Post formats successfully fetched!
72 - [Mar-29 22:37 API] Dispatching action: TaxonomyAction-FETCHED_TERMS
73 - [Mar-29 22:37 API] Dispatching action: PostAction-FETCHED_REVISIONS
74 - [Mar-29 22:37 STATS] 🔵 Tracked: editor_session_start, Properties: {"has_unsupported_blocks":"0","editor":"gutenberg","content_type":"gutenberg","session_id":"b7e06736-369c-4a45-b4cb-e04ee495b1be","post_type":"post","blog_type":"wpcom"}
75 - [Mar-29 22:37 API] Dispatching action: PostAction-UPDATE_POST
76 - [Mar-29 22:37 API] Dispatching action: ListAction-LIST_ITEMS_CHANGED
77 - [Mar-29 22:37 UTILS] App goes to background
78 - [Mar-29 22:37 STATS] 🔵 Tracked: application_closed, Properties: {"last_visible_screen":"Post Editor","time_in_app":55}
79 - [Mar-29 22:37 MAIN] ConnectionChangeReceiver successfully unregistered
80 - [Mar-29 22:38 UTILS] App comes from background
81 - [Mar-29 22:38 STATS] 🔵 Tracked: application_opened
82 - [Mar-29 22:38 READER] notifications update job service > job scheduled
83 - [Mar-29 22:38 NOTIFS] notifications update job service > created
84 - [Mar-29 22:38 NOTIFS] notifications update service > completed
85 - [Mar-29 22:38 NOTIFS] notifications update job service > all tasks completed
86 - [Mar-29 22:38 NOTIFS] notifications update job service > destroyed
87 - [Mar-29 22:38 UTILS] trackLastActivity, activityId: Post List
88 - [Mar-29 22:38 POSTS] unknown shortcode - WordPress
89 - [Mar-29 22:38 STATS] 🔵 Tracked: editor_closed
90 - [Mar-29 22:38 UTILS] trackLastActivity, activityId: My Site
91 - [Mar-29 22:38 API] Dispatching action: AccountAction-FETCH_ACCOUNT
92 - [Mar-29 22:38 PROFILING] Visual Editor Startup: begin
93 - [Mar-29 22:38 PROFILING] Visual Editor Startup: 0 ms, EditorFragment.onCreate
94 - [Mar-29 22:38 PROFILING] Visual Editor Startup: 44457 ms, WPMainActivity.onResume
95 - [Mar-29 22:38 PROFILING] Visual Editor Startup: end, 44457 ms
96 - [Mar-29 22:38 API] Dispatching action: AccountAction-FETCHED_ACCOUNT
97 - [Mar-29 22:38 UTILS] trackLastActivity, activityId: Me
98 - [Mar-29 22:38 STATS] 🔵 Tracked: me_tab_accessed
99 - [Mar-29 22:38 UTILS] trackLastActivity, activityId: Help Screen

^{(internal reference: p5T066-Nw-p2#comment-2668)}

[hypest]

Thanks for the report @designsimply ! The Android side fix (https://github.com/wordpress-mobile/WordPress-Android/pull/9483) was merged a few days ago and is not part of the 12.1 release of wpandroid. It will be in the next release though.

In the meantime, @marecar3 will you be able to test out the steps reported by Sheri above against the fix just to make sure the case is covered?

[marecar3]

Hey, @hypest I have tested the above scenario against latest WPAndroid develop and I can say that it works. However, I have noticed another bug, which isn't related to Gutenberg editor. If you click on Preview post, it will open the post but the image won't be loaded. We will raise that bug as a separate issue.

[designsimply]

@marecar3 I tested with WPAndroid alpha-163 (12.2 alpha) on Pixel 3 Android 9 and WP Internal 12.2.0.20190412 on iPhone 6S iOS 12.2 just now and found that images uploaded to a private WP.com site with the "Take photo" option displayed the images normally in a preview. LGTM.

^{(although I will also note that I came 'round to check on this because a user reported something similar in 1933939-zen—since I was unable to confirm that in a test, I'll wait for another report or confirmation before reporting this separately)}

[marecar3]

Thanks @designsimply ! :)