Magento 2 custom field not saving its value in page builder

Question

I am following below link to add custom field in page builder image element only.

How to use custom field in the HTML of Magento 2 pagebuilder?

But it's not saving the value. When I click on the save button and the page reloads, it shows an empty field.

How can I save its value?

Thanks in advance

I wants to add custom text field in image element and save its value to database and apply it in frontend.

Answer 1

Here, I am sharing the solution for those who may be facing the same issue.

Step 1: Create custom module.

Step 2: Create file image.xml under app/code/vendor/module/adminhtml/pagebuilder/content_type

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
    <type name="image">
        <appearances>
            <appearance name="full-width"
                        preview_template="Magento_PageBuilder/content-type/image/full-width/preview"
                        master_template="Magento_PageBuilder/content-type/image/full-width/master">
                <elements>
                    <element name="image_dimension">
                        <attribute name="image_width" source="width"/>
                        <attribute name="image_height" source="height"/>
                    </element>
                </elements>
            </appearance>
        </appearances>
    </type>
</config>

Step 3 : Create file pagebuilder_image_form.xml under app/code/vendor/module/view/adminhtml/ui_component

<!--
/**
 * 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="seo">
        <field name="image_width" sortOrder="30" formElement="input">
            <settings>
                <label translate="true">Image Width</label>
                <validation>
                    <rule name="validate-string" xsi:type="boolean">true</rule>
                </validation>
            </settings>
        </field>
        <field name="image_height" sortOrder="31" formElement="input">
            <settings>
                <label translate="true">Image Height</label>
                <validation>
                    <rule name="validate-string" xsi:type="boolean">true</rule>
                </validation>
            </settings>
        </field>        
    </fieldset>
</form>

Step 5 : Run below command

php bin/magento setup:upgrade php bin/magento static:content:deploy -f php bin/magento c:f

Note: In the image.xml file, the "source" attribute is where we need to specify the element. To set the height and width of the image, I have used source="height" and source="width" respectively.