Media in ACF WYWIWYG field is serving the front end path instead of the backend path

mmgyshoaf commented 2 months ago

Description

I updated the setting here to "Use the WordPress domain for media URLs in post content", existing content that uses ACF WYSIWYG field is still serving the image with the front end URL instead of the WordPress domain. Screenshot of my settings:

Screenshot 2024-09-18 at 2 58 35 PM

Steps to reproduce

Enable Faust plugin
Create ACF WYSIWYG field and populate with an image, when viewed the default is to use the FE domain for the image path, which doesn't work.
Update the Faust config to "Use the WordPress domain for media URLs in post content"
GraphQL query still returns the FE path for the image

Additional context

This is a multisite environment. We updated this setting for all sites. Some sites will now display the cms path for new content, other sites are still rewriting to the FE path.

@faustwp/core Version

3.0.0

@faustwp/cli Version

3.0.0

FaustWP Plugin Version

1.4.1

WordPress Version

6.6.2

Additional environment details

No response

Please confirm that you have searched existing issues in the repo.

[X] Yes

josephfusco commented 2 months ago

Hey @mmgyshoaf, thanks for reporting this issue. Do you have any other plugins active on your site when experiencing this behavior? Any additional info you may have with that will help us reproduce this issue.

mmgyshoaf commented 2 months ago

@josephfusco thanks for looking into this. This is a multisite setup, here are the plugins that are enabled network wide:

ACF Content Analysis for Yoast SEO
ACF Content Analysis for Yoast SEO
Advanced Custom Fields PRO
Change WP Mail From Details
Classic Editor
Disable Comments
Faust.js™
Manage Notification E-mails
Simple History
WordPress Multisite Content Copier/Updater
WP Engine Smart Plugin Manager
WP Engine Smart Search
WP Webhooks
WPGraphQL
WPGraphQL Filter Query
WPGraphQL for ACF
WPGraphQL Smart Cache
WPS Menu Exporter
Yoast SEO

Interestingly, we have two sites where we are seeing the images use the correct path on one, but not the other. Same codebase, and I've double-checked that the Faust and GraphQL settings all appear to be the same.

jasonbahl commented 1 month ago

@mmgyshoaf can you share the query(s) you are running and their results? both with and without the option in Faust checked? can you also share a .zip of your ACF Field Group exported as JSON so we can reproduce exactly?

josephfusco commented 1 month ago

Hey @mmgyshoaf, I am unable to reproduce this issue locally, but here is what I've tried so far:

Multisite w/ subdomains using Local w/ 4 total sites in the network.
1. media.local
2. bravo.media.local
3. charlie.media.local
4. delta.media.local
Faust and WPGraphQL settings are all the same across the sites, with "Use the WordPress domain for media URLs in post content" active.
I've inserted 3 images in each WYSIWYG field for the hello world post on each subsite.

Here is the ACF export I used that adds a single WYSIWYG field to each post: acf-export-2024-10-02.json

Here is the query I used to see the images in the WYSIWYG field:

{
  posts {
    nodes {
      __typename
      wysiwyg {
        __typename
        myContent
      }
    }
  }
}

Here is an example response showing all images in the WYSIWYG using the WordPress URL, with the same response both as an authenticated user and public user.

CleanShot 2024-10-02 at 13 24 52@2x

@mmgyshoaf can you share the query(s) you are running and their results? both with and without the option in Faust checked? can you also share a .zip of your ACF Field Group exported as JSON so we can reproduce exactly?

Providing the above would help us better assist with resolving issue you are experiencing.

MMGYGit commented 1 month ago

Hi @josephfusco thank you for taking a look at this issue!

Here's the ACF export: acf-export.json

I get the same response whether or not the Faust box is checked. FYI the cms subdomain for WordPress, and preprod is the subdomain for the frontend.

