WordPress开发笔记

WordPress核心区块名称查询列表,及Block Types标识符详解

WordPress核心区块名称与Block Types标识符紧密关联。

区块名称查询列表

下表格既是WordPress核心区块名称查询列表,也是Block Types标识符列表。

区块类别区块中文名称Block Type 标识符主要用途简述
文字段落 (Paragraph)core/paragraph输入文本段落
标题 (Heading)core/heading添加各级标题
列表 (List)core/list创建有序或无序列表
引述 (Quote)core/quote添加引文样式
代码 (Code)core/code插入并高亮显示代码片段
预格式化 (Preformatted)core/preformatted保留空白和换行的文本
诗歌 (Verse)core/verse输入诗歌,保留空格和换行
表格 (Table)core/table插入表格
经典 (Classic)core/classic使用旧版的经典编辑器(TinyMCE)
短代码 (Shortcode)core/shortcode插入和执行短代码
媒体图像 (Image)core/image插入单张图片
画廊 (Gallery)core/gallery插入图片相册
音频 (Audio)core/audio嵌入音频文件并播放
视频 (Video)core/video嵌入视频文件并播放
文件 (File)core/file插入文件下载链接
媒体和文本 (Media & Text)core/media-text并排显示媒体和文本
封面 (Cover)core/cover添加带有文本叠加的图片或视频背景,常用作横幅
头像 (Avatar)core/avatar显示用户头像
设计按钮 (Buttons)core/buttons添加一个或多个按钮
列 (Columns)core/columns创建多列布局
组 (Group)core/group将多个区块组合在一起,统一设置样式
堆叠 (Stack)core/stack垂直堆叠子区块
行 (Row)core/row在水平行中排列子区块
分隔符 (Separator)core/separator插入水平分隔线
间距 (Spacer)core/spacer在区块之间插入空白间距
更多 (More)core/more在文章中插入“更多”标签
小工具短代码 (Shortcode)core/shortcode插入和执行短代码
归档 (Archives)core/archives显示文章月度归档列表
日历 (Calendar)core/calendar显示文章发布日历
分类目录 (Categories)core/categories显示分类目录列表
最新评论 (Latest Comments)core/latest-comments显示最新评论列表
最新文章 (Latest Posts)core/latest-posts显示最新文章列表
页面列表 (Page List)core/page-list显示页面列表
RSScore/rss显示RSS订阅内容
搜索 (Search)core/search显示搜索框
社交图标 (Social Icons)core/social-icons添加社交网站图标链接
标签云 (Tag Cloud)core/tag-cloud显示标签云
主题文章内容 (Post Content)core/post-content显示当前文章或页面的内容(主要用于模板)
文章摘要 (Post Excerpt)core/post-excerpt显示文章摘要
文章特色图像 (Post Featured Image)core/post-featured-image显示文章的特色图像
评论查询循环 (Comment Query Loop)core/comment-query-loop显示评论列表
模板部分 (Template Part)core/template-part插入模板部件
查询循环 (Query Loop)core/query-loop根据条件显示文章列表(动态区块)
站点徽标 (Site Logo)core/site-logo显示站点徽标
站点标题 (Site Title)core/site-title显示站点标题
站点 tagline (Site Tagline)core/site-tagline显示站点副标题(标语)
登录/登出 (Login/Out)core/loginout显示登录或登出链接
文章导航 (Post Navigation)core/post-navigation显示上一篇文章和下一篇文章的导航链接
嵌入YouTubecore/embed (或特定如 youtube/embed)嵌入YouTube视频(注意:多数嵌入区块共享 core/embed 或使用特定提供商标识符)
Twittercore/embed (或特定如 twitter/embed)嵌入Twitter推文
Facebookcore/embed (或特定如 facebook/embed)嵌入Facebook内容
Instagramcore/embed (或特定如 instagram/embed)嵌入Instagram内容
Spotifycore/embed (或特定如 spotify/embed)嵌入Spotify内容
及其他多种嵌入服务core/embed用于通过URL嵌入多种第三方内容

关于“嵌入”类区块的特别说明

WordPress为许多第三方服务(如YouTube、Twitter等)提供了专门的嵌入区块。虽然它们在某些上下文中可能显示为独立的区块(例如在插入器中看到“YouTube”),但其底层的Block Type标识符很多时候是共享的 core/embed。WordPress通过区块的属性(Attributes) 来区分具体要嵌入的是哪种服务。当然,部分插件或环境也可能为特定服务注册更精确的标识符(如 youtube/embed)。在定义模式(Pattern)的 Block Types 时,如果希望模式适用于所有嵌入内容,使用 core/embed 通常是一个广泛兼容的选择;如果只想针对特定的嵌入服务,可能需要查询其更精确的标识符或进行测试。

如何使用这些Block Types标识符

这些标识符主要用于主题开发(如在 theme.json 中配置样式,或在注册模式(Pattern)时指定 Block Types 以关联区块)和插件开发(如创建自定义区块或扩展功能)中。对于日常的内容编辑工作,你通常不会直接接触到这些标识符。

Block Types 标识符

简单来说,“Block Types 标识符” 是 WordPress 用来在系统中唯一识别和注册一个区块类型的字符串 ID。

标识符的构成

一个完整的 Block Types 标识符通常由两部分组成,格式为:namespace/block-name

命名空间:

这是为了区分不同来源的区块,避免命名冲突。

第三方主题或插件创建的区块: 

通常会使用主题或插件的文本域或一个唯一名称作为命名空间。例如,一个名为 “My Plugin” 的插件创建了一个 “CTA” 区块,其标识符可能是 my-plugin/cta

区块名: 

在特定命名空间下唯一标识该区块的字符串。它应该是描述性的且简洁,例如 gallerybuttonsocial-links

标识符的作用

这个标识符在整个 WordPress 系统中扮演着关键角色:

注册区块: 

当开发者使用 JavaScript(registerBlockType 函数)或 PHP(register_block_type 函数)创建一个新区块时,第一个参数就是这个标识符。

在数据库中存储内容: 

当你在一篇文章中插入一个区块时,WordPress 会在文章内容中保存这个标识符。例如,你会在文章的 HTML 注释中看到 <!-- wp:core/image {...} -->,这里的 core/image 就是标识符,它告诉 WordPress:“这里是一个图像区块,请用对应的渲染逻辑来处理它”。

识别和调用区块: 

无论是在前端渲染、在编辑器里加载,还是在代码中动态插入区块(例如使用 register_block_pattern 或 do_blocks),都需要通过这个标识符来指定是哪一个区块。