Question

我是Wordpress Gutenberg和ReactJs的新手（但是使用vuejs做过一些项目）。我想编写一个具有自定义块的插件。该块渲染一个React组件，它是一个Grid，并允许拖动和调整Grid Elements的大小（React-Grid-Layout，请参见https://github.com/STRML/react-grid-layout）。现在，我希望此网格元素成为InnerBlocks。用户单击网格中的添加按钮，然后可以在块之间进行选择（例如RichText，Image，Slider）。所以基本上我想添加一个可以在Grid React组件中工作的块。我没有走很远，所以对此有一些想法。

block.js中的我的Grid React组件，它使用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);
      },

使用Wordpress Gutenberg在自定义React组件内动态添加（内部）块

0 个答案: