Skip to content

fix(theme): stop upscaling content images to full column width - #14

Open
anilsoylu wants to merge 1 commit into
Automattic:mainfrom
anilsoylu:fix/content-image-intrinsic-size
Open

fix(theme): stop upscaling content images to full column width#14
anilsoylu wants to merge 1 commit into
Automattic:mainfrom
anilsoylu:fix/content-image-intrinsic-size

Conversation

@anilsoylu

Copy link
Copy Markdown

What

theme/style.css sets width: 100% on .entry-content .wp-block-image img. That forces every standalone image on a doc page up to the full content column, whatever its real size.

Markdown images land in that selector easily. renderParagraph in src/markdown.js turns any paragraph whose only child is an image into a core/image block, and imageBlock in src/gutenberg.js emits <figure class="wp-block-image"><img …> with no width or height attributes. So a 24px status badge, a small logo, or an icon written on its own line gets stretched to the full column, blurred, and wrapped in a border and a drop shadow.

It also cancels the float helpers. .alignleft and .alignright place the figure beside the text, but the child image is still 100% wide, so nothing wraps around it.

The fix

Deleting that one declaration is enough. The generic .entry-content img rule right above already carries max-width: 100% and height: auto, which is what keeps images from overflowing. width: 100% only added the upscaling on top.

I deliberately did not replace it with width: auto. That would override the width attribute WordPress writes for resized images, and intrinsic sizing is already correct once the forced width is gone. Border, radius and shadow are untouched.

Verification

New test in test/block-theme.test.js reads the .entry-content .wp-block-image img rule and asserts it declares no width, plus checks the generic image rule still has max-width: 100% and height: auto. It matches that specific rule rather than scanning the whole file, since other width: 100% declarations in the stylesheet are legitimate.

  • npx vitest run test/block-theme.test.js -t "intrinsic size" fails against unpatched style.css, passes with the change.
  • npm test: 132 passed.
  • npx eslint .: clean.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant