Create programmatically a product attribute editable with Page Builder

Question

i need to programmatically create a bunch of custom product attributes, some editable with Page Builder. So i followed https://devdocs.magento.com/page-builder/docs/how-to/how-to-use-pagebuilder-for-product-attributes.html

First of all, i developed a custom module and created my custom attributes via Setup script. For instance, nota_cata has to be editable with PageBuilder:

'nota_cata' => [ 'type' => 'text', 'backend' => '', 'frontend' => '', 'label' => 'Nota de cata', 'input' => 'textarea', 'class' => '', 'source' => '', 'global' => \Magento\Catalog\Model\ResourceModel\Eav\Attribute::SCOPE_STORE, 'visible' => true, 'required' => false, 'user_defined' => true, 'default' => '', 'searchable' => false, 'filterable' => false, 'comparable' => false, 'visible_on_front' => true, 'used_in_product_listing' => false, 'unique' => false, 'apply_to' => 'simple,grouped,configurable,downloadable,virtual,bundle', 'attribute_set_id' => self::ATTR_SET, 'group' => '', 'source' => '', ]

Next, i created app/code/Vendor/Module/view/adminhtml/ui_component/product_form.xml file to change my attribute input to Page Builder:

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="drinks">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Drinks</item>
                <item name="sortOrder" xsi:type="number">100</item>
            </item>
         </argument>

        <field name="nota_cata">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="class" xsi:type="string">Magento\Catalog\Ui\Component\Category\Form\Element\Wysiwyg</item>
                    <item name="formElement" xsi:type="string">wysiwyg</item>
                    <item name="label" translate="true" xsi:type="string">Nota de Cata</item>
                    <item name="wysiwygConfigData" xsi:type="array">
                        <item name="is_pagebuilder_enabled" xsi:type="boolean">true</item>
                        <item name="pagebuilder_button" xsi:type="boolean">true</item>
                    </item>
                    <item name="template" xsi:type="string">ui/form/field</item>
                    <item name="source" xsi:type="string">product</item>
                    <item name="wysiwyg" xsi:type="boolean">true</item>
                    <item name="dataScope" xsi:type="string">nota_cata</item>
                    <item name="sortOrder" xsi:type="number">60</item>
                    <item name="rows" xsi:type="number">8</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

But i get this in backend product form:

There's not only a pagebuilder button as expected, but also a text area with my attribute info. Both fields show attribute current data and change its value.

How can i make that only pagebuilder link is shown in frontend?

Any help will be appreciated. Thanks in advance, Antonio

Answer 1

It seems the addAttribute method does not install this pagebuilder property. The solution for me was to add the attribute and then immediatly run the updateAttribute method as defined by @Dave

 $eavSetup = $this->eavSetupFactory->create(['setup' => $this->moduleDataSetup]);

    $eavSetup->addAttribute(
        Product::ENTITY,
        self::ATTRIBUTE_CODE,
        [
            'type' => 'text',
            'frontend' => '',
            'label' => self::ATTRIBUTE_LABEL,
            'input' => 'textarea',
            'global' => ScopedAttributeInterface::SCOPE_GLOBAL,
            'visible' => true,
            'required' => false,
            'user_defined' => true,
            'default' => '',
            'searchable' => false,
            'filterable' => false,
            'comparable' => false,
            'visible_on_front' => false,
            'unique' => false,
            'apply_to' => '',
            'group' => 'Content',
            'attribute_set_id' => 'Default',
            'used_in_product_listing' => false

        ]
    );

     // For whatever reason, can only set these properties with updateAttribute
    $eavSetup->updateAttribute(
        Product::ENTITY,
        self::ATTRIBUTE_CODE,
        [
            'is_pagebuilder_enabled' => 1,
            'is_html_allowed_on_front' => 1,
            'is_wysiwyg_enabled' => 1
        ]
    );

Answer 2

I think there's some confusion with our DevDocs article, you don't require a UI component field alongside the definition of the attribute, we'll get this updated.

The only additional flag your attribute requires to be supported by Page Builder is is_pagebuilder_enabled. We have a patch within the main Page Builder module that handles updating this attribute for the product description: app/code/Magento/PageBuilder/Setup/Patch/Data/UpdateProductAttribute.php

        $eavSetup = $this->eavSetupFactory->create(['setup' => $this->moduleDataSetup]);

        $eavSetup->updateAttribute(
            \Magento\Catalog\Model\Product::ENTITY,
            'description',
            [
                'is_pagebuilder_enabled' => 1
            ]
        );

Simply ensuring the is_pagebuilder_enabled value is set to 1 during or after attribute creation will enable Page Builder for your field alternatively, you can update this through the UI as mentioned in https://devdocs.magento.com/page-builder/docs/how-to/how-to-use-pagebuilder-for-product-attributes.html.