块编辑器给出无效的钩子调用错误

Question

我正在尝试让 wordpress 块编辑器加载到反应项目中：https : //www.npmjs.com/package/@wordpress/block-editor。

我已经完全按照 npm 页面上的示例进行了设置，但它给出了一个无效的钩子错误。我认为这可能是由于错误提示的版本不匹配？

这是代码：

import {
  BlockEditorProvider,
  BlockList,
  WritingFlow,
  ObserveTyping
} from "@wordpress/block-editor";
import { SlotFillProvider, Popover } from "@wordpress/components";
import { useState } from "@wordpress/element";
import "@wordpress/components/build-style/style.css";
import "@wordpress/block-editor/build-style/style.css";

export default function MyEditorComponent() {
  const [blocks, updateBlocks] = useState([]);

  return (
    <BlockEditorProvider
      value={blocks}
      onInput={(blocks) => updateBlocks(blocks)}
      onChange={(blocks) => updateBlocks(blocks)}
    >
      <SlotFillProvider>
        <Popover.Slot name="block-toolbar" />
        <WritingFlow>
          <ObserveTyping>
            <BlockList />
          </ObserveTyping>
        </WritingFlow>
        <Popover.Slot />
      </SlotFillProvider>
    </BlockEditorProvider>
  );
}

和典型的钩子错误：

Error
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See [link] for tips about how to debug and fix this problem.

我已经设置了一个代码笔来在这里输入：https ://codesandbox.io/s/sleepy-proskuriakova-op59q

我查找了 react 的 wordpress 版本，它似乎是 16.6.3，因此在沙箱中设置它并使用旧版本的 react 脚本（2.1.8），当时使用的是 16.6.2 但错误没有变化。我尝试了几种版本的组合，没有任何变化。

究竟是什么导致了这个错误？我怎样才能加载这个组件？

Answer 1

这是一个工作的codesandbox。

我改变的事情：

1. react以及react-dom其中16.13.1使用的版本@wordpress/element
2. 必须添加DropZoneProvider
3. 安装@wordpress/block-library并调用registerCoreBlocks

有关更多代码示例，您可以查看官方故事书文档，源代码位于底部面板的Story选项卡下。