将 WordPress Gutenberg 移植到独立的 React 组件 - CSS 样式未出现
Porting WordPress Gutenberg to a Standalone React Component - CSS Styles Not Appearing
我正在尝试创建独立版本的 Wordpress Gutenberg 块编辑器，它将独立于 Wordpress 生态系统工作。理想情况下，我希望能够在现有的 React 项目中简单地使用 Gutenberg 编辑器作为 React 组件。
我注意到官方存储库有一个 "storybook" 目录，其中包含一个 React 组件，位于 "storybook/stories/playground/index.js":
/**
* 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-styles.scss' 和 'reset.scss'）所以我复制了那些文件也放入我的新 React 项目中：
我在 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",
所以我将 "packages" 目录从 Gutenberg 复制到我的新 React 项目中，然后将所有 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 i" 以便我的 React 应用程序可以通过导入语句引用 Wordpress 包。
现在，当我 运行 "npm start" 时，React 应用程序将在我的浏览器中启动，Gutenberg 编辑器将出现，但是 none 的 CSS/styles工作：
我不太确定如何进行。该应用程序似乎可以按预期运行（我可以创建、编辑和删除块），但样式根本不存在。
我试图编译现有的 scss 文件（在 src、node_modules 和 packages 目录）通过 packages.json:
中的以下命令
"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 文件在导入到我的 index.html 文件时似乎没有改变任何东西。任何帮助将不胜感激。
我发现在storybook目录下还有一个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"
样式编译正确。
我正在尝试创建独立版本的 Wordpress Gutenberg 块编辑器，它将独立于 Wordpress 生态系统工作。理想情况下，我希望能够在现有的 React 项目中简单地使用 Gutenberg 编辑器作为 React 组件。
我注意到官方存储库有一个 "storybook" 目录，其中包含一个 React 组件，位于 "storybook/stories/playground/index.js":
/**
* 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-styles.scss' 和 'reset.scss'）所以我复制了那些文件也放入我的新 React 项目中：
我在 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",
所以我将 "packages" 目录从 Gutenberg 复制到我的新 React 项目中，然后将所有 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 i" 以便我的 React 应用程序可以通过导入语句引用 Wordpress 包。
现在，当我 运行 "npm start" 时，React 应用程序将在我的浏览器中启动，Gutenberg 编辑器将出现，但是 none 的 CSS/styles工作：
我不太确定如何进行。该应用程序似乎可以按预期运行（我可以创建、编辑和删除块），但样式根本不存在。
我试图编译现有的 scss 文件（在 src、node_modules 和 packages 目录）通过 packages.json:
中的以下命令"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 文件在导入到我的 index.html 文件时似乎没有改变任何东西。任何帮助将不胜感激。
我发现在storybook目录下还有一个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"
样式编译正确。