Skip to content

Playlist Block: Add artwork to play button#79931

Closed
scruffian wants to merge 12 commits into
try/waveformplayerfrom
try/waveformplayer-play-button-artwork
Closed

Playlist Block: Add artwork to play button#79931
scruffian wants to merge 12 commits into
try/waveformplayerfrom
try/waveformplayer-play-button-artwork

Conversation

@scruffian

Copy link
Copy Markdown
Contributor

What?

Adds optional playlist track artwork inside the waveform player play button.

Why?

This keeps the artwork treatment separate from the main waveform player PR so it can be reviewed independently.

How?

  • Moves or creates the waveform artwork image inside the play button when an artwork URL is available.
  • Adds CSS for the artwork-backed play button and contrast overlay.
  • Refreshes artwork when the frontend playlist switches tracks.
  • Adds unit coverage for artwork insertion, fallback creation, missing-button handling, icon contrast, and artwork removal.

Testing Instructions

  • npm run test:unit packages/block-library/src/utils/test/waveform-utils.js -- --runInBand
  • npm run lint:js -- packages/block-library/src/playlist/view.js packages/block-library/src/utils/waveform-utils.js packages/block-library/src/utils/test/waveform-utils.js

@scruffian
scruffian force-pushed the try/waveformplayer-play-button-artwork branch from 7734b60 to b917354 Compare July 7, 2026 10:24
@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Jul 7, 2026
@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown

Size Change: +1.3 kB (+0.02%)

Total Size: 7.68 MB

📦 View Changed
Filename Size Change
build/modules/block-library/playlist/view.min.js 17.2 kB +177 B (+1.04%)
build/scripts/block-library/index.min.js 334 kB +154 B (+0.05%)
build/styles/block-library/playlist/style-rtl.css 2.45 kB +133 B (+5.74%) 🔍
build/styles/block-library/playlist/style-rtl.min.css 2.33 kB +121 B (+5.47%) 🔍
build/styles/block-library/playlist/style.css 2.46 kB +138 B (+5.95%) 🔍
build/styles/block-library/playlist/style.min.css 2.34 kB +121 B (+5.46%) 🔍
build/styles/block-library/style-rtl.css 22.5 kB +120 B (+0.54%)
build/styles/block-library/style-rtl.min.css 19 kB +108 B (+0.57%)
build/styles/block-library/style.css 22.6 kB +121 B (+0.54%)
build/styles/block-library/style.min.css 18.9 kB +106 B (+0.56%)

compressed-size-action

@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown

Flaky tests detected in b917354.
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/28859233741
📝 Reported issues:

@scruffian
scruffian force-pushed the try/waveformplayer-play-button-artwork branch from 67d8a33 to 7aad9af Compare July 7, 2026 13:12
@scruffian
scruffian force-pushed the try/waveformplayer branch from 5ac351b to 68816d1 Compare July 7, 2026 14:12
@github-actions github-actions Bot added the [Package] Icons /packages/icons label Jul 7, 2026
@scruffian
scruffian force-pushed the try/waveformplayer-play-button-artwork branch from 25a2c4e to 67fbcfa Compare July 7, 2026 15:00
@github-actions github-actions Bot added the [Package] Block editor /packages/block-editor label Jul 7, 2026
@scruffian
scruffian force-pushed the try/waveformplayer-play-button-artwork branch from 67fbcfa to 50d1d0e Compare July 7, 2026 15:23
@github-actions github-actions Bot removed [Package] Block editor /packages/block-editor [Package] Icons /packages/icons labels Jul 7, 2026
@scruffian
scruffian force-pushed the try/waveformplayer branch from 9421900 to e546818 Compare July 8, 2026 15:08
@scruffian
scruffian force-pushed the try/waveformplayer-play-button-artwork branch from 50d1d0e to 3789e07 Compare July 8, 2026 15:08
@github-actions github-actions Bot added [Package] Icons /packages/icons and removed [Package] Icons /packages/icons labels Jul 8, 2026
@scruffian
scruffian force-pushed the try/waveformplayer-play-button-artwork branch from 8d547e8 to f07a10b Compare July 10, 2026 12:48
@github-actions github-actions Bot added [Package] Data /packages/data [Package] Server Side Render /packages/server-side-render [Package] Compose /packages/compose [Package] Core data /packages/core-data [Package] Viewport /packages/viewport [Package] Keycodes /packages/keycodes [Package] Plugins /packages/plugins [Package] Components /packages/components [Package] Blocks /packages/blocks [Package] Editor /packages/editor [Package] Notices /packages/notices [Package] Format library /packages/format-library [Package] Rich text /packages/rich-text labels Jul 10, 2026
@scruffian
scruffian force-pushed the try/waveformplayer-play-button-artwork branch from 0ded821 to e5ac8c0 Compare July 13, 2026 10:22
@scruffian
scruffian force-pushed the try/waveformplayer branch from 2f82c07 to ba8abf8 Compare July 13, 2026 15:39
@github-actions github-actions Bot removed [Package] Data /packages/data [Package] Server Side Render /packages/server-side-render [Package] Compose /packages/compose [Package] Core data /packages/core-data [Package] Viewport /packages/viewport [Package] Keycodes /packages/keycodes [Package] Plugins /packages/plugins [Package] Components /packages/components [Package] Blocks /packages/blocks [Package] Editor /packages/editor [Package] Notices /packages/notices [Package] Format library /packages/format-library [Package] Rich text /packages/rich-text [Package] Block editor /packages/block-editor [Package] Edit Post /packages/edit-post labels Jul 13, 2026
@scruffian

Copy link
Copy Markdown
Contributor Author

Closing in favour of #79938

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 [Package] DataViews /packages/dataviews [Package] Editor /packages/editor

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants