Pagebuilder not using dynamic URL when selecting image in text element

[mdevrees]

Preconditions and environment

• 2.4.6-p8
• Magento Commerce Edition

Steps to reproduce

1. Make sure the pagebuilder is used and Use Static URLs for Media Content in WYSIWYG is set to No (Stores > Config > General > Content Management > WYSIWYG Options)
2. Create a new CMS page (Content > [Elements] Pages). Allow for all stores
3. When adding content, first add a row and within that row add a Text element
4. Insert/edit Image button
5. On the right side of the Source field, press the 'browse files' button. This opens the Select Images overlay
6. Upload a new image and then select that image.

Expected result

The URL field is filled with the dynamic media url ({{media url="/path/to/image.jpg"}}) but instead a fully resolved url is shown.

This result is expected because we use an internally uploaded image and it is not referring to a third party source.

Actual result

The URL to the selected image is completely resolved. Meaning that every website will resolve the same image. This causes issues with CSP.

Additional information

This is a multi-website shop and some sites share the same CMS information, so not all pages are linked to a store ID. Having a resolved URL means that the frontend will load images from another domain.

Release note

No response

Triage and priority

• [ ] Severity: S0 - Affects critical data or functionality and leaves users without workaround.
• [ ] Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
• [X] Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
• [ ] Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
• [ ] Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

[m2-assistant[bot]]

Hi @mdevrees. Thank you for your report. To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce.

• For more details, review the Magento Contributor Assistant documentation.
• Add a comment to assign the issue: @magento I am working on this

• To learn more about issue processing workflow, refer to the Code Contributions.

  Join Magento Community Engineering Slack and ask your questions in #github channel. :warning: According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting. :clock10: You can find the schedule on the Magento Community Calendar page. :telephone_receiver: The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

[m2-assistant[bot]]

