Story block: Add more media options to choose from in the editor

[Tug]

Changes proposed in this Pull Request:

This change allows for selecting media in the story block from the same media sources as the gallery block and other visual blocks:

Does this pull request change what data or activity we track or use?

No

Testing instructions:

• Apply this patch on a jetpack site connected to wordpress.com
• Navigate to a post containing a story or create a new story
• Click on Select Media
• Notice Google Photos and Pexels are available and that we can mix media from different sources when editing a story

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello Tug! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D60536-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[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.
  
• ⚠️ All commits were linted before commit.
  
• ✅ 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 🤖

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") 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 you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: June 1, 2021.
• Scheduled code freeze: May 24, 2021.

[aforcier]

I gave this a try, and the first time media are added, it works great! However I ran into some issues when trying to change media several times in one session:

1. Start by adding an empty story block
2. Add media from any source
3. Tap on 'select media' again, and select at least one image from either Google Photos or Pexels
4. The new images are appended correctly, but the previous images become blank
5. Repeat step 3
6. Notice that the new selection was completely ignored

At step 4 I inspected the block, and it looks like this:

<!-- wp:jetpack/story {"mediaFiles":[{},{},{"alt":"lake and mountain","id":296,"type":"image","caption":"Photo by James Wheeler on \u003ca href=\u0022https://www.pexels.com/photo/lake-and-mountain-417074/\u0022 rel=\u0022nofollow\u0022\u003ePexels.com\u003c/a\u003e","url":"https://website.com/wp-content/uploads/2021/04/pexels-photo-417074.jpeg"}]} -->
<div class="wp-block-jetpack-story wp-story"></div>
<!-- /wp:jetpack/story -->

Interestingly, in the gallery block, once media has been added (from any source), it looks like the options for Google Photos and Pexels are removed, and you can only select media from your media gallery. Perhaps we should do the same?

[aforcier]

We should make this a Comment as in the other PR.

[Tug]

Type other is ignored. I can add the Comment prefix as well 👍

[aforcier]

Oh interesting, I didn't know that - is that written down somewhere? I didn't see it in the instructions, maybe they should be updated?

[Tug]

@aforcier Thanks for finding and reporting this bug, I should have noticed 😞 . It's fixed now. I'll give it a more thorough round of testing before putting it back for review (need to test on WPCOM for instance)

[aforcier]

Hey @Tug , I gave this another try, on both Jetpack and WP.com.

Things are working smoothly and the bug seems to be fixed 🎉 I did notice though that the edit button is now text (it used to be a pencil icon before this branch), that seems a bit out of place?

Before:

[aforcier]

I think that's the default media upload button on WPCOM (unrelated to this change). On self-hosted + jetpack site, it should still be a pencil icon

It looks like that may not be the case @Tug - those screenshots were from a self-hosted site. I checked again, this is a WPcom site before and after this branch:

This is a self-hosted site:

Any idea what's going on?

[Tug]

So it wasn't actually related to WPCOM vs self-hosted, but kind of:
Jetpack is actually replacing this button with a custom one when

• we have external services available for media upload (so google photos and pexels), it usually happens once you've connected your account with WordPress.com.
• it's not a gallery (we cannot use galleries as those are only for images)

The logic for this is defined here.

This is so that the menu with the different sources to choose from can be injected.

We could either leave it as it is or try to update this component to try to re-use the render props of the original MediaUpload component.

@obenland what do you think? Can it be done without impacting other jetpack blocks?

[aforcier]

Per our discussion, let's not block this PR since keeping the pencil icon is not a straightforward change/involves other components beside the story block. We'll open an issue and look into that separately.

[Tug]

Issue reported in #19742

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D60536-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

[Tug]

Deployed on WPCOM with Changeset ID 225384