古腾堡编辑器中的样式未更新

Question

我创建了一个gutenberg 块，部分输出是设置根元素的样式。我遇到此根元素的样式属性在更改时未在古腾堡编辑器中动态更新的问题。我的编辑功能如下：

    edit: function( props )
    {
        [...] // initialising some variables

        return el(
            wp.element.Fragment,
            {},
            [...], // InspectorControls, etc.
            el(
                'div',
                {
                    className: 'cms-container ' + getClassName(attr),
                    style: getStyles(attr),
                    state:  JSON.stringify(getStyles(attr)) 
                },
                [...] // Inner blocks, etc.
            )
        );
    },

这在页面加载时工作正常，但是当我在页面上更改 getStyles(attr) returns 时（通过 InspectorControls），样式不会改变。我什至在输出中添加了一个额外的 "state" 属性，该属性按预期进行了更改，结果如下所示：

<div class="cms-container " 
    style="background-size: contain;" 
    state="{&quot;backgroundSize&quot;:&quot;cover&quot;}">

我已将背景大小更改为覆盖，它在 "state" 属性中更新，但在样式中未更新。如果我此时保存页面，它将在下一个页面加载时正确呈现（如背景大小：封面）。

React 是否有我缺少的某种缓存？

Answer 1

我最终制作了 getStyles(attr) returns 的对象副本，这解决了问题：

style: $.extend(true, {}, getStyles(attr))

我猜这些值在超出范围或其他原因后发生了变化。

古腾堡编辑器中的样式未更新

Styles not being updated in gutenberg editor

wordpress

wordpress-gutenberg

gutenberg-blocks