CoreMediaText return the wrong URL if CoreImage is used in "Text" column

[MKlblangenois]

When we use CoreImage on the content column inside CoreMediaText, the media details returned inside "attributes" is the CoreImage and not the media selected.

Expected result

Actual result

Why this result? If we look at the query, we can see that the renderedHTML is good, but not the attributes parsed.

[justlevine]

@MKlblangenois can you share what version of WordPress/ WPGraphQL/ WPGraphQL Content Blocks you are using?

[MKlblangenois]

Hi @justlevine, here's my version:

• WordPress 6.9
• WPGraphQL 2.1.1
• WPGraphQL Content Blocks 4.8.2

In Gutenberg, I just use Media and Text with Image inside the "Text" part, like this:

[colinmurphy]

Thanks @MKlblangenois

Thanks for reporting this issue. We will look into this and get back to you once we have done some testing etc.

[alexwpengine]

Hi, @MKlblangenois, unfortunately I cannot replicate the issue on my side. @justlevine , could you also try to replicate it? I've tested it with only these 2 plugins and the default theme

• WPGraphQL 2.1.1
• WPGraphQL Content Blocks 4.8.2

I did another test with FaustJS, but still couldn't replicate the issue.

[MKlblangenois]

Hi @alexwpengine! You're right, I'm not able to reproduce this if .. I create a new block. As you can see here, red is the older block I copy/paste on another page, and green is the new created manually, and it works as excepted 😅

I'll investigate more to see if I can reproduce it in another way

[MKlblangenois]

Oh, I got it! It append when I choose that the image is on right

[alexwpengine]

I still can't reproduce it. I am not sure but my query starts with page/post (depending on the CPT), not gNPage? There are 2 options - Show Media on the right, and Image alignment (on the right). Both do work fine for me. Maybe if you can share access to your website or record a video with all the plugins & setup on your website.

[justlevine]

block markup is copy-pasteable. Perhaps with the generated post_content we can make more progress

[MKlblangenois]

Hi @alexwpengine, @justlevine!

I was able to reproduce it in video with default theme and no more plugins enable : https://streamable.com/rbkwck

Here's my post_content

<!-- wp:media-text {"mediaId":8043,"mediaLink":"http://cnb.local/week-end-special-50-ans-de-la-formation-guide-nature/sans-titre-8-3/","mediaType":"image"} -->
<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="http://cnb.local/wp-content/uploads/2025/04/Sans-titre-8-2-1024x576.jpg" alt="" class="wp-image-8043 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:image {"id":7998,"width":"97px","height":"auto","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="http://cnb.local/wp-content/uploads/2025/03/universite-de-namur.png" alt="" class="wp-image-7998" style="width:97px;height:auto"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Hello, world!</h2>
<!-- /wp:heading --></div></div>
<!-- /wp:media-text -->

<!-- wp:media-text {"mediaPosition":"right","mediaId":8043,"mediaLink":"http://cnb.local/week-end-special-50-ans-de-la-formation-guide-nature/sans-titre-8-3/","mediaType":"image"} -->
<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile"><div class="wp-block-media-text__content"><!-- wp:image {"id":7998,"width":"97px","height":"auto","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="http://cnb.local/wp-content/uploads/2025/03/universite-de-namur.png" alt="" class="wp-image-7998" style="width:97px;height:auto"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Hello, world!</h2>
<!-- /wp:heading --></div><figure class="wp-block-media-text__media"><img src="http://cnb.local/wp-content/uploads/2025/04/Sans-titre-8-2-1024x576.jpg" alt="" class="wp-image-8043 size-full"/></figure></div>
<!-- /wp:media-text -->

[alexwpengine]

I was able to replicate it, thank you! Will give an update once I have more information.

[alexwpengine]

Hi, the main problem are the missing & wrong inline comments (tags) for wp:image.

More specifically, it is missing: <!-- wp:image {"id":8043,"width":"97px","height":"auto","sizeSlug":"full","linkDestination":"none"} --> while the line below must be removed: <!-- wp:image {"id":7998,"width":"97px","height":"auto","sizeSlug":"full","linkDestination":"none"} -->

The attributesForCoreImage takes into account the <!--wp:image> props, while attributesForCoreMediatext simply grabs the url from <img> tag.

Unfortunately, this is not in our control, we just query the blocks and when they do not return proper markup, it is out of our hands. Maybe, you can rise a ticket to WP Core.

