本文详解如何在 Gutenberg 区块的编辑器界面中，通过 React + @wordpress/data 动态获取并渲染所有可查看的文章类型（包括自定义文章类型），构建专业、响应式的 下拉控件，并正确绑定到区块属性。
本文详解如何在 gutenberg 区块的编辑器界面中，通过 react + `@wordpress/data` 动态获取并渲染所有可查看的文章类型（包括自定义文章类型），构建专业、响应式的 `
在开发 Gutenberg 自定义区块时，若需让用户从下拉菜单中选择一个文章类型（如 product、portfolio 或默认的 post），不应硬编码选项，也不应依赖 PHP 渲染——而应利用 WordPress 数据模块在客户端实时、安全地拉取注册后的文章类型列表。这不仅确保与后台注册状态完全同步，还支持多语言标签、权限过滤及未来扩展。
✅ 核心实现原理
借助 @wordpress/data 的 useSelect Hook 与 @wordpress/core-data 数据仓库，调用 getPostTypes() 方法可异步获取所有已注册且当前用户有权限查看的文章类型。关键在于：
- 设置 { per_page: -1 } 参数以获取全部结果；
- 过滤 viewable === true，自动排除 wp_block、wp_navigation 等内部系统类型；
- 将原始数据映射为
所需格式：{ label: string, value: string }； - 使用 slug 作为 value（语义清晰、稳定唯一），labels.singular_name 作为用户友好的显示文本。
? 完整代码示例
首先，在 block.json 中声明区块属性：
{
"apiVersion": 3,
"name": "my-plugin/post-type-selector",
"title": "Post Type Selector",
"attributes": {
"postType": {
"type": "string",
"default": "post"
}
}
}然后，在 edit.js 中实现动态下拉逻辑：
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { SelectControl } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';
export default function Edit({ attributes, setAttributes }) {
const { postType } = attributes;
// 从核心数据仓库获取所有可查看的文章类型
const postTypes = useSelect(
(select) => select(coreStore).getPostTypes({ per_page: -1 }),
[]
);
// 构建下拉选项：过滤 + 格式化
const postTypeOptions = Array.isArray(postTypes)
? postTypes
.filter((pt) => pt.viewable === true)
.map((pt) => ({
label: pt.labels?.singular_name || pt.slug,
value: pt.slug,
}))
: [];
return (
<div {...useBlockProps()}>
<SelectControl
label="选择文章类型"
help="将用于查询该类型下的内容"
value={postType}
options={postTypeOptions}
onChange={(value) => setAttributes({ postType: value })}
/>
</div>
);
}⚠️ 注意事项与最佳实践
- 权限与可见性：getPostTypes() 默认仅返回当前用户具有 read 权限且 show_in_rest === true 的类型，无需额外鉴权；
- 国际化兼容：使用 pt.labels.singular_name 而非 pt.name，确保多语言站点正确显示翻译后的名称；
- 空状态处理：postTypes 初始为 undefined，务必通过 Array.isArray() 判断后再 .filter() 和 .map()，避免运行时错误；
- 性能优化：useSelect 的第二个参数 [] 表示依赖项为空数组，即只在组件挂载时执行一次查询，符合预期；
-
UI 位置建议：如非核心编辑区域需求，推荐将
移至 Settings Sidebar（通过 InspectorControls），保持主编辑区简洁； - 服务端验证补充：虽然前端已做筛选，保存前仍应在 PHP 的 save() 或后端 API 中校验 postType 是否真实存在且启用，保障安全性。
通过以上方式，你构建的下拉控件将自动适配主题/插件新注册的任意自定义文章类型，无需手动维护选项列表，真正实现可扩展、可维护、符合 Gutenberg 设计规范的专业区块体验。
