Feat: Block Library: Improve the design of MediaControlPreview and MediaControl

[hbhalodia]

What?

Closes #75412

Why?

• See issue - Block Library: Improve the design of MediaControlPreview and MediaControl #75412
• tldr; Need to make consitent layout accross global styles and block editors.
• More - Global Styles: Add background color control to global styles Background panel #74386 (comment)

How?

• Update the MediaControl and MediaControlPreview component to match style as per BackgroundImageControl in global styles.

Testing Instructions

1. Open page/post.
2. Add blocks, Site Logo and Image.
3. Add image from inspector panel.
4. See the layout design, with and without image.
5. It should also have a reset button, visible on hover, focus. Should reset as epxted.
6. See screencast for more details on testing.

Testing Instructions for Keyboard

• Just check reset button, should be accessible by keyboard.

Screenshots or screencast

Screen.Recording.2026-03-12.at.2.37.49.PM.mov

[github-actions]

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: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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

[t-hamano]

Thanks for the PR!

One important point is about the visual text. I think the text should be simple. See #74386 (comment).

Use "Image" instead of "Choose an image…":

Use "Logo" instead of "Choose logo":

[t-hamano]

LGTM!