Ядро Wordpress Gutenberg / столбцы меняют количество столбцов - PullRequest
Новая
       100

Ядро Wordpress Gutenberg / столбцы меняют количество столбцов

0 голосов
/ 30 января 2020

Мне нужно создать блок с 12 столбцами, но при попытке добавить их они не меняются

Создается только один

с помощью функции onChangeColumnNumber, вы должны изменить количество столбцов или хотя бы поставить 3 столбца в соответствии с массивом 


import { registerBlockType } from '@wordpress/blocks'; // importar función principal

import { RichText, MediaUpload, InspectorControls, ColorPalette, InnerBlocks } from '@wordpress/block-editor';
const { Button, IconButton, PanelBody, RangeControl } = wp.components

import { ReactComponent as Logo } from '../ga-logo.svg'


registerBlockType('ga/columnas', {
    title: 'Ga Columnas', 
        icon: { src: Logo },
    category: 'gourmet-artist',
    attributes: {
      columnCount: {
        type: 'number',
        default: 1
      },
      columnArray: {
        type: 'array',
        default: [
          ['core/column', {}, 
            []
          ]
        ]
      },      
    },

    edit: (props) => {

            const { attributes: {columnCount, columnArray}, setAttributes } = props;

      const onChangeColumnNumber = (numOfColumns) => {
        setAttributes({ columnCount: numOfColumns })   


        var arrayColumns = [
          ['core/column', {}, 
            []
          ],
          ['core/column', {}, 
            []
          ],
          ['core/column', {}, 
            []
          ]
        ]


        for(var i = 0; i < columnCount; ++i){
          arrayColumns.push(
            ['core/column', {}, 
              []
            ]
          );
        }


        setAttributes({ columnArray: arrayColumns }) 

      } 

      var TEMPLATE = [
        ['core/columns', {},
          columnArray
        ]
      ];

      return (
        <div>
          <h1>Columns</h1>
          <div>
            <InspectorControls>
              <PanelBody>
                <RangeControl
                  label={"Columns"}
                  value={columnCount}
                  onChange={onChangeColumnNumber}
                  min={1}
                  max={12}
                />
              </PanelBody>
            </InspectorControls>
            <InnerBlocks template={TEMPLATE} />
          </div>
        </div>
      );
    },
    save: (props) => {
            const { attributes: {columnCount, columnArray} } = props;

      return (
        <div>
          <h1>Columns</h1>

          <div>
            <InnerBlocks.Content />
          </div>


        </div>

            )
    }
});

Или есть какой-нибудь другой способ создания пользовательских столбцов с RangeControl?

...