Magento 2 Page Builder图片元素自定义字段无法保存值求助

1. 配置UI组件字段 #

在自定义模块下创建view/adminhtml/ui_component/pagebuilder_image_form.xml，正确设置字段的dataScope（决定字段值在元素JSON数据中的存储键名）：

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="general">
        <field name="custom_text" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataScope" xsi:type="string">custom_text</item>
                    <item name="label" xsi:type="string" translate="true">自定义文本</item>
                    <item name="source" xsi:type="string">image</item>
                    <item name="sortOrder" xsi:type="number">25</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

2. 注册Page Builder元素字段 #

在模块的view/adminhtml/pagebuilder/image.xml中，将自定义字段添加到元素的字段列表，确保Page Builder识别该字段：

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
    <type name="image" label="图片">
        <fields>
            <field name="custom_text" sortOrder="25" formElement="input">
                <settings>
                    <label translate="true">自定义文本</label>
                    <dataType>text</dataType>
                </settings>
            </field>
        </fields>
    </type>
</config>

3. 确保数据被正确序列化保存 #

Page Builder的元素数据会被序列化存储到cms_page或cms_block的content字段（JSON格式），上述配置正确的情况下，字段值会自动被包含在元素的JSON数据中。如果仍无法保存，检查是否有第三方插件拦截了Page Builder的保存逻辑，或者字段配置文件未被正确加载。

4. 插件增强数据持久化（可选） #

若默认保存逻辑未包含自定义字段，创建插件拦截Magento\PageBuilder\Model\Content\Type\Image的prepareData方法：

• 在etc/adminhtml/di.xml注册插件：

<type name="Magento\PageBuilder\Model\Content\Type\Image">
    <plugin name="add_custom_text_to_image" type="Vendor\Module\Plugin\PageBuilder\ImageTypePlugin" />
</type>

• 创建插件类Vendor\Module\Plugin\PageBuilder\ImageTypePlugin.php：

<?php
namespace Vendor\Module\Plugin\PageBuilder;

use Magento\PageBuilder\Model\Content\Type\Image;

class ImageTypePlugin
{
    public function afterPrepareData(Image $subject, array $result)
    {
        if (isset($subject->getData('custom_text'))) {
            $result['custom_text'] = $subject->getData('custom_text');
        }
        return $result;
    }
}

5. 前端渲染字段值 #

复制vendor/magento/module-page-builder/view/frontend/templates/content-type/image/html.phtml到自定义模块的view/frontend/templates/content-type/image/html.phtml，添加自定义字段的渲染代码：

<?php /** @var \Magento\PageBuilder\Model\Content\Type\Image $block */ ?>
<div class="pagebuilder-image-wrapper">
    <?php echo $block->getImageHtml(); ?>
    <?php if ($block->getData('custom_text')): ?>
        <div class="custom-text"><?= $block->escapeHtml($block->getData('custom_text')) ?></div>
    <?php endif; ?>
</div>

6. 清理缓存并测试 #

执行以下命令更新系统配置并清理缓存：

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flush

之后进入后台编辑CMS页面/区块，添加图片元素并填写自定义字段值，保存后重新加载页面，检查字段值是否正常保留。

内容的提问来源于stack exchange，提问作者Krishna