Site Editor Compatibility: register wp-mediaelement styles for Podcast Player

[ramonjd]

Fixes #19483

Changes proposed in this Pull Request

In #19578 we created a "fix" so that we could copy over the media element style assets enqueued for the podcast player into the Site Editor iframe.

We did this in order that for podcast player to look as it should in the Site Editor.

Since WordPress/gutenberg#31873 we can specify Site Editor assets to enqueue in the register block function.

Also since that PR, WPCOM doesn't appear to load enqueued wp-mediaelement styles anymore :)

Therefore we need to specify wp-mediaelement styles for the podcast player.

This fix affects sites running Gutenberg 10.7 or later.

Before on WPCOM

After on WPCOM

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

No

Testing instructions

1. Using a block-based theme, e.g., TT1 add a Podcast block to the site editor. Here's an RSS feed link: https://distributed.blog/category/podcast/feed/ 😄
2. Once loaded, you should be able to interact with the player as expected.
3. Add another one.
4. Both should work
5. Check that, for every podcast block you add, we're not duplicating the mediaelement-css assets.
6. Take a look at the frontend. The player(s) should both load.
7. Check a few other themes for regressions.
8. Sync the changes to WPCOM and ensure that both the block and site editors work as expected.
9. Chilled red wine is fine. Deal with it.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello ramonjd! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D63370-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 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

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: July 6, 2021.
• Scheduled code freeze: June 28, 2021.

[andrewserong]

Thanks for fixing this up @ramonjd!

✅ Using a block-based theme, e.g., TT1 add a Podcast block to the site editor
✅ Once loaded, you should be able to interact with the player as expected.
✅ Add another one.
✅ Both should work
✅ Check that, for every podcast block you add, we're not duplicating the mediaelement-css assets.
✅ Take a look at the frontend. The player(s) should both load.
✅ Check a few other themes for regressions. (works fine in non-block-based-themes for me)

The only styling issue I encountered was with the Maywood theme, which unintentionally targets the hover style of the buttons within the Podcast block. This isn't at all a block for this PR, but we could always look at adding a defensive CSS rule to prevent themes from affecting the player buttons?

✅ Sync the changes to WPCOM and ensure that both the block and site editors work as expected.

Chilled red wine is fine. Deal with it.

I prefer mulled! (Though to be honest, I haven't tried chilled).

[github-actions]

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

Thank you!

[ramonjd]

r227867-wpcom