Here is the correct (fixed manually) markup.

<!-- wp:media-text {"mediaId":8043,"mediaLink":"http://cnb.local/week-end-special-50-ans-de-la-formation-guide-nature/sans-titre-8-3/","mediaType":"image"} -->
<div class="wp-block-media-text is-stacked-on-mobile">

<figure class="wp-block-media-text__media"><img src="http://cnb.local/wp-content/uploads/2025/04/Sans-titre-8-2-1024x576.jpg" alt="" class="wp-image-8043 size-full"/></figure>

<div class="wp-block-media-text__content">
<!-- wp:image {"id":7998,"width":"97px","height":"auto","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="http://cnb.local/wp-content/uploads/2025/03/universite-de-namur.png" alt="" class="wp-image-7998" style="width:97px;height:auto"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Hello, world!</h2>
<!-- /wp:heading --></div></div>
<!-- /wp:media-text -->

<!-- wp:media-text {"mediaPosition":"right","mediaId":8043,"mediaLink":"http://cnb.local/week-end-special-50-ans-de-la-formation-guide-nature/sans-titre-8-3/","mediaType":"image"} -->
<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile">
<div class="wp-block-media-text__content">

<figure class="wp-block-image size-full is-resized"><img src="http://cnb.local/wp-content/uploads/2025/03/universite-de-namur.png" alt="" class="wp-image-8043" style="width:97px;height:auto"/></figure>

<!-- wp:heading -->
<h2 class="wp-block-heading">Hello, world!</h2>
<!-- /wp:heading --></div>

<!-- wp:image {"id":8043,"width":"97px","height":"auto","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-media-text__media"><img src="http://cnb.local/wp-content/uploads/2025/04/Sans-titre-8-2-1024x576.jpg" alt="" class="wp-image-8043 size-full"/></figure></div>
<!-- /wp:image -->

<!-- /wp:media-text -->

[colinmurphy]

@MKlblangenois @alexwpengine Is this okay to be closed?

[justlevine]

@colinmurphy @alexwpengine I havn't had time to investigate why this is happening, but I was able to replicate and these seems like a pretty clear-cut bug in the plugin considering that a. the markup is generated natively, b. WordPress renders the markup correctly without any manual changes to the markup.

Unfortunately, this is not in our control, we just query the blocks and when they do not return proper markup, it is out of our hands. Maybe, you can rise a ticket to WP Core.

@alexwpengine perhaps you can clarify why you think the generated markup is the problem and not with the DOMHelpers::parse_attribute() or similar attribute logic, or that this is otherwise outside of the plugin's control?

---

1. Backend (Image block nested in left col, the CoreMedia item on right - thanks @MKlblangenois for the replication steps )

2. WP Frontend + GraphQL Query: Note in the screenshot how the mediaLink (a regular string attribute) is correct, but mediaUrl (a source attribute) is not

[alexwpengine]

Apologies, you are correct @justlevine. After checking it with XDebug, I found the problem. Here is a summary:

1. mediaLink works because it already has a value. More specifically, in wp-graphql-content-blocks/includes/Blocks/Block.php -> resolve_block_attributes_recursive() it's already passed as $attribute_value correctly.
2. On the contrary, mediaUrl is not passed. It goes to -> wp-graphql-content-blocks/includes/Data/BlockAttributeResolver.php -> resolve_block_attribute(), and then it goes inside DOMHelpers::parse_attribute and then we search the passed html/DOM for the first figure img which has src and return it immediately. This is the technical problem.

I have few ideas of fixing it but I am not sure if that's the correct way:

1. in parse_attribute() correct the logic for mediaUrl, but we need to pass the $key from resolve_block_attributes_recursive() as another parameter and also in resolve_block_attribute(), which complicates it a bit.
2. in resolve_block_attributes_recursive(), add an if statement for mediaUrl and do the logic there. But we will need to add all other possible values, not only mediaUrl.
3. Last option would be to leave it empty/null since it's not passed as an inline comment.

[theodesp]

@MKlblangenois Can you use mediaLink instead of mediaUrl? Here is what I got from the content:

{
  posts {
    nodes {
      editorBlocks {
        ... on CoreMediaText {
          anchor
          renderedHtml
          innerBlocks {
            renderedHtml
            ... on CoreImage {
              name
              attributes {
                url
              }
            }
          }
          attrbutesForCoreMediaText: attributes {
            mediaUrl
            mediaLink
          }
        }
      }
    }
  }
}

{
  "data": {
    "posts": {
      "nodes": [
        {
          "editorBlocks": [
            {
              "anchor": null,
              "renderedHtml": "\r\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\">\r\n  <div class=\"wp-block-media-text__content\">\r\n    \r\n    <figure class=\"wp-block-image size-full is-resized\">\r\n      <img src=\"http://cnb.local/wp-content/uploads/2025/03/universite-de-namur.png\" alt=\"\" class=\"wp-image-7998\" style=\"width:97px;height:auto\" />\r\n    </figure>\r\n    \r\n    \r\n    <h2 class=\"wp-block-heading\">Hello, world!</h2>\r\n    \r\n  </div>\r\n  <figure class=\"wp-block-media-text__media\">\r\n    <img src=\"http://cnb.local/wp-content/uploads/2025/04/Sans-titre-8-2-1024x576.jpg\" alt=\"\" class=\"wp-image-8043 size-full\" />\r\n  </figure>\r\n</div>\r\n",
              "innerBlocks": [
                {
                  "renderedHtml": "\r\n    <figure class=\"wp-block-image size-full is-resized\">\r\n      <img src=\"http://cnb.local/wp-content/uploads/2025/03/universite-de-namur.png\" alt=\"\" class=\"wp-image-7998\" style=\"width:97px;height:auto\" />\r\n    </figure>\r\n    ",
                  "name": "core/image",
                  "attributes": {
                    "url": "http://cnb.local/wp-content/uploads/2025/03/universite-de-namur.png"
                  }
                },
                {
                  "renderedHtml": "\r\n    <h2 class=\"wp-block-heading\">Hello, world!</h2>\r\n    "
                }
              ],
              "attrbutesForCoreMediaText": {
                "mediaUrl": "http://cnb.local/wp-content/uploads/2025/03/universite-de-namur.png",
                "mediaLink": "http://cnb.local/week-end-special-50-ans-de-la-formation-guide-nature/sans-titre-8-3/"
              }
            },
            {},
            {}
          ]
        },
        {
          "editorBlocks": [
            {},
            {},
            {}
          ]
        },
        {
          "editorBlocks": [
            {}
          ]
        }
      ]
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ]
  }
}

I think the problem lies with the mediaUrl selector in block.json.

"mediaUrl": {
			"type": "string",
			"source": "attribute",
			"selector": "figure video,figure img",
			"attribute": "src",
			"role": "content"
		},

📌 What this means: When WordPress loads this block’s content from a post, it will:

Look through the rendered HTML of the block.

Use the CSS selector figure video, figure img to find matching elements.

Get the value of the src attribute from the first matched element.

Assign that value to the mediaUrl attribute inside the block’s React/JS object state.

📦 Example: Given this HTML

<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile">
  <div class="wp-block-media-text__content">
    <figure class="wp-block-image size-full is-resized">
      <img src="http://cnb.local/wp-content/uploads/2025/03/universite-de-namur.png" alt="" />
    </figure>
    <h2>Hello, world!</h2>
  </div>
  <figure class="wp-block-media-text__media">
    <img src="http://cnb.local/wp-content/uploads/2025/04/Sans-titre-8-2-1024x576.jpg" alt="" />
  </figure>
</div>

📑 The attribute parsing will: Scan for figure video or figure img in order.

Find:

<img src="http://cnb.local/wp-content/uploads/2025/03/universite-de-namur.png" ... />

Grab the src value (http://cnb.local/wp-content/uploads/2025/03/universite-de-namur.png)

Assign this value to mediaUrl

⚠️ The "Problem": If the intention was to grab the second image (Sans-titre-8-2-1024x576.jpg inside .wp-block-media-text__media), this selector will only grab the first match it encounters.

✅ Possible Fix: If we coukld wanted to target the image inside .wp-block-media-text__media to narrow the selector down:

"selector": ".wp-block-media-text__media img"

but this solution is not portable i think

[colinmurphy]

@@MKlblangenois closing out this issue but please re-open if this is not resolved for you. Thanks again for opening an issue for this.

[justlevine]

@colinmurphy was the bug fixed? the last comment on this issue is @theodesp 's proposal , and my assumption is the ideal solution would have come in the form of a fix inside DOMHelpers.

Replication here if you wish to try yourself: https://github.com/wpengine/wp-graphql-content-blocks/issues/373#issuecomment-2855139286