是否有一个函数可以在我的 gutenberg 块中创建一个自定义块？

Question

我正在制作一个滑块，我想为我选择的每个图像创建一个滑块。

我已经有了一个功能齐全的滑块。问题是，如何从滑块创建调用滑块？我认为一定有办法通过 API 并且我找到了函数 createBlock() 但没有任何东西真正起作用

const { createBlock } = wp.blocks;
//
// some code
//
<div id={ listId } className={ classes } key={ index }>
  {createBlock('illmatic6514/slide')}
</div>

我期待创建一个滑块。（为了简单起见，我从滑块中删除了变量并放入了静态图像）我得到 "Cannot read property 'attributes' of undefined"

即使我调用 createBlock('core/paragraph') 我也会得到 "Objects are not valid as a React child"

Answer 1

您可能希望将 Slide 定义为组件而不是块：

function Slide(props) {
  return <div>{props.slideName}</div>;
}

或作为 class 扩展组件：

const { Component } = wp.element
class Slide extends Component {
  render() {
    return (
      <div>{ this.props.slideName }</div>
    )
  }
}

然后在您的 Slider 块中，您将使用该组件：

edit(props) {
  return (
    <div>
      <Slide slideName="Slide 1" />
      <Slide slideName="Slide 2" />
    </div>
  )
}

https://reactjs.org/docs/components-and-props.html

是否有一个函数可以在我的 gutenberg 块中创建一个自定义块？

Is there a function to that creates a custom block inside my gutenberg block?

wordpress

block

jsx

reactjs

wordpress-gutenberg