wordpress - 如何修复古腾堡 InnerBlocks 以响应 RangeControl

Question

我正在使用RangeControl以确定我应该在innerblock模板上使用多少列，但问题是它只返回默认值rangecontrol并且条件不起作用。

尝试使用三元调节。

<PanelBody>
    <RangeControl
        label="Columns"
        value={ props.attributes.columns }
        min={1}
        max={4}
        onChange={newColumns => { props.setAttributes({ columns: newColumns }); }} />
</PanelBody>


<div class={props.attributes.layout}>
    {

          ( props.attributes.columns == 1 ) ? 

          <InnerBlocks template={[
            [ 'cgb/columns' ],

        ]}
        />      
         : ( props.attributes.columns == 2 ) ? 
        <InnerBlocks template={[
            [ 'cgb/columns' ],
            [ 'cgb/columns' ],

        ]}
        />      
        : ( props.attributes.columns == 3 ) ?                           
        <InnerBlocks template={[
            [ 'cgb/columns' ],
            [ 'cgb/columns' ],
            [ 'cgb/columns' ]           
            ]}
            />              
        : "error"
    }
</div>

我希望输出响应条件，例如我的默认RangeControl值是 3，所以当我加载块时它只返回 3 列，我不能让它使用RangeControl.

Answer 1

您应该只调用一次 innerBlocks。然后根据您的范围控制值设置模板。这是一个在return之前放置的示例：

    var TEMPLATE = [];
    for (var i = 0; i < columns; i++) {
        var templateContent = [ 'cgb/columns', {} ];
        TEMPLATE.push(templateContent);
    }

在 InnerBlocks 部分，你称之为 TEMPLATE

    ...
    <InnerBlocks
        template={ TEMPLATE }
    />