Question

我创建了一个gutenberg块，部分输出是设置根元素的样式。我遇到这个根元素的样式属性更改时无法在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.
            )
        );
    },

这在页面加载时效果很好，但是当我更改页面上（通过InspectorControls）返回的getStyles（attr）返回值时，样式不会更改。我什至在输出中添加了一个附加的“状态”属性，该属性按预期进行了更改，结果如下：

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

我将背景尺寸更改为覆盖，该背景尺寸在“ state”属性中更新，但在样式中未更新。如果我现在要保存页面，它将在下一页加载时正确呈现（作为background-size：cover）。

我是否缺少某种我不想要的缓存？

Answer 1

我最终制作了getStyles（attr）返回的对象副本，从而解决了这个问题：

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

我想这些值在超出范围之类后就会改变。

样式未在gutenberg编辑器中更新

1 个答案: