Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MERL-1228: Fix issue with rewriting links to front end #1624

Merged
merged 16 commits into from
Nov 15, 2023

Conversation

mindctrl
Copy link
Contributor

@mindctrl mindctrl commented Oct 27, 2023

Tasks

  • If a code change, I have written testing instructions that the whole team & outside contributors can understand.
  • I have written and included a comprehensive changeset to properly document the changes I've made.
  • phpunit tests added

Description

Take two of #1603.
Adjusts the URL replacement logic to avoid rewriting links to files in the uploads dir.

Related Issue(s):

Testing

Bug is described here: #1569

See this comment with info on demo data, queries, and results.

Ensure that links to posts, images, files, etc. are rewritten as expected. Try to break it!

@mindctrl mindctrl requested a review from a team as a code owner October 27, 2023 14:00
@changeset-bot
Copy link

changeset-bot bot commented Oct 27, 2023

🦋 Changeset detected

Latest commit: 6b50f68

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@faustwp/wordpress-plugin Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions

This comment was marked as off-topic.

plugins/faustwp/includes/replacement/callbacks.php Outdated Show resolved Hide resolved
@@ -14,7 +14,6 @@
exit;
}

add_filter( 'graphql_request_results', __NAMESPACE__ . '\\url_replacement' );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also still testing this removal to ensure nothing broke. The tests pass, but we need to confirm we're not breaking things we're not testing.

@TeresaGobble
Copy link
Contributor

TeresaGobble commented Nov 2, 2023

Hi John, nice work on this! It's such a sneaky issue, I'm glad we have a fix in the works! ✨

I'm looking at canary now to see if I can understand what the issue is before testing- I added a couple of media links to a post to reproduce the bug and do not see them being rewritten to the front end:

Screenshot 2023-11-02 at 9 25 05 AM

If my frontend site url is localhost:3000, should I be seeing the youtube link and imgur links being rewritten to localhost:3000?

@mindctrl
Copy link
Contributor Author

mindctrl commented Nov 2, 2023

@TeresaGobble test for links to files in the media library in WP, as opposed to external URLs. Because of the bug we're fixing in #1625, it's trickier to test this one. I recommend temporarily deactivating the Faust plugin, creating some content that links to posts and media hosted on the WP site, save, and then reactivate Faust, and do your testing.

@TeresaGobble
Copy link
Contributor

TeresaGobble commented Nov 2, 2023

Hi @mindctrl! I have some testing results here to share- things are looking good!

It seems like all the src links are being rewritten to localhost:3000. Below is the content from canary:

Screenshot 2023-11-02 at 4 07 21 PM

The items circled in blue are all the items that changed correctly upon switching to this PR's branch. 🎉
I'm noticing we have a few image hrefs that remain the local site address for different dimensions of images, circled in red:

Screenshot 2023-11-02 at 4 16 21 PM

This is a hunch, but I think they refer to the aspect ratios in the block:
Screenshot 2023-11-02 at 4 40 37 PM

I also saw Theo and Blake examine the database directly in the Adminer on Local, and I'm noting all items are being written to the site domain, armadillo.local:

Screenshot 2023-11-02 at 4 45 30 PM

This one's a hard one to parse. I'm wondering if it makes better sense for us to merge the other ticket, and then potentially retest this one with those changes?

@theodesp
Copy link
Member

theodesp commented Nov 6, 2023

I'm seeing the following:

First I deactivated Faust:
I Then created a post with a pdf file, an image and an inline image.

I can see the following in the GraphQL Query which is correct. All media sources point to the WP URL.

Screenshot 2023-11-06 at 12 00 50

Now I enable Faust but I'm not checking any setting:

I can see the following in the GraphQL Query:

Screenshot 2023-11-06 at 12 07 31

All src and href attributes have been re-writen to point to Headless URL.

This the expected behaviour when no setting has been enabled

Since we have specifically the Use the WordPress domain for media URLs in post content setting to rewrite those links back:

Screenshot 2023-11-06 at 12 11 12

When I enable this setting then I get back the original src:

Screenshot 2023-11-06 at 12 10 44