Hi @engcom-Bravo. Thank you for working on this issue. In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• [ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• [ ] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• [ ] 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• [ ] 4. Verify that the issue is reproducible on 2.4-develop branch
  Details

  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
• [ ] 5. Add label Issue: Confirmed once verification is complete.
• [ ] 6. Make sure that automatic system confirms that report has been added to the backlog.

[engcom-Bravo]

Hi @mdevrees,

Thanks for your reporting and collaboration.

We have verified the issue in Latest 2.4-develop instance and the issue is not reproducible.kindly refer the screenshots.

The URL field is filled with the dynamic media url ({{media url="/path/to/image.jpg"}})

Could you please let us know if we are missing anything.

Thanks.

[mdevrees]

Hi @engcom-Bravo

Thanks for checking. I checked with a clean Magento 2.4.7-p3 instance now and below is my result:

I did the same steps as mentioned in the description: add a row, within that row add a Text element and in that Text element select an image.

I could also try 2.4-develop, what would be the composer install command for that?

[engcom-Bravo]

Hi @mdevrees,

Thanks for your update.

Could you please also try to reproduce in Latest Version Magento 2.4.8-beta1.For installing Magento 2.4-develop you can use this command git clone https://github.com/magento/magento2.git

Thanks.

[mdevrees]

Hi @engcom-Bravo

I installed 2.4.8-beta1 (this tag specifically), I notice that the tinymce editor now uses the {{media url=""}} correctly. It looks like my issue pertains specifically to the usage of Pagebuilder. I'm going to check the pagebuilder results in more detail and will report back when I know more.

[mdevrees]

Hi @engcom-Bravo

I investigated a bit with a few different Magento versions, below are my findings:

Clean Magento Open Source 2.4.8-beta1:

• The issue is not present here, Apparently the page builder is not available in this build, so instead it uses TinyMCE wysiwyg.

Clean Magento Open Source version 2.4.7-p3 (comes with Page builder):

• The homepage is relatively clean, it only consists of a HTML, a Row element and a Text element within that Row element:
  • Pagebuilder uses media url in text field when no other text is written (correct)
  • Pagebuilder resolves media url when image and text are combined (not correct)

Clean Magento Open Source version 2.4.6-p8 (comes with Page builder):

• The homepage is relatively clean, it only consists of a HTML, a Row element and a Text element within that Row element:
  • Pagebuilder uses media url in text field when no other text is written (correct)
  • Pagebuilder resolves media url when image and text are combined (not correct)

Clean Adobe Commerce Enterprise version 2.4.6-p8 (comes with Page builder):

• The homepage is relatively clean, it only consists of a HTML, a Row element and a Text element within that Row element:
  • Pagebuilder uses media url in text field when no other text is written (correct)
  • Pagebuilder resolves media url when image and text are combined (not correct)

Installation of both Open Source versions is done via composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition

I validate the contents of the cms page in the cms_page table, contents column. Run that through a html formatter to get output like below

Correct:

<style>#html-body [data-pb-style=MH6F3XF]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}</style>
<div data-content-type="html" data-appearance="default" data-element="main">&lt;p&gt;CMS homepage content goes here.&lt;/p&gt;</div>
<div data-content-type="row" data-appearance="contained" data-element="main">
   <div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="MH6F3XF">
      <div data-content-type="text" data-appearance="default" data-element="main">
         <p><img src="{{media url=&quot;.renditions/wysiwyg/anwb-woonwerk.png&quot;}}" alt="" width="1000" height="780"></p>
      </div>
   </div>
</div>

Incorrect:

<style>#html-body [data-pb-style=UX52J5W]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}</style>
<div data-content-type="html" data-appearance="default" data-element="main">&lt;p&gt;CMS homepage content goes here.&lt;/p&gt;</div>
<div data-content-type="row" data-appearance="contained" data-element="main">
   <div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="UX52J5W">
      <div data-content-type="text" data-appearance="default" data-element="main">
         <p><img id="CFGHY7S" style="width: 1000px; height: 780px;" src="https://magento.lndo.site/media/.renditions/wysiwyg/anwb-woonwerk.png" alt="" width="1000" height="780"></p>
         <p>This is extra text below the image</p>
      </div>
   </div>
</div>

Is there a 2.4.8-beta1 version available that includes Page builder? Then I could also test it on that version.

[hostep]

@mdevrees: good work!

You can also install 2.4.8-beta1 using composer, which will come with pagebuilder included:

$ composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition=2.4.8-beta1 ./some-directory

[engcom-Bravo]

@hostep Thanks for your Contribution.

Hi @mdevrees,

Thanks for your update.

Could you please try with installing 2.4.8-beta1 using composer(with pagebuilder) and please let us know if you are still facing any issue.

Thanks.

[mdevrees]

Hi @engcom-Bravo

I installed with 2.4.8-beta1 and I observed the same functionality/ issue as described in my previous post.

Clean Magento Open Source version 2.4.8-beta1 (comes with Page builder):

• The homepage is relatively clean, it only consists of a HTML, a Row element and a Text element within that Row element: -- Pagebuilder uses media url in text field when no other text is written (correct) -- Pagebuilder resolves media url when image and text are combined (not correct)

<style>#html-body [data-pb-style=DUQ883O]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}</style><div data-content-type="html" data-appearance="default" data-element="main">&lt;p&gt;CMS homepage content goes here.&lt;/p&gt;
</div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="DUQ883O"><div data-content-type="text" data-appearance="default" data-element="main"><p><img style="width: 884px; height: 617px;" src="https://magento.lndo.site/media/.renditions/wysiwyg/2024-05-31_13-43.png" alt="" width="884" height="617"></p>
<p>this is text after image</p></div></div></div>

[engcom-Bravo]

Hi @mdevrees,

Thanks for your update.

We have verified the issue in Latest 2.4-develop instance and the issue is reproducible.Kindly refer the screenshots.

Image and text combined

using only image

Pagebuilder resolves media url when image and text are combined

Hence Confirming the issue.

Thanks.

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/AC-13327 is successfully created for this GitHub issue.

[m2-assistant[bot]]

:white_check_mark: Confirmed by @engcom-Bravo. Thank you for verifying the issue.
Issue Available: @engcom-Bravo, You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself.