Gutenberg core/read-more 块深度解析服务端渲染的链接块【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenbergcore/read-more 是 GutenbergWordPress 块编辑器项目内置的主题类动态块用于在文章列表、查询循环等场景中展示指向文章、页面或其他内容类型的链接。本文以 read-more 块官方文档 为主体骨架结合该块在仓库中的 block.json、服务端渲染实现 与 编辑端组件 源码完整解析其属性定义、支持能力、渲染原理与编辑器交互读完即可在自己的主题或块开发中精准使用并二次扩展该块。一、块概览一个纯服务端渲染的动态块按官方文档的块 API 定义core/read-more具有以下注册元信息项目值块名称Namecore/read-more分类Categorytheme主题类API 版本API Version3块类型Block TypeDynamic动态块服务端渲染该块属于动态块Dynamic Block它由服务器在渲染时生成最终 HTML而不会把静态 HTML 保存进文章内容。这也决定了它通常在**查询循环Query Loop**等模板块内部被反复渲染——每次渲染时根据当前上下文中提供的postId动态生成指向对应文章的链接实现一篇文章一个链接的效果。二、块注册与元数据block.json 如何定义该块与 Gutenberg 中所有通过register_block_type_from_metadata注册的块一致core/read-more的块元数据集中在 block.json{ $schema: https://schemas.wp.org/trunk/block.json, apiVersion: 3, name: core/read-more, title: Read More, category: theme, description: Displays the link of a post, page, or any other content-type., textdomain: default, attributes: { content: { type: string, role: content }, linkTarget: { type: string, default: _self } }, usesContext: [ postId ], supports: { anchor: true, html: false, color: { gradients: true, text: true }, typography: { fontSize: true, lineHeight: true, __experimentalFontFamily: true, __experimentalFontWeight: true, __experimentalFontStyle: true, __experimentalTextTransform: true, __experimentalLetterSpacing: true, __experimentalTextDecoration: true, __experimentalDefaultControls: { fontSize: true, textDecoration: true } }, spacing: { margin: [ top, bottom ], padding: true, __experimentalDefaultControls: { padding: true } }, __experimentalBorder: { color: true, radius: true, width: true, __experimentalDefaultControls: { width: true } }, interactivity: { clientNavigation: true } }, style: wp-block-read-more }几个关键点注册入口PHP 侧通过register_block_type_from_metadata( __DIR__ . /read-more, ... )以目录方式加载元数据见 index.php并挂载在init钩子上JS 侧则通过 init.js 调用 index.js 中的init()完成编辑端注册。样式句柄style: wp-block-read-more对应 style.scss该样式由构建流程编译后随块按需加载。html: false禁止用户直接在代码编辑器中书写原始 HTML保证该块的输出完全由服务端渲染逻辑控制。三、属性Attributes详解官方文档给出的属性定义定义于 block.json 的attributes属性中属性类型默认值说明contentstring—角色Role为content即块的内容文本linkTargetstring_self链接的打开方式target属性值3.1 content链接文字content是块的内容角色属性存的是链接上显示的文字。它有两个特殊之处默认回退当content为空时服务端渲染会回退到默认文案Read more本地化字符串见下文渲染实现富文本编辑在编辑器中它不是普通文本框而是RichText组件渲染的可直接编辑链接文字见 edit.jsx且设置了withoutInteractiveFormatting禁用链接内部的内联格式。3.2 linkTarget链接打开方式linkTarget的默认值是_self当前窗口打开。编辑器侧通过设置面板Inspector Controls中的Open in new tab开关控制开启时设为_blank关闭时重置为_self见 edit.jsx。在 PHP 渲染时该值会被写入a标签的target属性esc_attr( $attributes[linkTarget] )完整代码见 index.php。四、支持能力Supports样式与布局的可定制范围Supports 定义于 block.json 的supports属性中官方文档列出的能力如下anchortrue——允许为该块设置 HTML 锚点id属性便于页内锚点跳转。htmlfalse——不支持原始 HTML 编辑。colorgradients: true、text: true——支持渐变背景与文字颜色注意这里未开放背景纯色仅开放了渐变与文字色。typographyfontSize、lineHeight为true同时开启了实验性排版能力__experimentalFontFamily字体、__experimentalFontWeight字重、__experimentalFontStyle样式、__experimentalTextTransform大小写转换、__experimentalLetterSpacing字距、__experimentalTextDecoration文本装饰默认控制项为fontSize与textDecoration。spacingmargin仅开放top与bottom两个方向padding为true全方向开放默认控制项为padding。interactivityclientNavigation: true——支持客户端导航在站点编辑/前台交互式导航中平滑切换页面避免整页刷新。需要说明的是block.json 中还额外配置了__experimentalBorder颜色、圆角、宽度默认控制项为width这一项属于块元数据中的实验性支持编辑器据此在样式面板中渲染对应的边框控制项。这些能力共同决定了用户在编辑器样式侧栏里能看到哪些定制选项。五、上下文Context块如何拿到 postIdcore/read-more通过usesContext: [ postId ]见 block.json消费由外层块提供的postId上下文。官方文档的 Context 一节明确指出其唯一依赖的上下文是postId。这也解释了为什么该块脱离查询循环等提供postId的容器时无法渲染——服务端渲染函数在拿不到postId时会直接返回空字符串if ( ! isset( $block-context[postId] ) ) { return ; }见 index.php。因此它的典型宿主是查询循环Query Loop块或文章列表模板外层块遍历文章并下发postIdread-more块随即为每一篇文章生成对应链接。六、服务端渲染实现render_block_core_read_more 全流程动态块的核心逻辑在 index.php 的render_block_core_read_more( $attributes, $content, $block )函数中自 WordPress 6.0.0 起提供。完整流程如下上下文校验若$block-context[postId]不存在则返回空字符串不输出任何 HTML。获取文章标题get_the_title( $post_ID )取文章标题若标题为空则回退为本地化文案untitled post %s%s为文章 ID用作无障碍描述。构造屏幕阅读器文本以: %s%s为文章标题或 ID拼出screen-reader-text内容保证读屏软件能说清楚这个链接指向哪篇文章。计算对齐类名若存在justifyContent属性则附加is-justified-{value}类对应查询循环中对齐设置。获取包装属性get_block_wrapper_attributes()生成class、id锚点、内联样式等包装属性最终输出到a标签上。确定链接文字$more_text优先使用content属性经wp_kses_post过滤为空时回退到本地化文案Read more。输出链接return sprintf( a %1$s href%2$s target%3$s%4$sspan classscreen-reader-text%5$s/span/a, $wrapper_attributes, esc_url( get_the_permalink( $post_ID ) ), esc_attr( $attributes[linkTarget] ), $more_text, $screen_reader_text );可见最终生成的 HTML 结构是带包装属性类名、锚点、样式的a标签href指向get_the_permalink( $post_ID )返回的文章永久链接target由linkTarget决定内部依次是可见链接文字和仅供读屏软件识别的screen-reader-text补充说明。所有输出均经过esc_url/esc_attr/wp_kses_post转义保证了 XSS 安全性。注册部分通过init钩子完成function register_block_core_read_more() { register_block_type_from_metadata( __DIR__ . /read-more, array( render_callback render_block_core_read_more, ) ); } add_action( init, register_block_core_read_more );七、编辑器交互富文本直改 设置面板编辑端组件位于 edit.jsx由ReadMore函数组件实现包含两大块1. 设置面板InspectorControls使用__experimentalToolsPanel/ToolsPanelItem组件构建设置面板其中唯一的控制项是Open in new tab开关ToggleControl。开关状态由linkTarget _blank决定切换时在_blank与_self之间写入linkTarget面板的重置全部动作会把linkTarget重置回_self。2. 富文本编辑区使用RichText组件直接渲染块主体tagNamea使其在编辑器中即以链接形态呈现placeholder为Read morevalue绑定content属性onChange同步写回。同时配置了__unstableOnSplitAtEnd当光标在末尾回车拆分块时会在其后插入默认块createBlock( getDefaultBlockName() )延续 Gutenberg 块编辑器的拆分交互习惯。块图标取自wordpress/icons的link图标并在 index.js 中提供了一个example示例content: Read more供块目录与预览场景使用。八、样式与可访问性设计style.scss 定义了wp-block-read-more的前台样式.wp-block-read-more { display: block; width: fit-content; :where(:not([style*text-decoration])) { text-decoration: none; :focus, :active { text-decoration: none; } } }设计要点display: block配合width: fit-content使链接块按内容收缩宽度、独立成行便于在文章列表中垂直排布通过:where(:not([style*text-decoration]))只在用户未通过排版设置显式指定文本装饰时去掉下划线避免覆盖用户的样式面板配置服务端渲染中嵌入的screen-reader-text为链接补充了指向哪篇文章的无障碍信息是对可访问性的显式支持屏幕阅读器用户能听到例如 Read more: 我的文章标题。九、动态块的内容存储格式因为这是动态块文章内容中不会保存最终 HTML只保存块注释标记!-- wp:read-more /--从官方文档的 Block Markup 一节可知该块在文章内容中以自闭合块注释形式存储无属性的默认形态。如果设置了属性则会以 JSON 形式内联在注释中例如!-- wp:read-more {content:继续阅读,linkTarget:_blank} /--实际渲染时由 PHP 服务端根据注释中的属性与上下文中的postId实时生成链接。这意味着即便文章标题后续发生变化链接指向也不会失效但同时也意味着前台必须经过 WordPress 渲染管线才能得到最终 HTML。十、典型应用场景与扩展方向综合源码实现core/read-more块最典型的落地场景是查询循环Query Loop模板在文章卡片布局中放置该块自动为循环内每篇文章生成链接——这正是它通过usesContext: postId消费上下文的设计初衷首页/归档页的自定义文章列表与latest-posts、post-excerpt等块组合使用这些块在 block-library 源码 中同样引用read-more相关渲染逻辑构成摘要 的经典卡片结构多语言与品牌化定制通过content属性替换默认的Read more文案例如改为继续阅读、查看详情等配合linkTarget决定是否新窗口打开。若需在自有主题中复刻该块的注册方式可直接参考 index.php 的register_block_type_from_metadatarender_callback模式将block.json中supports、attributes、usesContext的配置迁移到自定义块中即可获得与本块一致的编辑器体验与渲染行为。参考资料read-more 块 API 文档block.json 元数据定义服务端渲染实现 index.php编辑端组件 edit.jsx块入口与注册 index.js、init.js前台样式 style.scss【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/17 22:56:59 · 阅读 1.2k Gutenberg core/read-more 块深度解析：服务端渲染的“阅读更多“链接块
Gutenberg core/read-more 块深度解析服务端渲染的链接块【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenbergcore/read-more 是 GutenbergWordPress 块编辑器项目内置的主题类动态块用于在文章列表、查询循环等场景中展示指向文章、页面或其他内容类型的链接。本文以 read-more 块官方文档 为主体骨架结合该块在仓库中的 block.json、服务端渲染实现 与 编辑端组件 源码完整解析其属性定义、支持能力、渲染原理与编辑器交互读完即可在自己的主题或块开发中精准使用并二次扩展该块。一、块概览一个纯服务端渲染的动态块按官方文档的块 API 定义core/read-more具有以下注册元信息项目值块名称Namecore/read-more分类Categorytheme主题类API 版本API Version3块类型Block TypeDynamic动态块服务端渲染该块属于动态块Dynamic Block它由服务器在渲染时生成最终 HTML而不会把静态 HTML 保存进文章内容。这也决定了它通常在**查询循环Query Loop**等模板块内部被反复渲染——每次渲染时根据当前上下文中提供的postId动态生成指向对应文章的链接实现一篇文章一个链接的效果。二、块注册与元数据block.json 如何定义该块与 Gutenberg 中所有通过register_block_type_from_metadata注册的块一致core/read-more的块元数据集中在 block.json{ $schema: https://schemas.wp.org/trunk/block.json, apiVersion: 3, name: core/read-more, title: Read More, category: theme, description: Displays the link of a post, page, or any other content-type., textdomain: default, attributes: { content: { type: string, role: content }, linkTarget: { type: string, default: _self } }, usesContext: [ postId ], supports: { anchor: true, html: false, color: { gradients: true, text: true }, typography: { fontSize: true, lineHeight: true, __experimentalFontFamily: true, __experimentalFontWeight: true, __experimentalFontStyle: true, __experimentalTextTransform: true, __experimentalLetterSpacing: true, __experimentalTextDecoration: true, __experimentalDefaultControls: { fontSize: true, textDecoration: true } }, spacing: { margin: [ top, bottom ], padding: true, __experimentalDefaultControls: { padding: true } }, __experimentalBorder: { color: true, radius: true, width: true, __experimentalDefaultControls: { width: true } }, interactivity: { clientNavigation: true } }, style: wp-block-read-more }几个关键点注册入口PHP 侧通过register_block_type_from_metadata( __DIR__ . /read-more, ... )以目录方式加载元数据见 index.php并挂载在init钩子上JS 侧则通过 init.js 调用 index.js 中的init()完成编辑端注册。样式句柄style: wp-block-read-more对应 style.scss该样式由构建流程编译后随块按需加载。html: false禁止用户直接在代码编辑器中书写原始 HTML保证该块的输出完全由服务端渲染逻辑控制。三、属性Attributes详解官方文档给出的属性定义定义于 block.json 的attributes属性中属性类型默认值说明contentstring—角色Role为content即块的内容文本linkTargetstring_self链接的打开方式target属性值3.1 content链接文字content是块的内容角色属性存的是链接上显示的文字。它有两个特殊之处默认回退当content为空时服务端渲染会回退到默认文案Read more本地化字符串见下文渲染实现富文本编辑在编辑器中它不是普通文本框而是RichText组件渲染的可直接编辑链接文字见 edit.jsx且设置了withoutInteractiveFormatting禁用链接内部的内联格式。3.2 linkTarget链接打开方式linkTarget的默认值是_self当前窗口打开。编辑器侧通过设置面板Inspector Controls中的Open in new tab开关控制开启时设为_blank关闭时重置为_self见 edit.jsx。在 PHP 渲染时该值会被写入a标签的target属性esc_attr( $attributes[linkTarget] )完整代码见 index.php。四、支持能力Supports样式与布局的可定制范围Supports 定义于 block.json 的supports属性中官方文档列出的能力如下anchortrue——允许为该块设置 HTML 锚点id属性便于页内锚点跳转。htmlfalse——不支持原始 HTML 编辑。colorgradients: true、text: true——支持渐变背景与文字颜色注意这里未开放背景纯色仅开放了渐变与文字色。typographyfontSize、lineHeight为true同时开启了实验性排版能力__experimentalFontFamily字体、__experimentalFontWeight字重、__experimentalFontStyle样式、__experimentalTextTransform大小写转换、__experimentalLetterSpacing字距、__experimentalTextDecoration文本装饰默认控制项为fontSize与textDecoration。spacingmargin仅开放top与bottom两个方向padding为true全方向开放默认控制项为padding。interactivityclientNavigation: true——支持客户端导航在站点编辑/前台交互式导航中平滑切换页面避免整页刷新。需要说明的是block.json 中还额外配置了__experimentalBorder颜色、圆角、宽度默认控制项为width这一项属于块元数据中的实验性支持编辑器据此在样式面板中渲染对应的边框控制项。这些能力共同决定了用户在编辑器样式侧栏里能看到哪些定制选项。五、上下文Context块如何拿到 postIdcore/read-more通过usesContext: [ postId ]见 block.json消费由外层块提供的postId上下文。官方文档的 Context 一节明确指出其唯一依赖的上下文是postId。这也解释了为什么该块脱离查询循环等提供postId的容器时无法渲染——服务端渲染函数在拿不到postId时会直接返回空字符串if ( ! isset( $block-context[postId] ) ) { return ; }见 index.php。因此它的典型宿主是查询循环Query Loop块或文章列表模板外层块遍历文章并下发postIdread-more块随即为每一篇文章生成对应链接。六、服务端渲染实现render_block_core_read_more 全流程动态块的核心逻辑在 index.php 的render_block_core_read_more( $attributes, $content, $block )函数中自 WordPress 6.0.0 起提供。完整流程如下上下文校验若$block-context[postId]不存在则返回空字符串不输出任何 HTML。获取文章标题get_the_title( $post_ID )取文章标题若标题为空则回退为本地化文案untitled post %s%s为文章 ID用作无障碍描述。构造屏幕阅读器文本以: %s%s为文章标题或 ID拼出screen-reader-text内容保证读屏软件能说清楚这个链接指向哪篇文章。计算对齐类名若存在justifyContent属性则附加is-justified-{value}类对应查询循环中对齐设置。获取包装属性get_block_wrapper_attributes()生成class、id锚点、内联样式等包装属性最终输出到a标签上。确定链接文字$more_text优先使用content属性经wp_kses_post过滤为空时回退到本地化文案Read more。输出链接return sprintf( a %1$s href%2$s target%3$s%4$sspan classscreen-reader-text%5$s/span/a, $wrapper_attributes, esc_url( get_the_permalink( $post_ID ) ), esc_attr( $attributes[linkTarget] ), $more_text, $screen_reader_text );可见最终生成的 HTML 结构是带包装属性类名、锚点、样式的a标签href指向get_the_permalink( $post_ID )返回的文章永久链接target由linkTarget决定内部依次是可见链接文字和仅供读屏软件识别的screen-reader-text补充说明。所有输出均经过esc_url/esc_attr/wp_kses_post转义保证了 XSS 安全性。注册部分通过init钩子完成function register_block_core_read_more() { register_block_type_from_metadata( __DIR__ . /read-more, array( render_callback render_block_core_read_more, ) ); } add_action( init, register_block_core_read_more );七、编辑器交互富文本直改 设置面板编辑端组件位于 edit.jsx由ReadMore函数组件实现包含两大块1. 设置面板InspectorControls使用__experimentalToolsPanel/ToolsPanelItem组件构建设置面板其中唯一的控制项是Open in new tab开关ToggleControl。开关状态由linkTarget _blank决定切换时在_blank与_self之间写入linkTarget面板的重置全部动作会把linkTarget重置回_self。2. 富文本编辑区使用RichText组件直接渲染块主体tagNamea使其在编辑器中即以链接形态呈现placeholder为Read morevalue绑定content属性onChange同步写回。同时配置了__unstableOnSplitAtEnd当光标在末尾回车拆分块时会在其后插入默认块createBlock( getDefaultBlockName() )延续 Gutenberg 块编辑器的拆分交互习惯。块图标取自wordpress/icons的link图标并在 index.js 中提供了一个example示例content: Read more供块目录与预览场景使用。八、样式与可访问性设计style.scss 定义了wp-block-read-more的前台样式.wp-block-read-more { display: block; width: fit-content; :where(:not([style*text-decoration])) { text-decoration: none; :focus, :active { text-decoration: none; } } }设计要点display: block配合width: fit-content使链接块按内容收缩宽度、独立成行便于在文章列表中垂直排布通过:where(:not([style*text-decoration]))只在用户未通过排版设置显式指定文本装饰时去掉下划线避免覆盖用户的样式面板配置服务端渲染中嵌入的screen-reader-text为链接补充了指向哪篇文章的无障碍信息是对可访问性的显式支持屏幕阅读器用户能听到例如 Read more: 我的文章标题。九、动态块的内容存储格式因为这是动态块文章内容中不会保存最终 HTML只保存块注释标记!-- wp:read-more /--从官方文档的 Block Markup 一节可知该块在文章内容中以自闭合块注释形式存储无属性的默认形态。如果设置了属性则会以 JSON 形式内联在注释中例如!-- wp:read-more {content:继续阅读,linkTarget:_blank} /--实际渲染时由 PHP 服务端根据注释中的属性与上下文中的postId实时生成链接。这意味着即便文章标题后续发生变化链接指向也不会失效但同时也意味着前台必须经过 WordPress 渲染管线才能得到最终 HTML。十、典型应用场景与扩展方向综合源码实现core/read-more块最典型的落地场景是查询循环Query Loop模板在文章卡片布局中放置该块自动为循环内每篇文章生成链接——这正是它通过usesContext: postId消费上下文的设计初衷首页/归档页的自定义文章列表与latest-posts、post-excerpt等块组合使用这些块在 block-library 源码 中同样引用read-more相关渲染逻辑构成摘要 的经典卡片结构多语言与品牌化定制通过content属性替换默认的Read more文案例如改为继续阅读、查看详情等配合linkTarget决定是否新窗口打开。若需在自有主题中复刻该块的注册方式可直接参考 index.php 的register_block_type_from_metadatarender_callback模式将block.json中supports、attributes、usesContext的配置迁移到自定义块中即可获得与本块一致的编辑器体验与渲染行为。参考资料read-more 块 API 文档block.json 元数据定义服务端渲染实现 index.php编辑端组件 edit.jsx块入口与注册 index.js、init.js前台样式 style.scss【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考