fix(theme): stop upscaling content images to full column width - #14
Open
anilsoylu wants to merge 1 commit into
Open
fix(theme): stop upscaling content images to full column width#14anilsoylu wants to merge 1 commit into
anilsoylu wants to merge 1 commit into
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
theme/style.csssetswidth: 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.
renderParagraphinsrc/markdown.jsturns any paragraph whose only child is an image into acore/imageblock, andimageBlockinsrc/gutenberg.jsemits<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.
.alignleftand.alignrightplace 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 imgrule right above already carriesmax-width: 100%andheight: 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 thewidthattribute 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.jsreads the.entry-content .wp-block-image imgrule and asserts it declares nowidth, plus checks the generic image rule still hasmax-width: 100%andheight: auto. It matches that specific rule rather than scanning the whole file, since otherwidth: 100%declarations in the stylesheet are legitimate.npx vitest run test/block-theme.test.js -t "intrinsic size"fails against unpatchedstyle.css, passes with the change.npm test: 132 passed.npx eslint .: clean.