PageBuilder custom content type for colorPicker fi...

peter_rosinský

Hi everyone,

I'm developing a custom PageBuilder content type in Magento 2.4.8 and I’m struggling to make colorPicker fields work properly.

Everything else (text fields, selects, wysiwyg, image upload) works fine — but color fields do not save or reload their values when I reopen the block in PageBuilder.

Working parts
The block is registered correctly and saves/loads data for all text and select inputs.
Only the colors (`button_color`, `button_text_color`, `background_color`) are lost.

---

content_type XML (simplified)

<element name="main">
<style name="background-color"
source="background_color"
converter="Magento_PageBuilder/js/converter/style/color"
persistence_mode="write"/>

<style name="--button-bg-color"
source="button_color"
converter="Magento_PageBuilder/js/converter/style/color"
persistence_mode="write"/>

<style name="--button-text-color"
source="button_text_color"
converter="Magento_PageBuilder/js/converter/style/color"
persistence_mode="write"/>

<attribute name="background_color" source="background_color" persistence_mode="write"/>
<attribute name="button_color" source="button_color" persistence_mode="write"/>
<attribute name="button_text_color" source="button_text_color" persistence_mode="write"/>
</element>

I also tried adding separate <element name="button_color">...</element> sections as in some core components,

but that either breaks the JS serializer (Cannot read property 'attributes' of undefined) or simply doesn’t persist the value.

<field name="background_color" formElement="colorPicker" component="Magento_Ui/js/form/element/color-picker">
    <settings>
        <label translate="true">Background color</label>
        <dataScope>background_color</dataScope>
        <dataType>text</dataType>
    </settings>
</field>

Same structure for button_color and button_text_color.

master.html template

<span
    attr="data.button_color.attributes"
    ko-style="data.button_color.style"
    css="data.button_color.css"
    html="data.button_color.html"
    hidden
></span>

<span
    attr="data.button_text_color.attributes"
    ko-style="data.button_text_color.style"
    css="data.button_text_color.css"
    html="data.button_text_color.html"
    hidden
></span>

<span
    attr="data.background_color.attributes"
    ko-style="data.background_color.style"
    css="data.background_color.css"
    html="data.background_color.html"
    hidden
></span>

Behavior

When I save the block, the color values appear in the generated HTML comment (data-pb-style).
But when I reopen the block in the admin PageBuilder editor, the colorPickers are empty again.
If I re-save the block, the previously saved colors are lost (empty strings).

Question

What is the correct and minimal setup to make colorPicker fields persist and reload in a custom PageBuilder content type?

Are the color attributes expected to live inside the <element name="main"> or as separate <element name="button_color"> etc.?

If anyone has a working example (XML + master.html) where colorPicker values reload properly, I’d be super grateful.

Thanks in advance!

Peter