Pagebuilder custom style property does not render

[alexmtch]

Preconditions (*)

1. Magento EE 2.3.5-p1

Steps to reproduce (*)

1. Create file app/code/Vendor/Module/view/adminhtml/pagebuilder/content_type/button_item.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
    <type name="button-item">
        <appearances>
            <appearance name="default">
                <elements>
                    <element name="link">
                        <style name="__hover_text_color" source="__hover_text_color"/>
                    </element>
                    <element name="empty_link">
                        <style name="__hover_text_color" source="__hover_text_color"/>
                    </element>
                </elements>
            </appearance>
        </appearances>
    </type>
</config>

2. Create file app/code/Vendor/Module/view/adminhtml/ui_component/pagebuilder_button_item_form.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="advanced">
        <field name="__hover_text_color" sortOrder="55" formElement="colorPicker">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="disabledValues" xsi:type="array">
                        <item name="none" xsi:type="string">none</item>
                    </item>
                </item>
            </argument>
            <settings>
                <label translate="true">Hover Text Color</label>
                <componentType>colorPicker</componentType>
                <placeholder translate="true">No Color</placeholder>
                <validation>
                    <rule name="validate-color" xsi:type="boolean">true</rule>
                </validation>
                <dataScope>__hover_text_color</dataScope>
                <additionalClasses>
                    <class name="admin__field-medium">true</class>
                </additionalClasses>
                <imports>
                    <link name="setDisabled">ns = ${ $.ns }, index = border:value</link>
                </imports>
            </settings>
            <formElements>
                <colorPicker>
                    <settings>
                        <colorPickerMode>full</colorPickerMode>
                        <colorFormat>hex</colorFormat>
                    </settings>
                </colorPicker>
            </formElements>
        </field>
    </fieldset>
</form>

Expected result (*)

1. The button will render with a style property named "--hover-text-color : ..."

Actual result (*)

1. The property isn't rendered without errors print.

I tried with another property like "background-color" or "color" and it works well. I tried with "backgound-test" and it's not rendered. I suppose something is excluding properties not from a list. I would like to implement this for adding this css trick :

span:hover {
    color: var(--color-hover);
}

---

Please provide Severity assessment for the Issue as Reporter. This information will help during Confirmation and Issue triage processes.

• [x] Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

[m2-assistant[bot]]

Hi @alexmtch. Thank you for your report. To help us process this issue please make sure that you provided the following information:

• Summary of the issue
• Information on your environment
• Steps to reproduce
• Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento give me 2.4-develop instance - upcoming 2.4.x release

For more details, please, review the Magento Contributor Assistant documentation.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[engcom-Oscar]

Hello @alexmtch Thank you for contribution and collaboration!

@sdzhepa, could you please move this issue into Magento Commerce private repository where it could be fixed and delivered by Solution Partners Contribution Program. Current repository and issue tracker aimed at Magento Open Source version only and the main focus is community contribution/collaboration. It described in Issue reporting guidelines and it is a part of the issue report template:

Verify, that the issue you are about to report does not relate to the Magento Commerce. GitHub is intended for Magento Open Source users to report on issues related to Open Source only. There are no account management services associated with GitHub. You can report Commerce-related issues in one of two ways:

• You can use the Support portal associated with your account
• If you are a Partner reporting on behalf of a merchant, use the Partner portal.

[omiroshnichenko]

Hi, @alexmtch. Unfortunately, it is not possible now. Because knockout.js doesn't support CSS variables. It could be done with extending style binding from the Pagebuilder side, but it is more feature request than a bug. I am gonna move this issue to the Page Builder repo.

[m2-assistant[bot]]

Hi @alexmtch. Thank you for your report. To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.