Now we create a new post with Faust Enabled and link in any post content to an item in the media library. We observe the same behaviour when Use the WordPress domain for media URLs in post content is checked.

Some observations:

  • It seems that the changes only affect src and href attributes but not srcset attributes:

  • The editorBlocks attributes are un-nafected and they always point to the original WP URL because the wp-content-blocks plugin only looks at the contents of the database using get_post and parse_blocks

Is this what we want to have?

@mindctrl
Copy link
Contributor Author

mindctrl commented Nov 6, 2023

@TeresaGobble @theodesp thanks for the reviews. re: srcset and editorBlocks, I will push some fixes here today.

@mindctrl
Copy link
Contributor Author

mindctrl commented Nov 7, 2023

Here's the setup I've been using to test:

Active plugins

  • Classic Editor 1.6.3
  • Faust.js (git)
  • Query Monitor 3.14.1
  • WPGraphQL 1.1.8.0
  • WPGraphQL Content Blocks 2.0.0

Post content

Post ID 45

<!-- wp:paragraph -->
<p><a href="http://rewrites.local/hello-world/" data-type="post" data-id="1">Link</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="http://rewrites.local/sample-page/" data-type="page" data-id="2">Another link</a></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":15,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg" alt="" class="wp-image-15"/></figure>
<!-- /wp:image -->

Post ID 41

<a href="http://rewrites.local/hello-world/">link</a>

<a href="http://rewrites.local/hello-world/">thing</a>

pdf

<a href="http://rewrites.local/sample-page/">sample</a>

Post ID 39

<!-- wp:paragraph -->
<p><a href="http://rewrites.local/hello-world/" data-type="post" data-id="1">Hello world</a></p>
<!-- /wp:paragraph -->

Post ID 34

<!-- wp:paragraph -->
<p>This post has a featured image.</p>
<!-- /wp:paragraph -->

Post meta for post ID 34

`_thumnail_id: 15`

guid for Post ID 15, which is the featured image for Post 34
http://rewrites.local/wp-content/uploads/2023/10/IMG_8963.jpg

Query used for all tests

query NewQuery {
  posts(first: 4) {
    nodes {
      databaseId
      content
      editorBlocks {
        ... on CoreParagraph {
          attributes {
            content
          }
        }
        ... on CoreImage {
          attributes {
            url
            src
          }
          mediaDetails {
            sizes {
              sourceUrl
            }
          }
        }
      }
    }
  }
}

Quick link to diff files of these results, for easier comparison locally. #1624 (comment)

Results on canary branch

1. Post/Cat/Image pointing to WP

  • Enable Post and Category URL rewrites (OFF)
  • Use the WordPress domain for media URLs in post content (ON)
Response
{
  "data": {
    "posts": {
      "nodes": [
        {
          "databaseId": 45,
          "content": "\n<p><a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a></p>\n\n\n\n<p><a href=\"http://rewrites.local/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a></p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg\" alt=\"\" class=\"wp-image-15\" srcset=\"http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg 1024w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg 300w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg 768w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg 1536w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /></figure>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a>"
              }
            },
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a>"
              }
            },
            {
              "attributes": {
                "url": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg",
                "src": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
              },
              "mediaDetails": {
                "sizes": [
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-150x150.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg"
                  }
                ]
              }
            }
          ]
        },
        {
          "databaseId": 41,
          "content": "<p><a href=\"http://rewrites.local/hello-world/\">link</a></p>\n<p><a href=\"http://rewrites.local/hello-world/\">thing</a></p>\n<p>pdf</p>\n<p><a href=\"http://rewrites.local/sample-page/\">sample</a></p>\n",
          "editorBlocks": [
            {}
          ]
        },
        {
          "databaseId": 39,
          "content": "\n<p><a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a></p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a>"
              }
            }
          ]
        },
        {
          "databaseId": 34,
          "content": "\n<p>This post has a featured image.</p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "This post has a featured image."
              }
            }
          ]
        }
      ]
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ]
  }
}

2. Post/Cat/Image pointing to Front-end site URL

  • Enable Post and Category URL rewrites (ON)
  • Use the WordPress domain for media URLS in post content (OFF)
