CODEWITHSUNDEEP
wordpressgutenberg-blocks
K.Cuison
K.Cuison

Reputation: 1

How to fix gutenburg InnerBlocks to respond with RangeControl

I'm using RangeControl in order to determine how many columns I should use on my innerblock template but the problem is it only returns the default value of the rangecontrol and the condition doesn't work.

Tried using the ternary conditioning.

<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>

I expect the output to respond with the condition, for example my default RangeControl value is 3 so when I load the block it only returns 3 columns and I can't make it to return 2 or 1 columns using the RangeControl.

Upvotes: 0

Views: 202

Answers (1)

Rakhmad Apriansyah
Rakhmad Apriansyah

Reputation: 11

You should call innerBlocks only once. And then set the template based on your range control value. Here an example to put before return:

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

And in InnerBlocks part you call that TEMPLATE

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

Upvotes: 1

Related Questions