Динамически добавлять (внутренние) блоки в пользовательский компонент React с помощью Wordpress Gutenberg - PullRequest
Новая
       6

Динамически добавлять (внутренние) блоки в пользовательский компонент React с помощью Wordpress Gutenberg

1 голос
/ 22 июня 2019

Я новичок в Wordpress Gutenberg и ReactJs (но сделал несколько проектов с vuejs). Я хочу написать плагин, который имеет пользовательский блок. Этот блок визуализирует компонент React, который является сеткой и позволяет перетаскивать и изменять размеры элементов сетки (React-Grid-Layout, см. https://github.com/STRML/react-grid-layout). Теперь я хочу, чтобы эти элементы сетки были InnerBlocks. Пользователь нажимает на кнопку Add- Кнопка в сетке и может выбирать между блоками (например, RichText, Image, Slider). Поэтому в основном я хочу добавить блок, который работает в компоненте Grid React. Я не очень далеко продвинулся, поэтому некоторые мысли по этому поводу были бы хорошими.

My Grid React Component внутри моего block.js, который использует ResponsiveReactGridLayout 

const ResponsiveReactGridLayout = ReactGridLayout.WidthProvider(ReactGridLayout.Responsive);
    var el = element.createElement;

    class Grid extends React.Component {


        constructor(props) {
            super(props);
        }

        onChangeContent(newContent) {
            this.props.setAttributes({content: newContent});
        }

        render() {

            return el(
                ResponsiveReactGridLayout,
                {
                    layouts: {lg: {i: '1', x: 0, y: 0, w: 5, h: 2}},
                    measureBeforeMount: true,
                    className: "layout",
                    rowHeight: this.props.rowHeight,
                    isDragable: true,
                    isResizable: true,
                    onDrag: this.onDragging,
                    draggableHandle: '.drag-handle',
                    onDragStop: this.onMoveCard,
                    onResizeStop: this.onResizeCard,
                    margin: [20, 20]
                }, // TODO: Child Blocks
            );
        }
    }

Редактировать функцию внутри block.registerBlockType 

edit: function (props) {
       return el(Grid,props);
      },
...