Response
{
  "data": {
    "posts": {
      "nodes": [
        {
          "databaseId": 45,
          "content": "\n<p><a href=\"http://localhost:3000/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a></p>\n\n\n\n<p><a href=\"http://localhost:3000/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a></p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg\" alt=\"\" class=\"wp-image-15\" srcset=\"http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg 1024w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg 300w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg 768w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg 1536w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /></figure>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a>"
              }
            },
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a>"
              }
            },
            {
              "attributes": {
                "url": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg",
                "src": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
              },
              "mediaDetails": {
                "sizes": [
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-150x150.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg"
                  }
                ]
              }
            }
          ]
        },
        {
          "databaseId": 41,
          "content": "<p><a href=\"http://localhost:3000/hello-world/\">link</a></p>\n<p><a href=\"http://localhost:3000/hello-world/\">thing</a></p>\n<p>pdf</p>\n<p><a href=\"http://localhost:3000/sample-page/\">sample</a></p>\n",
          "editorBlocks": [
            {}
          ]
        },
        {
          "databaseId": 39,
          "content": "\n<p><a href=\"http://localhost:3000/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a></p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a>"
              }
            }
          ]
        },
        {
          "databaseId": 34,
          "content": "\n<p>This post has a featured image.</p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "This post has a featured image."
              }
            }
          ]
        }
      ]
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ]
  }
}

3. Post/Cat/ pointing to Front-end, Image pointing to WP

  • Enable Post and Category URL rewrites (ON)
  • Use the WordPress domain for media URLS in post content (ON)
Response
{
  "data": {
    "posts": {
      "nodes": [
        {
          "databaseId": 45,
          "content": "\n<p><a href=\"http://localhost:3000/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a></p>\n\n\n\n<p><a href=\"http://localhost:3000/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a></p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg\" alt=\"\" class=\"wp-image-15\" srcset=\"http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg 1024w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg 300w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg 768w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg 1536w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /></figure>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a>"
              }
            },
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a>"
              }
            },
            {
              "attributes": {
                "url": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg",
                "src": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
              },
              "mediaDetails": {
                "sizes": [
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-150x150.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg"
                  }
                ]
              }
            }
          ]
        },
        {
          "databaseId": 41,
          "content": "<p><a href=\"http://localhost:3000/hello-world/\">link</a></p>\n<p><a href=\"http://localhost:3000/hello-world/\">thing</a></p>\n<p>pdf</p>\n<p><a href=\"http://localhost:3000/sample-page/\">sample</a></p>\n",
          "editorBlocks": [
            {}
          ]
        },
        {
          "databaseId": 39,
          "content": "\n<p><a href=\"http://localhost:3000/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a></p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a>"
              }
            }
          ]
        },
        {
          "databaseId": 34,
          "content": "\n<p>This post has a featured image.</p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "This post has a featured image."
              }
            }
          ]
        }
      ]
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ]
  }
}

4. Post/Cat/ pointing to WP, Image pointing to Front-end URL

  • Enable Post and Category URL rewrites (OFF)
  • Use the WordPress domain for media URLS in post content (OFF)
Response
{
  "data": {
    "posts": {
      "nodes": [
        {
          "databaseId": 45,
          "content": "\n<p><a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a></p>\n\n\n\n<p><a href=\"http://rewrites.local/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a></p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg\" alt=\"\" class=\"wp-image-15\" srcset=\"http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg 1024w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg 300w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg 768w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg 1536w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /></figure>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a>"
              }
            },
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a>"
              }
            },
            {
              "attributes": {
                "url": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg",
                "src": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
              },
              "mediaDetails": {
                "sizes": [
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-150x150.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg"
                  }
                ]
              }
            }
          ]
        },
        {
          "databaseId": 41,
          "content": "<p><a href=\"http://rewrites.local/hello-world/\">link</a></p>\n<p><a href=\"http://rewrites.local/hello-world/\">thing</a></p>\n<p>pdf</p>\n<p><a href=\"http://rewrites.local/sample-page/\">sample</a></p>\n",
          "editorBlocks": [
            {}
          ]
        },
        {
          "databaseId": 39,
          "content": "\n<p><a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a></p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a>"
              }
            }
          ]
        },
        {
          "databaseId": 34,
          "content": "\n<p>This post has a featured image.</p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "This post has a featured image."
              }
            }
          ]
        }
      ]
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ]
  }
}

