Как исправить Gutenburg InnerBlocks, чтобы ответить с RangeControl - PullRequest
Новая
       8

Как исправить Gutenburg InnerBlocks, чтобы ответить с RangeControl

0 голосов
/ 06 февраля 2019

Я использую 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столбцы, и я не могу вернуть 2 или 1 столбцы, используя RangeControl.

1 Ответ

0 голосов
/ 03 марта 2019

Вы должны вызывать innerBlocks только один раз.А затем установите шаблон на основе значения вашего диапазона управления.Вот пример, который нужно поставить перед return : 

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

И в части InnerBlocks вы называете этот ШАБЛОН 

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