Skip to content

Make playlist waveform an inner block#78988

Draft
scruffian wants to merge 2 commits into
trunkfrom
scruffian/inner-waveform-block
Draft

Make playlist waveform an inner block#78988
scruffian wants to merge 2 commits into
trunkfrom
scruffian/inner-waveform-block

Conversation

@scruffian
Copy link
Copy Markdown
Contributor

What?

No linked issue.

Makes the playlist waveform a dedicated inner block so waveform block styles no longer occupy the playlist block's own style variations.

Why?

This allows the playlist block itself to support other block styles while the waveform visualization keeps its Bars, Mirror, Line, Blocks, Dots, and Seekbar styles.

How?

Adds core/playlist-waveform and core/playlist-tracklist, normalizes older direct track children in the editor, and keeps server rendering compatible with legacy playlist markup while reading waveform styles from the waveform child when present.

Testing Instructions

  1. Open a post or page with block experiments enabled.
  2. Insert a Playlist block and choose multiple audio tracks.
  3. Select the waveform inner block and verify the waveform style variations change the player visualization.
  4. Select the Playlist block and verify playlist-level block styles can be applied independently.
  5. Save and reload the post, then verify the selected track list and waveform still render.

Testing Instructions for Keyboard

  1. Use the keyboard to insert and select a Playlist block.
  2. Use List View to move focus between the Playlist, Playlist waveform, Playlist tracklist, and Playlist track blocks.
  3. Verify the block style controls are reachable for both the Playlist block and Playlist waveform block.

Screenshots or screencast

Not included.

Use of AI Tools

Drafted with OpenAI Codex and reviewed by the contributor.

Validation

git diff --check, PHP syntax checks for touched PHP files, and node --check for touched JS files passed; PHPUnit, PHPCS, full JS lint, and wp-env testing could not run in this workspace because dependencies/Docker were unavailable.

@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Jun 5, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 5, 2026

Size Change: +552 B (+0.01%)

Total Size: 8.21 MB

📦 View Changed
Filename Size Change
build/scripts/block-library/index.min.js 324 kB +552 B (+0.17%)

compressed-size-action

… class injection

- Reuse the existing waveform block (and migrate the playlist's is-style-*
  class for legacy markup) when normalizing/rebuilding inner blocks, so the
  selected waveform style is not lost.
- Inject the waveform player with a literal str_replace so user-provided
  class names containing `$`/`\` are not treated as preg_replace backreferences.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 5, 2026

Flaky tests detected in f942f96.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/27038184374
📝 Reported issues:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Block library /packages/block-library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant