Pagebuilder not using dynamic URL when selecting image in text element

mdevrees commented 1 week ago

Preconditions and environment

2.4.6-p8
Magento Commerce Edition

Steps to reproduce

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)
Create a new CMS page (Content > [Elements] Pages). Allow for all stores
When adding content, first add a row and within that row add a Text element
Insert/edit Image button
On the right side of the Source field, press the 'browse files' button. This opens the Select Images overlay
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] commented 1 week ago

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] commented 1 week ago

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 commented 5 days ago

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 commented 4 days ago

Hi @engcom-Bravo

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

Screenshot 2024-10-28 at 16-55-44 Home page _ Pages _ Elements _ Content _ Magento Admin

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 commented 4 days ago

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 commented 3 days ago

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 commented 2 days ago

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 commented 1 day ago

@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

magento / magento2