Media & Text: clip media to block border-radius using overflow: clip

[druesome]

What?

When a border-radius is applied to the Media & Text block (via block controls or Global Styles), the inner media element overflows the rounded corners rather than being clipped by them. This affects both the frontend and the block editor canvas.

Fixes #69596
Related: EDI-481 (Automattic internal issue tracker)

Why?

The block applies border-radius to the outer .wp-block-media-text container, but the inner <figure> and its image/video overflow the rounded corners because there is nothing clipping them.

How?

The cover block already solves the exact same problem using overflow: hidden as a fallback and overflow: clip as the preferred value — overflow: clip is preferred because it does not create a new block formatting context, meaning position: sticky continues to work on child elements (unlike overflow: hidden).

Apply the same two-line pattern to .wp-block-media-text in style.scss:

overflow: hidden; // fallback for browsers without overflow: clip support
overflow: clip;   // preferred: clips at border-radius without breaking sticky positioning

This is a CSS-only fix:

• No save.js changes → no new deprecated block version required
• Works for border-radius set via inline block controls and via Global Styles (since the clip is always active)
• Fixes both the frontend and the editor canvas (both surfaces load from the same style.scss source — frontend via wp-includes/blocks/media-text/style.css, editor via the aggregated wp-includes/css/dist/block-library/style.css)
• Follows an established pattern already used in the cover block

Testing Instructions

1. Add a Media & Text block with an image
2. In the block sidebar under Border, set a Color (so the border is clearly visible) and a Radius (e.g. 24px) — requires a block theme or a theme with appearanceTools enabled
3. Confirm the image is clipped at the rounded corners in the editor canvas
4. View the post on the frontend — confirm the image is clipped there too
5. Test with Global Styles → set a border color and radius on the Media & Text block type → confirm it clips on both surfaces
6. Test the image fill (is-image-fill-element) variant — confirm it also clips correctly
7. Test the stacked on mobile layout — confirm the top image clips at the top corners
8. Confirm the column resize handle still works in the editor (drag the boundary between media and content)
9. Confirm no visual regressions on blocks without border-radius set

🤖 Generated with Claude Code

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @andrew.dela.serna@a8c.com.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: andrew.dela.serna@a8c.com.

Co-authored-by: druesome <druesome@git.wordpress.org>
Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: NidhiDhandhukiya74 <nidhidhandhukiya@git.wordpress.org>
Co-authored-by: djcowan <djcowan@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: Robertght <robertghetau@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]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @druesome! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[druesome]

Tested the fix locally on a WordPress Studio site (WP 6.7 + Jetpack 15.7.1).

Frontend — overflow:hidden; overflow:clip is already in the patched wp-includes/blocks/media-text/style.css and the image corners clip correctly at the block border-radius.

Editor — the editor loads from the aggregated wp-includes/css/dist/block-library/style.css (a separate compiled artifact). Once that file is rebuilt from the same style.scss source the fix works in the editor canvas too — image is properly clipped at the rounded corners with no visible regression on the resize handle.

Screenshot showing before/after in the editor would follow but the fix is confirmed working on both surfaces.

[druesome]

Heads up — I don't have label permissions as an external contributor. Could a maintainer add [Type] Bug to unblock the label check? Thanks!