README

Goodenberg 是一个组件库，辅助工具和示例，用于使用块编辑器和 Gutenberg 引入的所有其他功能构建现代 WordPress 网站。

警告
此软件包正在积极开发中，不被视为稳定，可能会添加破坏性变更。我正在一些网站上使用该软件包和一些自定义插件，但目前仍在开发、优化和编写文档。

目录

• 变更日志
• 版本控制/支持的 WordPress 版本
• JavaScript / React
• PHP
• 示例

版本控制/支持的 WordPress 版本

该库将遵循 SemVer 版本控制。主要版本和破坏性变更将尽量保持最低。每个次要版本将支持发布时的最新稳定 WordPress 版本。开发版本将尝试与较新的 Gutenberg 版本兼容。

当前支持的 WordPress 版本：WordPress 6.5

JavaScript / React

所有 JavaScript 代码均在 src 目录内开发。

使用

1. 通过 npm install @goodwp/goodenberg 安装软件包
2. 使用 @wordpress/scripts 进行简单的构建过程并自动提取依赖项
3. 使用单个组件/钩子等
   • 所有子模块（见下文）都可以从子模块入口点 import {Page} from "@goodwp/goodenberg/admin/components"; 导入
   • 所有子模块还提供基于目录的导入： import {Page} from "@goodwp/goodenberg/admin/components/page";

架构

该库仅使用 Babel 和 @wordpress/babel-preset-default 预设转换每个单个 js 文件，但没有其他构建过程。建议使用 @wordpress/scripts 或自定义 webpack 配置来打包它。

样式通过 @emotion 创建，以避免需要额外的样式表。

组件 (components)

用于在您的管理屏幕或自定义块中使用的 React 组件。

• EntityRecordsSelect：一个允许用户选择多个记录（帖子、术语等）的组件。
• EntityRecordSelect：一个允许用户选择单个记录（帖子、术语等）的组件。

更多信息

管理界面 (admin)

用于在 wp-admin 中构建页面的 React 组件、钩子和实用工具。对于构建自定义插件页面、设置页面等非常有用。需要与 @wordpress/components 一起使用。

组件

• Page：一个用于构建完整的 wp-admin 页面（包括页眉、内容、通知）的组件。

• Page.Header：用于 wp-admin 页面的页眉栏。

• AdminNotices：一个“槽”将渲染在服务器上渲染的所有管理通知

• Bar：用于管理页面页眉/页脚的全宽导航栏（在 Page.Header 中使用）。

• Container：一个居中的容器，具有可配置的默认最大宽度。

• TabPanel：WordPress TabPanel 组件的样式版本，用于在管理页面的 Page.Header 下方。

更多信息

路由器

一个简单的“路由器”，根据当前活跃的“路由”渲染一些组件。有两种实现方式（一种基于URL的路由，一种基于状态的路由）。两者都提供类似的API。

更多信息

钩子（hooks）

React钩子，用于您的管理屏幕或自定义块。

• useApiFetch：围绕核心中的 apiFetch 函数的钩子包装。
• useLocation/useHistory：一个钩子，用于通过URL/window.location和历史对象使用浏览器导航。

更多信息

工具（utils）

方便的实用函数。

• getBlockStyle(className: string)：通过其类名获取所选/应用的块样式。
• onBlockRegistration(blockName, namespace, callback)：允许钩入特定块的 registerBlockType 钩子。避免在您的回调中检查块名。
• onBlockEdit(blockName, namespace, callback, higherOrderComponent = false)：允许钩入特定块的 BlockEdit 钩子。避免在您的回调中检查块名。

更多信息

PHP

所有PHP代码都开发在 lib 目录中。

使用

1. 通过 composer require goodwp/goodenberg 安装包
2. 在您的插件/主题中加载composers的自定义加载文件。
3. 使用类和助手。

更多信息

示例

示例目录https://github.com/goodwp/goodenberg/blob/HEAD/./examples 包含了一个使用许多组件的插件。您也可以通过 @wordpress/env 测试此插件。

1. 克隆存储库
2. 运行 npm install
3. 运行 npm env:start
4. 打开 https://:8888/wp-admin 并使用 admin / password 登录
5. 激活插件并打开示例页面。

您还可以使用 WordPress Playground 直接在浏览器中查看示例。

1. 从 最新版本 下载示例插件。
2. 转到 https://playground.wordpress.net/
3. 上传并激活插件
4. 转到新的管理页面“Goodenberg 示例”

错误、问题、安全问题、功能请求

访问我们的 GitHub 存储库。

灵感来自 10up/block-components。