Add Stock photo caption and include it when uploading a photo

[fluiddot]

Issue: wordpress-mobile/gutenberg-mobile#1609

Related PRs

• gutenberg-mobile
• gutenberg
• WordPress-iOS
• WordPress-FluxC-Android

Description

Parse caption field from the response of Stock media search requests and add it to the Stock media model and item. This field is now also included in the payload when a photo is uploaded.

Test

WellSQL migrations

Verify migrations

Steps

• Apply this version over current version of app
• Ensure the app still runs and activity log doesn't crash
• Apply this version as a fresh install
• Ensure the app still runs and activity log doesn't crash

User flows

Test scenarios - Site types:

• Regular WP.com site: No issues ✅
• Atomic WP.com site: Issues ❌
  • Caption value is not shown after uploading a stock photo: For some reason the upload response is not returning the caption value, it's only shown after refreshing the items. This is also happening in the web version, on Android the value from the upload response is used as the caption of the Image block so it won't be included.
• Self-hosted (without Jetpack): Free photo library (Stock photos) is not available ✅
• Self-hosted (with Jetpack): Issues (same issue as Atomic WP.com, probably related to Jetpack) ❌

The changes can be tested in the following described flows:

Media screen

Steps

1. Go to a site.
2. Tap on Media button.
3. Tap on + button.
4. Tap on Choose from Free Photo Library
5. Search any term.
6. Tap one or multiple photos.
7. Tap on ✔️ button.
8. Wait for the items to be uploaded.
9. [Back in the Media screen] Tap on any of the recently uploaded photos.
10. Check that Caption field has value.

Note: It's possible that in some cases the item doesn't have a caption value with the credit/attribution of the photo. In this case try another one.

Image block / Free Photo Library

Steps

1. Go to a site.
2. Open a post/page.
3. Tap on + button.
4. Tap on Image block.
5. Tap on ADD IMAGE.
6. Tap on Choose from Free Photo Library
7. Search any term.
8. Tap one photo.
9. Tap on ✔️ button.
10. Wait for the item to be uploaded.
11. Check that below the photo the caption field has a value.

Note: It's possible that in some cases the item doesn't have a caption value with the credit/attribution of the photo. In this case try another one.

Image block / Insert multiple images from Media library

Steps

1. Go to a site.
2. Tap on Media button.
3. Tap on + button.
4. Tap on Choose from Free Photo Library
5. Search any term.
6. Tap multiple photos.
7. Tap on ✔️ button.
8. Wait for the items to be uploaded.
9. Go to a post/page.
10. Tap on + button.
11. Tap on Image block.
12. Tap on ADD IMAGE.
13. Tap on WordPress Media Library
14. Tap on the photos previously uploaded.
15. An image block is created for each photo.
16. Only the first image block has a caption value, the rest are empty ❌

Note: It's possible that in some cases the item doesn't have a caption value with the credit/attribution of the photo. In this case try another one.

Screenshots

Media screen

media-screen-android.mp4

Image block

image-block-android.mp4

Image block / Insert multiple images from Media library

image-block-multiple-android.mp4

---

Merge Instructions:
Only merge after FluxC PR is merged and tagged, this PR will be updated with correct FluxC version and merged to develop.

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.

[jd-alexander]

Thanks for these changes @fluiddot I tested this utilizing the instructions you provided and I was able to reproduce the described behavior. This is good to go once the FluxC PR has been approved and merged in and a new tag has been created based on the version bump. So that change will need to take place before this PR's approval.

[jd-alexander]

@fluiddot FluxC PR has been approved via wordpress-mobile/WordPress-FluxC-Android#1846 (review)

You may now mark them as "Ready For Review" if you see fit 🙇

[fluiddot]

I'm going to keep this PR in draft because I spotted a new flow that is not working properly. Once I fix it I'll let you know for another review, thanks!

Insert multiple images from Media library

1. Go to a site.
2. Tap on Media button.
3. Tap on + button.
4. Tap on Choose from Free Photo Library
5. Search any term.
6. Tap multiple photos.
7. Tap on ✔️ button.
8. Wait for the items to be uploaded.
9. Go to a post/page.
10. Tap on + button.
11. Tap on Image block.
12. Tap on ADD IMAGE.
13. Tap on WordPress Media Library
14. Tap on the photos previously uploaded.
15. An image block is created for each photo.
16. Only the first image block has a caption value, the rest are empty

[fluiddot]

The issue related to inserting multiple images from Media library is fixed 🎊 .

Unfortunately I found out a new issue related to sites with Jetpack, on those sites the caption value is not shown after uploading a stock photo. This means that these changes will only work for regular WP.com sites.

The main goal of this PR is to fix the issue about including the photo credit as caption when adding an image from Free Photo library, however these changes will only work for regular WP.com sites, not the ones with Jetpack like Atomic or self-hosted.

Not sure if we should block this PR until that is fixed or continue and leave it as an opened issue. What do you think @jd-alexander about the issue?.

[peril-wordpress-mobile]

	Warnings
⚠️	PR is not assigned to a milestone.

Generated by 🚫 dangerJS

[jd-alexander]

Thanks @fluiddot I will take a look at this tomorrow and share my findings :)

[jd-alexander]

@fluiddot I want to reproduce the comment below

Caption value is not shown after uploading a stock photo: For some reason the upload response is not returning the caption value, it's only shown after refreshing the items. This is also happening in the web version, on Android the value from the upload response is used as the caption the Image block so it won't be included.

So I am on an Atomic site and I am wondering how I recreate this. I added a photo from the device storage and the camera and both didn't have a caption but I am assuming that I have to add it. I haven't explored that in totality as yet as I thought it would be better to just await your comment.

on Android the value from the upload response is used as the caption the Image block so it won't be included.

Could you expound a bit more on this comment? the part that says "caption the Image block" isn't clear to me. I am going to sync up with you online to go through this issue more thoroughly.

I tested the behavior on a WP.com site and the functionality works as expected.

I wanted to also verify something about the Atomic site. How did you go about creating it? I assumed that they are created utilizing the normal WP.com site creation flow but once you add plugins then that's an Atomic site. Let me know the steps you followed.

[fluiddot]

Thanks @jd-alexander for testing it 😊 !

So I am on an Atomic site and I am wondering how I recreate this. I added a photo from the device storage and the camera and both didn't have a caption but I am assuming that I have to add it. I haven't explored that in totality as yet as I thought it would be better to just await your comment.

The caption field is only included when uploading a photo from the Free Photo Library (Pexels - https://www.pexels.com/), it takes the caption from the photo when is fetched from Pexels and is included in the upload in the caption field.

For reproducing the issue, when you you add a photo tap on Choose from Free Photo Library from the picker instead.

Could you expound a bit more on this comment? the part that says "caption the Image block" isn't clear to me. I am going to sync up with you online to go through this issue more thoroughly.

Yeah sorry, I typed it wrong 😄 , what I meant is that on Android the caption value that is returned from the upload response is used as the caption value of the Image block.

The caption value of the Image block I was referring is the following one:

I tested the behavior on a WP.com site and the functionality works as expected.

On regular WP.com sites it works as expected, the problem is on Atomic or self-hosted sites with Jetpack, although I haven't checked it yet, my impression is that is related somehow with Jetpack.

I wanted to also verify something about the Atomic site. How did you go about creating it? I assumed that they are created utilizing the normal WP.com site creation flow but once you add plugins then that's an Atomic site. Let me know the steps you followed.

Yeah exactly, an Atomic site is automatically created when you add a plugin on a WP.com site with a Business plan. Another options is to create a self-hosted site with https://jurassic.ninja/ and connect Jetpack.