将WordPress Gutenberg移植到独立的React组件- CSS样式不出现

Question

我正在尝试创建一个独立版本的Wordpress‘古腾堡块编辑器，它将独立于Wordpress生态系统工作。理想情况下，我希望能够简单地使用现有React项目中的Gutenberg编辑器作为一个React组件。

我注意到官方存储库提供了一个“故事书”目录，其中包含了"storybook/stories/playground/index.js"：中的一个React组件。

/**
 * WordPress dependencies
 */
import "@wordpress/editor"; // This shouldn't be necessary

import { useEffect, useState } from "@wordpress/element";
import { BlockEditorKeyboardShortcuts, BlockEditorProvider, BlockList, BlockInspector, WritingFlow, ObserveTyping } from "@wordpress/block-editor";
import { Popover, SlotFillProvider, DropZoneProvider } from "@wordpress/components";
import { registerCoreBlocks } from "@wordpress/block-library";
import "@wordpress/format-library";

/**
 * Internal dependencies
 */
import "./style.scss";

function App() {
    const [blocks, updateBlocks] = useState([]);

    useEffect(() => {
        registerCoreBlocks();
    }, []);

    return (
        <div className="playground">
            <SlotFillProvider>
                <DropZoneProvider>
                    <BlockEditorProvider
                        value={blocks}
                        onInput={updateBlocks}
                        onChange={updateBlocks}
                    >
                        <div className="playground__sidebar">
                            <BlockInspector />
                        </div>
                        <div className="editor-styles-wrapper">
                            <BlockEditorKeyboardShortcuts />
                            <WritingFlow>
                                <ObserveTyping>
                                    <BlockList />
                                </ObserveTyping>
                            </WritingFlow>
                        </div>
                        <Popover.Slot />
                    </BlockEditorProvider>
                </DropZoneProvider>
            </SlotFillProvider>
        </div>
    );
}

export default {
    title: "Playground|Block Editor"
};

export const _default = () => {
    return <App />;
};

这看起来是修改为独立组件的完美人选，所以我稍微修改了它，这样它就可以在一个新的create-react-app项目中工作了：

import React from "react";
import "@wordpress/editor"; // This shouldn't be necessary

import { useEffect, useState } from "@wordpress/element";
import { BlockEditorKeyboardShortcuts, BlockEditorProvider, BlockList, BlockInspector, WritingFlow, ObserveTyping } from "@wordpress/block-editor";
import { Popover, SlotFillProvider, DropZoneProvider } from "@wordpress/components";
import { registerCoreBlocks } from "@wordpress/block-library";
import "@wordpress/format-library";

import "./style.scss";

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

  useEffect(() => {
    registerCoreBlocks();
  }, []);

  return (
    <div className="playground">
      <SlotFillProvider>
        <DropZoneProvider>
          <BlockEditorProvider value={blocks} onInput={updateBlocks} onChange={updateBlocks}>
            <div className="playground__sidebar">
              <BlockInspector />
            </div>
            <div className="editor-styles-wrapper">
              <BlockEditorKeyboardShortcuts />
              <WritingFlow>
                <ObserveTyping>
                  <BlockList />
                </ObserveTyping>
              </WritingFlow>
            </div>
            <Popover.Slot />
          </BlockEditorProvider>
        </DropZoneProvider>
      </SlotFillProvider>
    </div>
  );
}

我看到组件引用了一个"style.scss“文件(该文件反过来引用了‘editor-styes.scss’和'reset.scss')，因此我还将这些文件复制到我的新new项目中：

​

​

我在Gutenberg存储库中的"package.json“文件中看到，所有Wordpress依赖项都是通过"packages”目录引用的，例如：

"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
"@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",
"@wordpress/babel-preset-default": "file:packages/babel-preset-default",
"@wordpress/base-styles": "file:packages/base-styles",

