Issue when having multiple Audio and/or Video playlists at the same page

[Guido07111975]

When having multiple audio and/or video playlists (shortcodes) on the same page (or a combination), removing the audio/video file of the first playlist (via media library or by changing the ids ID), will break all playlists on that page in the frontend.

Example:

Playlist 1:
[playlist ids="230"]

Playlist 2:
[playlist ids="230"]

Playlist 3:
[playlist ids="230"]

Quick test: change ID of the first playlist, save page, visit the frontend.

[Guido07111975]

Playlist Before

[Guido07111975]

Playlist After

[rollybueno]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

When multiple [playlist] shortcodes are present on a single page, if the first shortcode contains an invalid or non-existent media ID, it causes all subsequent playlists (even those with valid IDs) to fail rendering or break on the frontend. The failure seems tied to how the JavaScript initialization for playlists is handled based on the first instance.

Environment

• WordPress: 6.8.1
• PHP: 8.3.17
• Server: nginx/1.26.1
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.3.17)
• Browser: Chrome 136.0.0.0
• OS: Linux
• Theme: Twenty Twenty-Four 1.3
• MU Plugins: None activated
• Plugins:
  • Query Monitor 3.18.0
  • Test Reports 1.2.0

Actual Results

✅ Error condition occurs (reproduced).

Steps:

• Used [playlist ids="121212121212121"] as the first shortcode (invalid ID) - make sure this is in fact invalid or not existed in your environment!
• Followed by two [playlist ids="10"] shortcodes (valid media ID) - find any free media(audio) and upload it, make sure you replace ids to your own media id
• On the frontend, none of the playlists render

Additional Notes

• The issue does not occur if the first [playlist] contains a valid ID.
• Inspecting the browser console shows no explicit JS errors, but the markup or player initialization script is incomplete or missing.
• The issue may stem from how wp-playlist.js expects valid data from the first rendered playlist block.
• Behavior consistent across audio and video playlists.

Supplemental Artifacts

Before:
After:

https://core.trac.wordpress.org/ticket/63583

[hbhalodia]

Hi @rollybueno @Guido07111975, Looks like the we are only checking for the first instance to load the intended script, which is ideally not correct because, before loading the script based on first instance, we are checking for empty attachment, and returning early, so it never reaches the action which loads the script, now on subsequent playlist, since if we find the attachment, we proceed, but the chcek related to first instance would fail and hence it won't load the script. So we need to update it with proper check instead of first instance check.

Thank You,

[rollybueno]

Yes, correct. We have patch 1 minute before your comment, so interesting to see if that's the case. Adding proper keywords, I'll check if there's existing test unit.

Replying to hbhalodia:

Hi @rollybueno @Guido07111975, Looks like the we are only checking for the first instance to load the intended script, which is ideally not correct because, before loading the script based on first instance, we are checking for empty attachment, and returning early, so it never reaches the action which loads the script, now on subsequent playlist, since if we find the attachment, we proceed, but the chcek related to first instance would fail and hence it won't load the script. So we need to update it with proper check instead of first instance check.

Thank You,

[rollybueno]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/9003

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 136.0.0.0
• OS: Linux
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• I was able to reproduce the issue again on the nightly version, consistent with my previous report in https://core.trac.wordpress.org/ticket/63583#comment:1.
• Patch was applied using the following steps:
  • git fetch upstream pull/9003/head:pr-9003
  • git checkout pr-9003
• I had to perform a hard restart of Docker to ensure the patch was properly applied in the testing environment, using the following steps.:

  1. npm run env:stop
     

  2. Close the Docker Desktop app and re-open

  3. npm run env:start
     

  4. Refresh the playlist page
• After applying the patch, the issue no longer occurs.

Supplemental Artifacts

▶️ Primary Screencast (Recommended | Full Walkthrough): See the patch in action, including reproduction and resolution steps. ​https://drive.google.com/file/d/1HXbZCSuv7RETaLr2bnWXdin7H1bBeDs2/view?usp=sharing

Before checkout to pr-9003:

After checking out to pr-9003:

[rollybueno]

I'll leave the needs testing keyword open so that other contributors can test as well, though I'll add needs-unit-tests since I can't find any related to this issue. Feel free to remove if you think otherwise.

[Guido07111975]

Fix in ​#9003 looks good!

[iamadisingh]

Replying to rollybueno:

I'll leave the needs testing keyword open so that other contributors can test as well, though I'll add needs-unit-tests since I can't find any related to this issue. Feel free to remove if you think otherwise.

Hi @rollybueno and @Guido07111975,

I see this ticket needs unit tests as mentioned in the comment. I can write a unit test that covers the core issue reported:

• Multiple playlists with invalid first playlist (the main bug)

The test will validate that the fix in PR ​https://github.com/WordPress/wordpress-develop/pull/9003 works correctly. Would it be helpful if I create a separate PR for this unit test?

Thanks!

[iamadisingh]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/9003

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• Applied patch using: npm run grunt patch:https://github.com/WordPress/wordpress-develop/pull/9003

• Testing Process:
  • Setup: Created test post with multiple playlist shortcodes using audio file attachment IDs from media library
  • Tested scenario: [playlist ids="999999"] followed by [playlist ids="11"] and playlist ids="12"] (valid audio file)
    • ✅ Invalid first playlist fails gracefully (returns empty)
    • ✅ Valid second and third playlist renders correctly with working audio controls

Supplemental Artifacts

Editor Screenshot: ​https://ibb.co/FLstHzMd
(WordPress admin editor showing test setup with playlist shortcodes)

Frontend Screenshot: ​https://ibb.co/nqY5ZnSk
(Frontend view showing fix working - invalid playlist fails gracefully, valid playlists render)

Trac ticket: #63583

Patch Used: #9003

---

## Description

Added a unit test for wp_playlist_shortcode to ensure that playlist scripts are loaded when a valid playlist follows an invalid one.

## Testing Instructions

Run the following command to verify the tests:

npm run test:php -- --filter=Tests_Media_WpPlaylistShortcode

[jorbin]

Can you share why we are moving the check so much earlier so that it is no longer part of the output buffer? I think if we can keep it inside the output buffer, there is less risk of unintended consequences.

For the unit test, I think it would be good to check with multiple playlists to ensure that the script is only output once.

For testing scenerios, I also tested to ensure that on archive pages, having playlists in multiple posts works as expected.

[iamadisingh]

Hi @jorbin, I have updated the unit test to ensure the scripts are loaded exactly once, not just that they eventually load.

[iamadisingh]

I have moved the logic back to its original location as it seems a safer approach.

[TimothyBlynJacobs]

In 60678:

Media: Fix playlist shortcodes not rendering correctly if the first playlist is broken.

The playlist shortcode has a base set of JavaScript that should only be loaded once. Previously, this JS was only loaded the first time a playlist shortcode was processed. If the first playlist was broken, because the media file was missing for instance, this would break all other playlists on the page.

This commit introduces a new static variable to keep track of whether the necessary JavaScript has been loaded instead.

Props iamadisingh, abcd95, justlevine, jorbin, rollybueno, Guido07111975.
Fixes #63583.

Merged in f40b60d.