Results on this PR branch

1. Post/Cat/Image pointing to WP

  • Enable Post and Category URL rewrites (OFF)
  • Use the WordPress domain for media URLs in post content (ON)
Response
{
  "data": {
    "posts": {
      "nodes": [
        {
          "databaseId": 45,
          "content": "\n<p><a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a></p>\n\n\n\n<p><a href=\"http://rewrites.local/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a></p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg\" alt=\"\" class=\"wp-image-15\" srcset=\"http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg 1024w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg 300w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg 768w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg 1536w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /></figure>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a>"
              }
            },
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a>"
              }
            },
            {
              "attributes": {
                "url": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg",
                "src": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
              },
              "mediaDetails": {
                "sizes": [
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-150x150.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg"
                  }
                ]
              }
            }
          ]
        },
        {
          "databaseId": 41,
          "content": "<p><a href=\"http://rewrites.local/hello-world/\">link</a></p>\n<p><a href=\"http://rewrites.local/hello-world/\">thing</a></p>\n<p>pdf</p>\n<p><a href=\"http://rewrites.local/sample-page/\">sample</a></p>\n",
          "editorBlocks": [
            {}
          ]
        },
        {
          "databaseId": 39,
          "content": "\n<p><a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a></p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a>"
              }
            }
          ]
        },
        {
          "databaseId": 34,
          "content": "\n<p>This post has a featured image.</p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "This post has a featured image."
              }
            }
          ]
        }
      ]
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ]
  }
}

2. Post/Cat/Image pointing to Front-end site URL

  • Enable Post and Category URL rewrites (ON)
  • Use the WordPress domain for media URLS in post content (OFF)
Response
{
  "data": {
    "posts": {
      "nodes": [
        {
          "databaseId": 45,
          "content": "\n<p><a href=\"http://localhost:3000/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a></p>\n\n\n\n<p><a href=\"http://localhost:3000/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a></p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg\" alt=\"\" class=\"wp-image-15\" srcset=\"http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg 1024w, http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-300x225.jpg 300w, http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-768x576.jpg 768w, http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg 1536w, http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /></figure>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://localhost:3000/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a>"
              }
            },
            {
              "attributes": {
                "content": "<a href=\"http://localhost:3000/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a>"
              }
            },
            {
              "attributes": {
                "url": "http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg",
                "src": "http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
              },
              "mediaDetails": {
                "sizes": [
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-150x150.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg"
                  }
                ]
              }
            }
          ]
        },
        {
          "databaseId": 41,
          "content": "<p><a href=\"http://localhost:3000/hello-world/\">link</a></p>\n<p><a href=\"http://localhost:3000/hello-world/\">thing</a></p>\n<p>pdf</p>\n<p><a href=\"http://localhost:3000/sample-page/\">sample</a></p>\n",
          "editorBlocks": [
            {}
          ]
        },
        {
          "databaseId": 39,
          "content": "\n<p><a href=\"http://localhost:3000/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a></p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://localhost:3000/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a>"
              }
            }
          ]
        },
        {
          "databaseId": 34,
          "content": "\n<p>This post has a featured image.</p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "This post has a featured image."
              }
            }
          ]
        }
      ]
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ]
  }
}

3. Post/Cat/ pointing to Front-end, Image pointing to WP

  • Enable Post and Category URL rewrites (ON)
  • Use the WordPress domain for media URLS in post content (ON)
