Skip to content

Playlist Track: Constrain the Track image inspector preview - #83885

Open
dilipom13 wants to merge 1 commit into
WordPress:trunkfrom
dilipom13:fix/83858-playlist-track-image-inspector-preview
Open

dilipom13 wants to merge 1 commit into
WordPress:trunkfrom
dilipom13:fix/83858-playlist-track-image-inspector-preview

Conversation

@dilipom13

Copy link
Copy Markdown
Contributor

What

Fixes #83858.

The Playlist Track inspector's Track image preview rendered at the image's natural size. A large or tall image overflowed the sidebar and stretched the settings panel.

Why

The preview wrapper used editor-video-poster-control, a leftover class from the Video block's old poster control. That class has no styles in the current editor stylesheet, so the <img> was unconstrained.

How

The preview uses a Playlist Track class, wp-block-playlist-track__inspector-image, with editor styles that cap the image at the sidebar width and a 200px max height (object-fit: contain). Select / Replace / Remove stay on the same control.

Testing Instructions

  1. Add a Playlist block and a track.
  2. Set a large image as the Track image (a tall portrait shows the bug clearly).
  3. Select the track and open the Block settings sidebar.
  4. Confirm the Track image preview stays inside the panel and the Select/Replace and Remove buttons remain usable.
  5. Confirm the tracklist thumbnail in the editor canvas is unchanged.

Use of AI Tools

None

The inspector preview used an unstyled Video poster class, so a large track image overflowed the sidebar.
@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Sep 30, 2026
@github-actions

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dilipom13 <dilip2615@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions

Copy link
Copy Markdown

🤖 PR meta 🤖

🏷️ Labels

This pull request needs exactly one label indicating its type, and has 0.

  • Required: any label starting with [Type].
  • Found: none.

Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you.

This branch has not been deployed

No deployments
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.

Playlist Track: "Track image" inspector preview is unconstrained (editor-video-poster-control has no styles)

1 participant