Media & Text: Restore content padding in classic themes with a CSS reset by ariel-maidana · Pull Request #85200 · WordPress/gutenberg

ariel-maidana · 2026-10-20T13:46:01Z

What?

Closes #85199. Follow-up to #83563.

Raises the Media & Text content padding from zero specificity to one class (.wp-block-media-text > :where(.wp-block-media-text__content)). Classic themes' CSS resets no longer remove it, and theme.json and theme styles can still override it.

Why?

#83563 wrapped the default padding: 0 8% in :where(), so it has zero specificity. Many classic themes ship the Meyer-style reset (html, body, div, … { padding: 0 }), including Twenty Eleven. The text column is a div, so that reset (0,0,1) now beats the block's default (0,0,0). On the front end, the text sits flush against the media in every Media & Text block on the site, with no change to the content. The editor is unaffected because classic themes don't load their front-end stylesheet there.

Since 24.2.0 we've had reports on WordPress.com across Penscratch 2, Argent, Cubic and Twenty Eleven. It also reproduces on a clean install with Twenty Eleven.

How?

Moves the :where() from around the whole selector to around the child: .wp-block-media-text > :where(.wp-block-media-text__content), specificity 0,1,0.
That beats element-level resets (0,0,1) and stays below the pre-24.2 rule (0,2,0), so most of Media & Text: Lower the specificity of the content padding #83563's intent holds:
- Theme class rules such as .entry-content .wp-block-media-text__content (0,2,0) still win.
- The theme.json override from Media & Text: Lower the specificity of the content padding #83563's testing steps compiles to :root :where(.wp-block-media-text .wp-block-media-text__content), which is 0,1,0, a tie. It still wins because per-block global styles are attached to global-styles, which prints after the block's stylesheet. Tested with Twenty Twenty-Five on this branch: with the override the computed padding is 0, without it 8%. Worth a reviewer's eye in case there's a load path where that order flips.
An order-independent alternative is a 0,0,2 selector such as html body :where(.wp-block-media-text > .wp-block-media-text__content). It beats a single-element reset and loses to anything with a class. Happy to switch if reviewers prefer it.
No markup changes, so there's no deprecation and no block validation impact.

Testing Instructions

Activate Twenty Eleven, with this branch's Gutenberg active.
Add a Media & Text block with an image and a paragraph. Publish.
View it on the front end. The text column has its 8% side padding. On trunk it has none, because the theme's reset overrides it.
Switch to a block theme (e.g. Twenty Twenty-Five) and confirm Media & Text looks the same as on trunk.
Repeat Media & Text: Lower the specificity of the content padding #83563's check: in theme.json, add "css": "& .wp-block-media-text__content { padding: 0; }" under styles.blocks.core/media-text. Reload, and confirm the padding is removed in the editor and on the front end.

Testing Instructions for Keyboard

No UI change.

Screenshots or screencast

Before	After

With the fix, DevTools shows the block's rule applied and Twenty Eleven's reset padding: 0 overridden:

Use of AI Tools

I used Claude Code (Claude Opus 5.5) to trace the regression to #83563, write the change and changelog entry, and draft this description. It also checked the cascade in headless Chrome against Twenty Eleven's reset and the compiled theme.json override. I reviewed the change and reproduced the bug and the fix myself.

🤖 Generated with Claude Code

WordPress#83563 gave the content padding zero specificity, so classic theme resets like `div { padding: 0 }` removed it on the front end. Keep one class of specificity so element resets lose while theme.json and theme class rules still override it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

github-actions · 2026-10-20T13:46:15Z

🤖 PR meta 🤖

👋 Welcome

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @ariel-maidana! 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.

🎉 Props

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: ariel-maidana <arielmaidana@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: softglazee <softglaze@git.wordpress.org>

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

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

ariel-maidana · 2026-10-20T13:56:27Z

Could a maintainer please add [Type] Regression and [Block] Media & Text? This is a front-end regression from #83563 in 24.2, so it would be good to backport to the 24.3 RC.