Response
{
  "data": {
    "posts": {
      "nodes": [
        {
          "databaseId": 45,
          "content": "\n<p><a href=\"http://localhost:3000/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a></p>\n\n\n\n<p><a href=\"http://localhost:3000/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a></p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg\" alt=\"\" class=\"wp-image-15\" srcset=\"http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg 1024w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg 300w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg 768w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg 1536w, http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /></figure>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://localhost:3000/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a>"
              }
            },
            {
              "attributes": {
                "content": "<a href=\"http://localhost:3000/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a>"
              }
            },
            {
              "attributes": {
                "url": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg",
                "src": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
              },
              "mediaDetails": {
                "sizes": [
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-150x150.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg"
                  }
                ]
              }
            }
          ]
        },
        {
          "databaseId": 41,
          "content": "<p><a href=\"http://localhost:3000/hello-world/\">link</a></p>\n<p><a href=\"http://localhost:3000/hello-world/\">thing</a></p>\n<p>pdf</p>\n<p><a href=\"http://localhost:3000/sample-page/\">sample</a></p>\n",
          "editorBlocks": [
            {}
          ]
        },
        {
          "databaseId": 39,
          "content": "\n<p><a href=\"http://localhost:3000/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a></p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://localhost:3000/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a>"
              }
            }
          ]
        },
        {
          "databaseId": 34,
          "content": "\n<p>This post has a featured image.</p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "This post has a featured image."
              }
            }
          ]
        }
      ]
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ]
  }
}

4. Post/Cat/ pointing to WP, Image pointing to Front-end URL

  • Enable Post and Category URL rewrites (OFF)
  • Use the WordPress domain for media URLS in post content (OFF)
Response
{
  "data": {
    "posts": {
      "nodes": [
        {
          "databaseId": 45,
          "content": "\n<p><a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a></p>\n\n\n\n<p><a href=\"http://rewrites.local/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a></p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg\" alt=\"\" class=\"wp-image-15\" srcset=\"http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg 1024w, http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-300x225.jpg 300w, http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-768x576.jpg 768w, http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg 1536w, http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /></figure>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Link</a>"
              }
            },
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/sample-page/\" data-type=\"page\" data-id=\"2\">Another link</a>"
              }
            },
            {
              "attributes": {
                "url": "http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg",
                "src": "http://localhost:3000/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
              },
              "mediaDetails": {
                "sizes": [
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-300x225.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1024x768.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-150x150.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-768x576.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-1536x1152.jpg"
                  },
                  {
                    "sourceUrl": "http://rewrites.local/wp-content/uploads/2023/10/IMG_8963-2048x1536.jpg"
                  }
                ]
              }
            }
          ]
        },
        {
          "databaseId": 41,
          "content": "<p><a href=\"http://rewrites.local/hello-world/\">link</a></p>\n<p><a href=\"http://rewrites.local/hello-world/\">thing</a></p>\n<p>pdf</p>\n<p><a href=\"http://rewrites.local/sample-page/\">sample</a></p>\n",
          "editorBlocks": [
            {}
          ]
        },
        {
          "databaseId": 39,
          "content": "\n<p><a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a></p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "<a href=\"http://rewrites.local/hello-world/\" data-type=\"post\" data-id=\"1\">Hello world</a>"
              }
            }
          ]
        },
        {
          "databaseId": 34,
          "content": "\n<p>This post has a featured image.</p>\n",
          "editorBlocks": [
            {
              "attributes": {
                "content": "This post has a featured image."
              }
            }
          ]
        }
      ]
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ]
  }
}

@mindctrl
Copy link
Contributor Author

mindctrl commented Nov 7, 2023

merl-1228-diffs.zip

zip of the result diffs posted above.

@theodesp
Copy link
Member

theodesp commented Nov 7, 2023

@mindctrl that should be OK will check again today and approve. Thanks.

theodesp
theodesp previously approved these changes Nov 7, 2023
Copy link
Member

@theodesp theodesp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! It would be nice to get more approvals.

@TeresaGobble
Copy link
Contributor

Hi John! You've done an awesome job explaining your test flow and helping me understand the results- thank you so much for your efforts. 💪

I have two questions on the results I'm seeing. I've documented my testing results in a slideshow so I can compare sections a little more readily to test my understanding. Would you please take a look at the two comments I have in the slides here and let me know your thoughts?

Adjust logic in image_source_srcset_replacement
@mindctrl mindctrl merged commit 78a061a into canary Nov 15, 2023
18 checks passed
@mindctrl mindctrl deleted the jp-merl-1228-link-rewrites branch November 15, 2023 12:57
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.

Bug: Replacement of media library URLs in post content
3 participants