goodwp/goodenberg

# Goodenberg Goodenberg 是一个组件、辅助工具和示例的库，用于构建现代的 WordPress 站点和应用程序，并支持 块编辑器以及 Gutenberg 引入的所有其他功能。 ## 目录 - [更新日志](./CHANGELOG.md) - [版本控制 / 支持的 WordPress 版本](#versioning--supported-wordpress-versions) - [JavaScript / React](#javascript--react) - [PHP](#php) - [示例](#examples) ## 版本控制 / 支持的 WordPress 版本 该库将遵循 SemVer 版本控制。将尽量减少主要版本和破坏性更新。 每个次要版本都将支持发布时最新的稳定版 WordPress。 开发版本将尝试兼容较新的 Gutenberg 版本。 当前支持的 WordPress 版本：WordPress 6.5 ## JavaScript / React 所有 JavaScript 代码均在 `src` 目录中开发。 ### 用法 1. 通过 `npm install @goodwp/goodenberg` 安装该包 2. 使用 `@wordpress/scripts` 进行便捷的构建过程，并自动提取依赖项 3. 使用单个组件/hooks 等 - 所有子模块（见下文）均可从子模块入口点导入 `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 (`components`) 用于你的管理界面或自定义块的 React 组件。 - [EntityRecordsSelect](src/components/entity-records-select/README.md)：一个允许用户选择 多个记录（ post、term 等）的组件。 - [EntityRecordSelect](src/components/entity-record-select/README.md)：一个允许用户选择 单个 记录（ post、term 等）的组件。 [更多信息](src/components/README.md) ### Admin (`admin`) 用于在 wp-admin 中构建页面的 React 组件、hooks 和 utils。 适用于构建自定义插件页面、设置页面等。需与 @wordpress/components 配合使用。 #### Components - [Page](src/admin/components/README.md)：一个用于构建完整 wp-admin 页面的组件，包括 header、content、 notices。 - [Page.Header](src/admin/components/README.md)：用于 wp-admin 页面的 header 栏。 - [AdminNotices](src/admin/components/README.md)：一个“slot”，将渲染所有在 服务器端 渲染的管理通知 - [Bar](src/admin/components/README.md)：用于管理页面 header/footer 的全宽导航栏（在 Page.Header 中使用）。 - [Container](src/admin/components/README.md)：一个具有可配置默认最大宽度的居中容器。 - [TabPanel](src/admin/components/README.md)：WordPress TabPanel 组件的样式版本，可在管理页面上直接 在你的 Page.Header 下方使用。 [更多信息](src/admin/components/README.md) #### Router 一个简单的“router”，用于根据当前活动的“route”渲染部分组件。 有两种实现方式（一种基于 URL 路由，一种基于 state 路由）。 两者都提供相似的 API。 [更多信息](src/admin/router/README.md) ### Hooks (`hooks`) 用于你的管理界面或自定义块的 React hooks。 - [`useApiFetch`](src/hooks/use-api-fetch/README.md)：一个围绕核心的 [`apiFetch`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-api-fetch/) 函数 的 hook 包装器。 - [`useLocation`/`useHistory`](src/hooks/use-location/README.md)：一个使用 URL/window.location 和 history 对象来使用 浏览器 导航的 hook。 [更多信息](src/hooks/README.md) ### Utils (`utils`) 实用的工具函数。 - `getBlockStyle(className: string)`：通过其 classname 获取所选/应用的块样式。 - `onBlockRegistration(blockName, namespace, callback)`：允许挂钩到特定 块的 registerBlockType hook 中。避免在你的 callback 中检查块名称。 - `onBlockEdit(blockName, namespace, callback, higherOrderComponent = false)`：允许挂钩到特定 块的 BlockEdit hook 中。避免在你的 callback 中检查块名称。 [更多信息](src/utils/README.md) ## PHP 所有 PHP 代码均在 `lib` 目录中开发。 **用法** 1. 通过 `composer require goodwp/goodenberg` 安装该包 2. 在你的插件/主题中加载你的 composer autoload 文件。 3. 使用这些类和辅助工具。 [更多信息](lib/README.md) ## 示例 [示例目录](./examples) 包含一个使用了大量组件的插件。 你也可以通过 @wordpress/env 测试此插件： 1. 克隆该仓库 2. 运行 `npm install` 3. 运行 `npm env:start` 4. 打开 `http://localhost:8888/wp-admin` 并使用 `admin` / `password` 登录 5. 启用该插件并打开示例页面。 你也可以使用 [WordPress Playground](https://playground.wordpress.net/) 直接在浏览器中查看示例： 1. 从 [最新发布版](https://github.com/goodwp/goodenberg/releases/latest/download/goodenberg-examples.zip) 下载示例插件。 2. 前往 https://playground.wordpress.net/ 3. 上传并启用该插件 4. 前往新的管理页面“Goodenberg examples” ## Bugs、Issues、安全 Issues、功能请求 访问我们的 [GitHub 仓库](https://github.com/goodwp/goodenberg)。 灵感来源于 [10up/block-components](https://github.com/10up/block-components)。

标签：Gutenberg, OpenVAS, PHP, React, Syscall, Syscalls, Web开发, WordPress, 前端组件库, 数据可视化, 自定义脚本