aaronrobertshaw · 2026-10-20T14:02:49Z

+// One class of specificity: theme.json and theme class rules can override it, but element resets like `div { padding: 0 }` can't.
+.wp-block-media-text > :where(.wp-block-media-text__content) {


I wonder if we should lean into the same approach that Global Styles in general uses to achieve the 0-1-0 specificity. That is, wrapping the entire selector in :root :where(). That pattern is so common in this codebase now that it almost doesn't need the explanatory inline comment.

Yes, let's do that

:root :where(.wp-block-media-text > .wp-block-media-text__content)

aaronrobertshaw · 2026-10-20T14:05:00Z

@ariel-maidana I've added the requested labels. Looks like this will need a rebase and minor conflict resolved. I'll try and give it a review tomorrow if nobody beats me too it.

ciampo

Needs a rebase + conflict solving

ciampo · 2026-10-20T15:20:11Z

+// One class of specificity: theme.json and theme class rules can override it, but element resets like `div { padding: 0 }` can't.
+.wp-block-media-text > :where(.wp-block-media-text__content) {


Yes, let's do that

:root :where(.wp-block-media-text > .wp-block-media-text__content)

ariel-maidana · 2026-10-20T16:14:20Z

Thank you @aaronrobertshaw !

aaronrobertshaw

I have given this a quick test.

✅ Twenty Eleven gets its 8% padding back on the front end
✅ Twenty Twenty-Five is unchanged

`:root :where()` versus this selector

I also tried the :root :where() version. Both are 0-1-0, and they behaved the same.

So I'd go with :root :where() to match the rest of block library, and drop the inline comment.

im3dabasia

+1 to the :root :where() suggestion. I tested it locally on classic and block themes, and it works as expected 👍

Once the selector is switched, the inline comment is dropped and the changelog conflict is resolved, this looks good to go.

Twenty Eleven (classic)

Before	After

Customizer CSS overrides it	Theme class rule overrides it

Twenty Twenty-Four (block)

Default unchanged	`theme.json` CSS overrides it	Site Editor CSS overrides it

softglazee · 2026-10-23T10:05:23Z

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: #85200 (head cad6d39)

Environment

WordPress: 7.2-beta1-64606-src (wordpress-develop local environment in Docker)
PHP: 8.3.32
Server: nginx/1.31.3
Database: MySQL 9.7.1
Browser: Chrome 155.0.8059.85
OS: Windows 11 Pro
Theme: Twenty Eleven
MU Plugins: None activated
Plugins: None activated

How the patch was applied

There is no plugin build for this PR yet: only the labelling workflows have run for cad6d39. Since the change is a single selector, I applied it to the stylesheet that WordPress 7.2 Beta 1 inlines for this block (wp-includes/blocks/media-text/style.css and style.min.css), changing :where(.wp-block-media-text > .wp-block-media-text__content) to .wp-block-media-text > :where(.wp-block-media-text__content). WordPress 7.2 Beta 1 already ships the selector from #83563, so the bug shows without the Gutenberg plugin.

Steps

Activate Twenty Eleven.
Publish a post with a Media & Text block (an image and a paragraph).
On the front end, read the computed padding of .wp-block-media-text__content and list every CSS rule that sets its padding.
Apply the change and repeat. Then add a theme-style rule .entry-content .wp-block-media-text__content { padding: 0 } and repeat.
Restore the original stylesheet and repeat as a control.

Actual Results

Run	Computed padding (left / right)	Rule that wins
Before (7.2 Beta 1)	0px / 0px	Twenty Eleven reset `html, body, div, ... { padding: 0 }` (0,0,1) over `:where(.wp-block-media-text > .wp-block-media-text__content)` (0,0,0)
With the PR selector	23.37px / 23.37px (8% of the 292px text column)	`.wp-block-media-text > :where(.wp-block-media-text__content)` (0,1,0)
PR selector + theme class rule	0px / 0px	`.entry-content .wp-block-media-text__content` (0,2,0)
Original restored (control)	0px / 0px	Twenty Eleven reset

✅ Issue resolved with patch.

Additional Notes

Before the change, the text runs into the image on the front end. With it, the default gap is back.
A theme class rule still overrides the default, as the PR description says.
Not retested here: the theme.json override and the editor. The PR description covers those with Twenty Twenty-Five.
WordPress 7.2 Beta 1 core contains the zero-specificity selector (its pinned Gutenberg build includes Media & Text: Lower the specificity of the content padding #83563), so classic-theme sites on 7.2 are affected without the plugin. That supports the 7.2 backport label.

Thanks @ariel-maidana for the fix.

AI assistance: Yes. I used Claude (Anthropic) to set up the test environment, run the tests and draft this report, and I reviewed the results before posting.

im3dabasia · 2026-10-23T10:12:15Z

Thanks @softglazee for testing the patch!

The plan is to go with this suggestion so that we get a specificity of 0,1,0. This way, we solve both the original issue and #85199.

ciampo · 2026-10-23T21:16:15Z

@ariel-maidana , are you able to continue the work here?

ariel-maidana and others added 2 commits October 20, 2026 10:26

Add PR number to the changelog entry

cad6d39

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

github-actions Bot added the [Package] Block library /packages/block-library label Oct 20, 2026

github-actions Bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Oct 20, 2026

ariel-maidana marked this pull request as ready for review October 20, 2026 13:55

ariel-maidana requested a review from fabiankaegy as a code owner October 20, 2026 13:55

aaronrobertshaw mentioned this pull request Oct 20, 2026

Media & Text: Lower the specificity of the content padding #83563

Merged

aaronrobertshaw reviewed Oct 20, 2026

View reviewed changes

aaronrobertshaw added [Type] Regression Related to a regression in the latest release [Block] Media & Text Affects the Media & Text Block Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) labels Oct 20, 2026

ciampo added the Backport to WP 7.2 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 20, 2026

ciampo assigned ariel-maidana Oct 20, 2026

ciampo reviewed Oct 20, 2026

View reviewed changes

aaronrobertshaw reviewed Oct 20, 2026

View reviewed changes

im3dabasia reviewed Oct 21, 2026

View reviewed changes

t-hamano added this to WordPress 7.2 Editor Tasks Oct 23, 2026

github-project-automation Bot moved this to 🔎 Needs Review in WordPress 7.2 Editor Tasks Oct 23, 2026

		// One class of specificity: theme.json and theme class rules can override it, but element resets like `div { padding: 0 }` can't.
		.wp-block-media-text > :where(.wp-block-media-text__content) {

Conversation

ariel-maidana commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Use of AI Tools

Uh oh!

github-actions Bot commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤖 PR meta 🤖

👋 Welcome

🎉 Props

Uh oh!

ariel-maidana commented Oct 20, 2026

Uh oh!

aaronrobertshaw Oct 20, 2026

Choose a reason for hiding this comment

Uh oh!

ciampo Oct 20, 2026

Choose a reason for hiding this comment

Uh oh!

aaronrobertshaw commented Oct 20, 2026

Uh oh!

ciampo left a comment

Choose a reason for hiding this comment

Uh oh!

ciampo Oct 20, 2026

Choose a reason for hiding this comment

Uh oh!

ariel-maidana commented Oct 20, 2026

Uh oh!

aaronrobertshaw left a comment

Choose a reason for hiding this comment

:root :where() versus this selector

Uh oh!

im3dabasia left a comment

Choose a reason for hiding this comment

Uh oh!

softglazee commented Oct 23, 2026

Test Report

Description

Environment

How the patch was applied

Steps

Actual Results

Additional Notes

Uh oh!

im3dabasia commented Oct 23, 2026

Uh oh!

ciampo commented Oct 23, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

ariel-maidana commented Oct 20, 2026 •

edited

Loading

github-actions Bot commented Oct 20, 2026 •

edited

Loading

`:root :where()` versus this selector