Skip to content

Support resized image dimensions - #107

Merged
alecgeatches merged 3 commits into
trunkfrom
add/resized-image-dimensions
Jul 6, 2026
Merged

Support resized image dimensions#107
alecgeatches merged 3 commits into
trunkfrom
add/resized-image-dimensions

Conversation

@alecgeatches

@alecgeatches alecgeatches commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Description

Closes #106.

Previously, resized dimensions were overwritten by src/parser/block-additions/core-image.php's added width and height dimensions. For example:

resized-image

This post contains two images, one original and one resized. The HTML reflects this:

<!-- wp:image {"id":8,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8888/wp-content/uploads/2026/07/sotw-2024-1-1024x683.png" alt="" class="wp-image-8"/></figure>
<!-- /wp:image -->~

<!-- ... ->

<!-- wp:image {"id":9,"width":"212px","height":"auto","aspectRatio":"1.4992445383313449","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="http://localhost:8888/wp-content/uploads/2026/07/sotw-2024-1-1-1024x683.png" alt="" class="wp-image-9" style="aspect-ratio:1.4992445383313449;width:212px;height:auto"/></figure>
<!-- /wp:image -->

The first image has no manual width or height set, but the second image has width":"212px", "height":"auto" set in the block delimiter. Although these are different, when rendered through the block data API, the results are largely the same:

{
    "name": "core/image",
    "attributes": {
        "alt": "",
        "id": 8,
        "linkDestination": "none",
        "sizeSlug": "large",
        "url": "...",
        "width": 1024,
        "height": 683
    }
},
/* ... */
{
    "name": "core\/image",
    "attributes": {
        "alt": "",
        "aspectRatio": "1.4992445383313449",
        "id": 9,
        "linkDestination": "none",
        "sizeSlug": "large",
        "url": "...",
        "width": 1024,
        "height": 683
    }
}

That's because the delimiter-defined width and height are overwritten by the image block addition. Following @codedbyglenden's idea, the fix in this PR preserves the attribute-set width and height in resize-width and resize-height attributes:

{
    "name": "core/image",
    "attributes": {
        "alt": "",
        "id": 8,
        "linkDestination": "none",
        "sizeSlug": "large",
        "url": "http:/localhost:8888/wp-content/uploads/2026/07/sotw-2024-1-1024x683.png",
        "width": 1024,
        "height": 683
    }
},
/* ... */
{
    "name": "core/image",
    "attributes": {
        "alt": "",
        "aspectRatio": "1.4992445383313449",
        "id": 9,
        "linkDestination": "none",
        "sizeSlug": "large",
        "url": "http:/localhost:8888/wp-content/uploads/2026/07/sotw-2024-1-1-1024x683.png",
        "width": 1024,
        "height": 683,
        "resize-width": "212px",
        "resize-height": "auto"
    }
}

width and height still show the native image attachment version for backwards compatibility. Also, the delimiter-sourced attributes are strings ("212px", "auto") instead of numbers, so a separate attribute feels like the safer path.

@alecgeatches
alecgeatches requested a review from a team as a code owner July 6, 2026 16:33
smithjw1
smithjw1 previously approved these changes Jul 6, 2026
@alecgeatches
alecgeatches merged commit 965e615 into trunk Jul 6, 2026
4 checks passed
@alecgeatches
alecgeatches deleted the add/resized-image-dimensions branch July 6, 2026 16:47
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.

Drag to resize overridden by predefined image width / height

2 participants