因此，我将Gutenberg的"packages“目录复制到我的新new项目中，然后将所有Wordpress依赖项添加到我的"package.json”文件中：

    "dependencies": {
            "@testing-library/jest-dom": "^4.2.4",
            "@testing-library/react": "^9.4.0",
            "@testing-library/user-event": "^7.2.1",
            "@wordpress/a11y": "file:packages/a11y",
            "@wordpress/annotations": "file:packages/annotations",
            "@wordpress/api-fetch": "file:packages/api-fetch",
            "@wordpress/autop": "file:packages/autop",
            "@wordpress/blob": "file:packages/blob",
            "@wordpress/block-directory": "file:packages/block-directory",
            "@wordpress/block-editor": "file:packages/block-editor",
            "@wordpress/block-library": "file:packages/block-library",
            "@wordpress/block-serialization-default-parser": "file:packages/block-serialization-default-parser",
            "@wordpress/block-serialization-spec-parser": "file:packages/block-serialization-spec-parser",
            "@wordpress/blocks": "file:packages/blocks",
            "@wordpress/components": "file:packages/components",
            "@wordpress/compose": "file:packages/compose",
            "@wordpress/core-data": "file:packages/core-data",
            "@wordpress/data": "file:packages/data",
            "@wordpress/data-controls": "file:packages/data-controls",
            "@wordpress/date": "file:packages/date",
            "@wordpress/deprecated": "file:packages/deprecated",
            "@wordpress/dom": "file:packages/dom",
            "@wordpress/dom-ready": "file:packages/dom-ready",
            "@wordpress/edit-post": "file:packages/edit-post",
            "@wordpress/edit-site": "file:packages/edit-site",
            "@wordpress/edit-widgets": "file:packages/edit-widgets",
            "@wordpress/editor": "file:packages/editor",
            "@wordpress/element": "file:packages/element",
            "@wordpress/escape-html": "file:packages/escape-html",
            "@wordpress/format-library": "file:packages/format-library",
            "@wordpress/hooks": "file:packages/hooks",
            "@wordpress/html-entities": "file:packages/html-entities",
            "@wordpress/i18n": "file:packages/i18n",
            "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
            "@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
            "@wordpress/keycodes": "file:packages/keycodes",
            "@wordpress/list-reusable-blocks": "file:packages/list-reusable-blocks",
            "@wordpress/media-utils": "file:packages/media-utils",
            "@wordpress/notices": "file:packages/notices",
            "@wordpress/nux": "file:packages/nux",
            "@wordpress/plugins": "file:packages/plugins",
            "@wordpress/priority-queue": "file:packages/priority-queue",
            "@wordpress/redux-routine": "file:packages/redux-routine",
            "@wordpress/rich-text": "file:packages/rich-text",
            "@wordpress/server-side-render": "file:packages/server-side-render",
            "@wordpress/shortcode": "file:packages/shortcode",
            "@wordpress/token-list": "file:packages/token-list",
            "@wordpress/url": "file:packages/url",
            "@wordpress/viewport": "file:packages/viewport",
            "@wordpress/wordcount": "file:packages/wordcount",
            "concurrently": "^5.0.2",
            "css-loader": "^3.4.2",
            "node-sass": "^4.13.0",
            "node-sass-chokidar": "^1.4.0",
            "node-watch": "^0.6.3",
            "npm-run-all": "^4.1.5",
            "postcss-loader": "^3.0.0",
            "react": "^16.12.0",
            "react-dom": "^16.12.0",
            "react-scripts": "3.3.0",
            "sass-loader": "^8.0.2",
    },
    "devDependencies": {
            "@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
            "@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",
            "@wordpress/babel-preset-default": "file:packages/babel-preset-default",
            "@wordpress/base-styles": "file:packages/base-styles",
            "@wordpress/browserslist-config": "file:packages/browserslist-config",
            "@wordpress/custom-templated-path-webpack-plugin": "file:packages/custom-templated-path-webpack-plugin",
            "@wordpress/dependency-extraction-webpack-plugin": "file:packages/dependency-extraction-webpack-plugin",
            "@wordpress/docgen": "file:packages/docgen",
            "@wordpress/e2e-test-utils": "file:packages/e2e-test-utils",
            "@wordpress/e2e-tests": "file:packages/e2e-tests",
            "@wordpress/env": "file:packages/env",
            "@wordpress/eslint-plugin": "file:packages/eslint-plugin",
            "@wordpress/jest-console": "file:packages/jest-console",
            "@wordpress/jest-preset-default": "file:packages/jest-preset-default",
            "@wordpress/jest-puppeteer-axe": "file:packages/jest-puppeteer-axe",
            "@wordpress/library-export-default-webpack-plugin": "file:packages/library-export-default-webpack-plugin",
            "@wordpress/npm-package-json-lint-config": "file:packages/npm-package-json-lint-config",
            "@wordpress/postcss-themes": "file:packages/postcss-themes",
            "@wordpress/scripts": "file:packages/scripts"
    },

然后运行"npm“，以便我的React应用程序可以通过导入语句引用Wordpress包。

现在，当我运行"npm“时，React应用程序将在我的浏览器中启动，Gutenberg编辑器将出现，但是没有一个CSS/样式工作：

​

​

我不太确定该怎么做。应用程序似乎可以按需要工作(我可以创建、编辑和删除块)，但样式根本不存在。

我试图通过node_modules，中的以下命令编译现有的scss文件(在src、和包目录中)：

"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules --include-path ./packages src packages node_modules -o src --recursive --watch",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules --include-path ./packages -o src --watch"

但是，当导入到我的style.css文件中时，它似乎并没有改变任何东西。任何帮助都将不胜感激。

Answer 1

我发现在故事书目录中还有另一个style.scss文件，该文件放置在React应用程序的根目录中，并将package.json脚本更新为：

"build-css": "node-sass-chokidar style.scss -o public/css",
"watch-css": "npm run build-css && node-sass-chokidar --include-path node_modules style.scss -o public/css --watch"

样式编译正确。