Media & Text: content padding lost on the front end in classic themes with a CSS reset (regression from #83563) #85199

Description

Since Gutenberg 24.2.0, the Media & Text block's text column has no padding on the front end in classic themes that ship a CSS reset. The text sits flush against the media. The editor still looks correct.

Expected: the default padding: 0 8% on .wp-block-media-text__content, as before 24.2.
Actual: padding: 0.

Cause: #83563 wrapped the default padding in :where():

/* Before, specificity 0,2,0 */
.wp-block-media-text > .wp-block-media-text__content { padding: 0 8%; }

/* After (24.2), specificity 0,0,0 */
:where(.wp-block-media-text > .wp-block-media-text__content) { padding: 0 8%; }

Many classic themes include the Meyer-style reset, for example Twenty Eleven's style.css:

html, body, div, span, /* … */ td { /* … */ padding: 0; }

The text column is a div, so div { padding: 0 } (0,0,1) now beats the block's default (0,0,0). The PR intended theme overrides like this to win, but an element-level reset was never meant as a Media & Text override. Before 24.2, the block's rule won.

The editor is unaffected because classic themes don't load their front-end stylesheet (and its reset) in the editor.

This change makes any existing Media & Text content on these themes lose its spacing at once, with no change to the content. Reproduced on a clean install (Playground, Gutenberg 24.2.0, Twenty Eleven, no other plugins). We're also seeing user reports on WordPress.com (which runs Gutenberg 24.2) across Penscratch 2, Argent, Cubic and Twenty Eleven. Site owners can't fix it from the editor, and it needs custom CSS to work around.

Possible fix: keep one class of specificity on the default, so it still beats element-level resets but loses to theme.json and theme class rules:

.wp-block-media-text > :where(.wp-block-media-text__content) { padding: 0 8%; }   /* 0,1,0 */

The override from the #83563 testing steps ("css": "& .wp-block-media-text__content { padding: 0; }", which compiles to 0,2,0) still wins over this, and so does any theme rule with a class selector. Reverting #83563 is the other option.

Step-by-step reproduction instructions

1. Use WordPress with Gutenberg 24.2.0 active and the Twenty Eleven theme. Quick setup: https://playground.wordpress.net/?plugin=gutenberg&theme=twentyeleven
2. Create a post with a Media & Text block. Add an image, and a paragraph in the text column.
3. Publish and view the post on the front end.
4. The paragraph sits flush against the image. In Twenty Eleven it even runs over the image's right edge, because the image's frame makes it slightly wider than its column, and the 8% padding used to absorb that. In DevTools, .wp-block-media-text__content computes to padding: 0, overridden by the theme's reset.
5. Deactivate Gutenberg (or use 24.1) and reload: the 8% padding is back.

Screenshots, screen recording, code snippet

Workaround (custom CSS):

.wp-block-media-text > .wp-block-media-text__content { padding: 0 8%; }

Environment info

• Gutenberg 24.2.0 (regression from Media & Text: Lower the specificity of the content padding #83563). Not present in 24.1.0.
• WordPress: 7.1.3
• Theme: Twenty Eleven (also Penscratch 2, Argent, Cubic on WordPress.com)
• Browser: Chrome, macOS

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure