Pagebuilder content type extension mobile responsive bug | Prevents developers extending mobile functionality

[RickyGoacher]

Preconditions and environment

• Magento version: Adobe Commerce ver. 2.4.5

When attempting to extend a pagebuilder content type to add in additional functionality, if the content type already has an extension by default to add in the min-height option on mobile, the js/converter/style/min-height.js file will error preventing the user from saving the page or block.

This error is caused by the min-height input on mobile having an empty value, which is then returned as undefined by the min-height.js file.

The return statement in the toDom function cannot handle an undefined value.

return value.split(/\+|\-|\*|\//).length > 1 ? "calc(" + (0, _object.get)(data, name) + ")" : value;

Adding a conditional to check if value !== undefined prevents the error and allows the admin user to save the changes for the page or block.

if(value !== undefined) {
  return value.split(/\+|\-|\*|\//).length > 1 ? "calc(" + (0, _object.get)(data, name) + ")" : value;
}

Or adding a conditional to set the value of value if it's undefined

if(value === undefined) {
  value = '100px';
}

This error prevents developers from adding additional functionality to pagebuilder for mobile devices and i believe it also adds to the confusion when it comes to developing for pagebuilder.

Steps to reproduce

1. Create an extension for a pagebuilder content type that already has a mobile form. For example, the banner content type or the row. (Confirm it has the min_height mobile option).
2. Attempt to add additional functionality, for example an input or colour selector that if different for both mobile and desktop.
3. Once the new functionality has been added, attempt to use it.
4. Add a value on Desktop view, switch to mobile and add the mobile value, then attempt to save the page.
5. The page wont save and will throw the error - Cannot read properties of undefined (reading 'split')
   

Expected result

Extending pagebuilder content types which have the min-height option should not result in an error preventing the user from saving the page or block.

This prevents developers extending content types for mobile.

Actual result

Attempting to extend pagebuilder content types (which already have a mobile form) to add additional functionality for mobile view results in an error being thrown from min-height.js and prevents the user from saving the page or block.

Additional information

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.
• 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]

Hi @RickyGoacher. 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. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

• @magento give me 2.4-develop instance - upcoming 2.4.x release
• 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.
⚠️ According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.
🕙 You can find the schedule on the Magento Community Calendar page.
📞 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]

Hi @engcom-Hotel. 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: 👇

• 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

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - 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-Hotel]

Hello @RickyGoacher,

Thanks for the report and collaboration!

We have tried to reproduce the issue in the latest development branch ie 2.4-develop but the issue is not reproducible for us.

We have created the below module to reproduce the issue, please find attached the same for reference:
Magz.zip

We are able to save for both Desktop and Mobile versions. Please let us know if we missed anything.

Thanks

[RickyGoacher]

Hi @engcom-Hotel ,

Thanks for taking a look at this. Looking at the module you've attached I can see that you have created a new content type.
The issue here is with extending the default content types that already have a mobile form under ui_components
For example the banner content type:

Extending this mobile form pagebuilder_banner_mobile_form.xml, or any other mobile form available by default causes the error mentioned.

I've attached an example of this below.
Example.zip

In this example I've added the option to change the overlay colour for the banner on mobile.

By setting the overlay colour on Desktop view, then switching to mobile view and setting the colour for mobile, the error will appear when you attempt to save the page. (Some times also while switching between mobile and desktop view)

Desktop

Mobile

Error in console

This issue occurs because all the default content types with mobile form have a mobile min-height option. This is why we see the min-height error.

[engcom-Hotel]

Hello @RickyGoacher,

Thanks for the updates!

We are now able to reproduce the issue. Please have a look into the below screenshot for reference:

Hence confirming the issue.

Thanks