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

2 participants