Here is the query:

 page(id: $databaseId, idType: DATABASE_ID, asPreview: $asPreview) {
            title
            template {
                ... on DefaultTemplate {
                    pageContent {
                        content {
                            ... on PageContentContentFullWidthCopyLayout {
                                fieldGroupName
                                orientation
                                headline
                                copyWidth
                                copyColumns {
                                    subheadline
                                    copy
                                    ctaColumns {
                                        cta {
                                            target
                                            title
                                            url
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

Response from the site where it is not working, same response whether or not the Faust option is checked or not:

{
  "data": {
    "page": {
      "template": {
        "templateName": "Default",
        "pageContent": {
          "content": [
            {
              "fieldGroupName": "PageContentContentFullWidthCopyLayout",
              "orientation": [
                "left"
              ],
              "headline": null,
              "copyWidth": [
                "full"
              ],
              "copyColumns": [
                {
                  "subheadline": "Image in a WYSIWYG",
                  "copy": "<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-598\" src=\"https://preprod.capitollakes.org/wp-content/uploads/sites/11/2024/09/CL_051319_BLP_Interior_Web_Final-42-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" srcset=\"https://preprod.capitollakes.org/wp-content/uploads/sites/11/2024/09/CL_051319_BLP_Interior_Web_Final-42-300x200.jpg 300w, https://preprod.capitollakes.org/wp-content/uploads/sites/11/2024/09/CL_051319_BLP_Interior_Web_Final-42-1024x683.jpg 1024w, https://preprod.capitollakes.org/wp-content/uploads/sites/11/2024/09/CL_051319_BLP_Interior_Web_Final-42-768x512.jpg 768w, https://preprod.capitollakes.org/wp-content/uploads/sites/11/2024/09/CL_051319_BLP_Interior_Web_Final-42.jpg 1200w\" sizes=\"(max-width: 300px) 100vw, 300px\" /></p>\n",
                  "ctaColumns": null
                }
              ]
            }
          ]
        }
      }
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ],
    "graphqlSmartCache": {
      "graphqlObjectCache": []
    }
  }
}

On site where it is working as expected, Faust box is checked:

{
  "data": {
    "page": {
      "template": {
        "templateName": "Default",
        "pageContent": {
          "content": [
            {
              "fieldGroupName": "PageContentContentFullWidthCopyLayout",
              "orientation": [
                "left"
              ],
              "headline": null,
              "copyWidth": [
                "full"
              ],
              "copyColumns": [
                {
                  "subheadline": "Testing WYSIWYG Images",
                  "copy": "<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-10989\" src=\"https://cms.mirabellaasu.org/wp-content/uploads/sites/10/2024/10/MBA_PhysicalTherapy-Rehab-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" srcset=\"https://cms.mirabellaasu.org/wp-content/uploads/sites/10/2024/10/MBA_PhysicalTherapy-Rehab-300x200.jpg 300w, https://cms.mirabellaasu.org/wp-content/uploads/sites/10/2024/10/MBA_PhysicalTherapy-Rehab-1024x683.jpg 1024w, https://cms.mirabellaasu.org/wp-content/uploads/sites/10/2024/10/MBA_PhysicalTherapy-Rehab-768x512.jpg 768w, https://cms.mirabellaasu.org/wp-content/uploads/sites/10/2024/10/MBA_PhysicalTherapy-Rehab-1536x1025.jpg 1536w, https://cms.mirabellaasu.org/wp-content/uploads/sites/10/2024/10/MBA_PhysicalTherapy-Rehab-2048x1366.jpg 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" /></p>\n",
                  "ctaColumns": null
                }
              ]
            }
          ]
        }
      }
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ],
    "graphqlSmartCache": {
      "graphqlObjectCache": []
    }
  }
}

Faust box not checked, this site will toggle back and forth using the WordPress domain based on the box being checked:

{
  "data": {
    "page": {
      "template": {
        "templateName": "Default",
        "pageContent": {
          "content": [
            {
              "fieldGroupName": "PageContentContentFullWidthCopyLayout",
              "orientation": [
                "left"
              ],
              "headline": null,
              "copyWidth": [
                "full"
              ],
              "copyColumns": [
                {
                  "subheadline": "Testing WYSIWYG Images",
                  "copy": "<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-10989\" src=\"https://preprod.mirabellaasu.org/wp-content/uploads/sites/10/2024/10/MBA_PhysicalTherapy-Rehab-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" srcset=\"https://preprod.mirabellaasu.org/wp-content/uploads/sites/10/2024/10/MBA_PhysicalTherapy-Rehab-300x200.jpg 300w, https://preprod.mirabellaasu.org/wp-content/uploads/sites/10/2024/10/MBA_PhysicalTherapy-Rehab-1024x683.jpg 1024w, https://preprod.mirabellaasu.org/wp-content/uploads/sites/10/2024/10/MBA_PhysicalTherapy-Rehab-768x512.jpg 768w, https://preprod.mirabellaasu.org/wp-content/uploads/sites/10/2024/10/MBA_PhysicalTherapy-Rehab-1536x1025.jpg 1536w, https://preprod.mirabellaasu.org/wp-content/uploads/sites/10/2024/10/MBA_PhysicalTherapy-Rehab-2048x1366.jpg 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" /></p>\n",
                  "ctaColumns": null
                }
              ]
            }
          ]
        }
      }
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ],
    "graphqlSmartCache": {
      "graphqlObjectCache": []
    }
  }
}

If you have access to the WP Engine helpdesk, I have an open ticket there as well, they're replicating it in my environments. https://help.wpengine.com/hc/en-us/requests/7304303 They're the ones that suggested that I open this ticket.

Thanks! Matt

jasonbahl commented 1 month ago

FYI the cms subdomain for WordPress, and preprod is the subdomain for the frontend.

@josephfusco ^ I don't think we tried with these settings being configured differently. This might be the missing bit of info we needed to reproduce 👀

theodesp commented 1 month ago

FYI all the logic for src replacements are located in this filter

add_filter( 'the_content', __NAMESPACE__ . '\\content_replacement' );

https://github.com/wpengine/faustjs/blob/canary/plugins/faustwp/includes/replacement/callbacks.php#L34-L67

wpengine / faustjs