WordPress 块编辑器 core/post-date 块深度解析属性、动态渲染与发布/修改日期变体全指南【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg本篇技术指南以 Gutenberg 开源仓库中core/post-dateDate块为核心系统讲解该动态块的block.json属性与 Supports 配置、服务器端渲染逻辑、编辑器端交互界面、Publish Date 与 Modified Date 两个变体以及向后兼容的弃用迁移机制。读完本文你将完整掌握如何在模板、查询循环Query Loop与主题开发中正确使用并深度定制该块同时理解其底层源码实现PHP 与 React 两侧。块概览一个服务端渲染的动态块core/post-date是 WordPress 块编辑器Gutenberg中用于展示自定义日期的主题类Category:theme核心块定义于 packages/block-library/src/post-date/block.json。根据其自动生成的 API 文档packages/block-library/src/post-date/README.md它的关键元信息如下元信息项值块名Namecore/post-date分类CategorythemeAPI 版本API Version3块类型Block Type动态块Dynamic / server-rendered文本域textdomaindefault示例视口宽度example.viewportWidth350block.json中同时给出了块标题Date与描述Display a custom date.。作为动态块它不把 HTML 存进文章内容而是在服务端按需渲染详见下文动态块与 Block Markup一节这也是它在查询循环、归档页中能随每篇文章动态变化的原因。Attributesdatetime / format / isLink 三个核心属性块的属性Attributes通过block.json的attributes属性声明作用是定义可被编辑并持久化的数据字段。core/post-date共声明了三个属性属性类型默认值说明datetimestring—要显示的日期时间值Role 为contentformatstring—日期显示格式PHP 日期格式字符串或特殊值human-diffisLinkbooleanfalse是否为日期添加指向文章本身的链接Role 为content对应源码packages/block-library/src/post-date/block.jsonattributes: { datetime: { type: string, role: content }, format: { type: string }, isLink: { type: boolean, default: false, role: content } }三个属性的实际含义datetime标记为role: content的属性是块的内容核心会直接出现在文章内容的块注释参数中。它既可以是显式写入的一个日期字符串也可以通过 Block Bindings块绑定绑定到core/post-data数据源见下文变体与服务器端渲染两节。format控制日期最终如何呈现。除 PHP 日期格式如Y-m-d、F j, Y外还支持特殊值human-diff人性化相对时间如2 hours ago。为空时使用站点常规设置中的日期格式。isLinkfalse时日期只是纯文本timetrue时日期会被包裹在指向该文章永久链接permalink的a标签内。Supports块支持的面板能力supports声明块可被哪些区块设置能力接管。core/post-date的 Supports 配置见 block.json 与 README 的 Supports 一节整理如下支持项值说明anchortrue允许设置 HTML 锚点idhtmlfalse不允许直接编辑 HTML符合动态块定位color.gradientstrue支持渐变背景color.linktrue支持链接颜色spacing.margintrue支持外边距spacing.paddingtrue支持内边距typography.fontSizetrue支持字号typography.lineHeighttrue支持行高typography.textAligntrue支持文本对齐interactivity.clientNavigationtrue支持客户端导航站点编辑中的无刷新跳转除 README 中列出的项外block.json还声明了若干实验性能力排版方面有__experimentalFontFamily字体族、__experimentalFontWeight字重、__experimentalFontStyle字体风格、__experimentalTextTransform大小写变换、__experimentalTextDecoration文字装饰、__experimentalLetterSpacing字间距边框方面有__experimentalBorder的radius/color/width/style四项。同时通过__experimentalDefaultControls指定默认开启的控件颜色默认开背景、文本、链接排版默认开字号边框默认全开。这些默认控件的意义在于当主题或全局样式没有显式配置时编辑器的默认控件会以合理的最小集自动呈现避免侧栏过载。Context依赖的文章上下文数据usesContext声明该块运行所需的外部上下文README Context 一节postId当前文章 ID —— 决定日期取哪篇文章、链接指向哪里postType当前文章类型 —— 编辑器用它加载文章类型标签如文章/页面来动态生成Link to %s文案queryId所属查询循环Query Loop的 ID —— 用于判断块是否位于查询循环内部编辑器中isDescendentOfQueryLoop Number.isFinite( queryId )见 edit.jsx。块本身不通过providesContext向外提供上下文。这意味着它必须处于能获取上述上下文的父级结构中最典型的是查询循环、文章模板或单篇模板才能正确渲染脱离上下文时编辑器中会以当前日期作为兜底预览值。动态块与 Block Markup因为它是动态块文章内容里只保存一段块注释Block Comment真正的 HTML 由服务端渲染输出README 的 Block Markup 一节!-- wp:post-date /--带属性时的完整形态类似!-- wp:post-date {format:human-diff,isLink:true} /--保存时save()返回null见 deprecated.js 中save() { return null; }的历史形态当前版本编辑设置见 index.js即不保存任何 HTML这是所有动态块的共同特征也是html: false的直接原因。服务器端渲染原理render_block_core_post_date 逐行拆解服务端渲染回调定义在 packages/block-library/src/post-date/index.php通过register_block_type_from_metadata( __DIR__ . /post-date, array( render_callback render_block_core_post_date ) )注册第 98-105 行并在init钩子上调用。函数签名接收$attributes、$content与$blockWP_Block实例返回包裹在time标签中的文章日期。1. 旧版legacy兼容分支当既没有datetime属性、也没有针对datetime的 Block Bindings 配置时第 22-43 行函数判定这是没有datetime属性的旧版块转而从块绑定源core/post-data取值$source get_block_bindings_source( core/post-data ); if ( isset( $attributes[displayType] ) modified $attributes[displayType] ) { $source_args array( field modified ); } else { $source_args array( field date ); } $attributes[datetime] $source-get_value( $source_args, $block, datetime );这里field可以是date发布日期或modified修改日期对应 PHP 侧get_the_date()/get_the_modified_date()。旧版displayType: modified还会被加上wp-block-post-date__modified-date类第 45-47 行。2. 空值处理如果datetime为空第 49-57 行函数直接返回空字符串。注释指出当块绑定到最后修改日期且该日期早于发布日期时会出现此情况——此时必须尊重并返回空值该逻辑源自 WordPress/gutenberg#46839 的讨论。3. 日期格式化若format human-diff第 62-69 行使用human_time_diff()生成相对时间并根据时间戳是否晚于当前时刻分别拼接__(%s from now)或__(%s ago)文案否则第 70-73 行format为空时回退到站点选项get_option( date_format )最终用wp_date( $format, $post_timestamp )输出天然支持时区与多语言本地化。4. 类名与包装结构有textAlign时追加has-text-align-{值}第 75-77 行设置了链接文字颜色时追加has-link-color第 78-80 行用get_block_wrapper_attributes()统一生成包裹属性第 82 行这是主题可控类的关键入口核心输出第 84-88 行日期放在语义化time datetimeISO 格式标签中datetime属性值经esc_attr、显示文本经esc_html转义若isLink为真且存在postId上下文再整体包一层指向get_the_permalink( $block-context[postId] )的aURL 经esc_url转义。最终结构div classwp-block-post-date ... a href文章永久链接 time datetime2026-09-16T06:00:00September 16, 2026/time /a /div5. 相关单元测试印证仓库提供了专门的 PHP 单测 phpunit/blocks/render-block-core-post-date.php 来验证上述行为test_render_with_explicit_date_attribute显式datetime属性会被原样包含在输出中第 34-53 行test_render_with_date_attribute_bindingBlock Bindings 中的date/modified字段分别与get_the_date/get_the_modified_date结果一致且绑定值会覆盖显式回退值第 55-105 行test_render_legacy_block无datetime的旧版块按displayType回退到date/modified第 110-131 行test_render_modified_date_before_publish_date修改日期早于发布日期时输出空字符串第 133-159 行。这些测试直接印证了前文所述的 legacy 分支、绑定覆盖与空值策略。编辑器端体验工具栏与侧栏的完整交互编辑器侧的实现位于 packages/block-library/src/post-date/edit.jsx核心组件PostDateEdit提供了首次挂载默认值datetime未定义时用__unstableMarkNextChangeAsNotPersistent()标记一次不持久化的变更并写入当前日期第 60-65 行目的是把新版块与默认取文章发布日期的旧版块区分开工具栏修改日期非查询循环或默认编辑模式下显示BlockControls工具栏铅笔图标按钮wordpress/icons的pencil标题Change Date弹出__experimentalPublishDateTimePicker日期时间选择器支持 12/24 小时制判定依据站点时间格式与dmy/mdy/ymd日期顺序本地化第 119-173 行侧栏设置ToolsPanelInspectorControls内是ToolsPanel第 175-234 行含两个默认显示的面板项Date Format日期格式__experimentalDateFormatPicker默认格式取站点设置date_format第 187-202 行Link to %s链接到文章ToggleControl开关标签会利用postType.labels.singular_name动态生成例如文章类型为文章时显示链接到文章第 203-232 行12 小时制判定函数is12HourFormat()第 241-247 行通过正则/(?:^|[^\\])[aAgh]/检测格式串中是否存在未转义的 12 小时制字符a、A、g、h。对应的 test/edit.jsdom.test.js 用参数化用例覆盖了H:ifalse、g:i Atrue、\g\r\e\a\t转义字符false等边界情况。编辑器预览同样遵循human-diff用humanTimeDiff()、其余用dateI18n()的双分支逻辑第 96-105 行与 PHP 侧渲染保持一致。变体Post Date 与 Modified Datepackages/block-library/src/post-date/variations.js 定义了该块的两个区块变体均基于 Block Bindings 的core/post-data源变体名标题描述绑定字段附加类post-datePost Date展示文章的发布日期field: date—post-date-modifiedModified Date展示文章的最后更新日期field: modifiedwp-block-post-date__modified-date变体的attributes通过metadata.bindings.datetime挂接数据源isActive判定依据是绑定源与args.field的取值第 19-24、41-45 行。scope为[inserter, transform]即既可从插入器Inserter单独插入也可在块间转换。编辑器侧还会根据当前激活变体决定工具栏标题是Publish Date还是Dateedit.jsx并且在 Modified Date 变体激活时隐藏修改日期按钮第 119-121 行。两个变体在区块插入器界面表现为两个独立条目文章日期Post Date与修改日期Modified Date方便作者直接插入最后更新日期而无需手动绑定。向后兼容与弃用迁移机制core/post-date在历次迭代中积累了大量历史形态packages/block-library/src/post-date/deprecated.js 按[v4, v3, v2, v1]顺序登记了 4 个旧版本新版本排最前以获得更高匹配优先级v4已含datetime属性仅迁移历史textAlignmigrate: migrateTextAlignv3迁移块绑定参数名key→field第 147-174 行这是core/post-data源参数统一为field的兼容步骤v2面向既无datetime也无绑定的旧块将displayTypedate/modified转换为metadata.bindings.datetime结构modified同时追加wp-block-post-date__modified-date类第 249-272 行v1最早的仅textAlign/format/isLink版本迁移字体族与文本对齐第 314-316 行。这套机制保证了历史文章中的旧注释在块解析时能被逐级识别并升级到当前结构对动态块尤为重要——旧内容里的!-- wp:post-date {displayType:modified} /--也能在新版本中正确渲染为修改日期。样式与主题集成要点样式文件 packages/block-library/src/post-date/style.scss 非常克制仅一行核心规则.wp-block-post-date { // This block has customizable padding, border-box makes that more predictable. box-sizing: border-box; }由于块支持自定义内边距显式声明box-sizing: border-box使 padding 计算更可预期。其余视觉样式字号、颜色、行高、对齐、边框、链接色等全部交由块级 Supports 对应的生成类与全局样式接管主题开发者可以通过以下途径定制使用.wp-block-post-date选择器覆写整体样式利用has-text-align-*、has-link-color等工具类做定向调整在主题的theme.json中配置core/post-date的排版、颜色、间距等默认样式。实践场景与使用建议查询循环内在 Query Loop 模板块中插入日期块它会自动使用postId上下文渲染每篇文章的发布日期isLink打开后整篇可点击常用于博客卡片列表单篇模板在单篇文章模板中配合标题块展示发布时间修改日期变体适合教程、文档类站点告诉读者内容最后更新时间人性化时间设置format: human-diff可获得3 days ago式相对时间适合资讯流场景注意 PHP 侧会用human_time_diff兜底未来时刻显示from now主题定制通过.wp-block-post-date类与块级 Supports 的组合即可完成绝大多数视觉定制无需编写自定义渲染回调。总结core/post-date是理解动态块 Block Bindings 变体 弃用迁移完整范式的绝佳样本block.json声明属性与能力index.php的render_block_core_post_date()完成服务端渲染与旧版兼容edit.jsx提供所见即所得的编辑器体验variations.js以绑定方式派生发布/修改日期两个变体deprecated.js保证历史内容平滑升级而 phpunit/blocks/render-block-core-post-date.php 与 test/edit.jsdom.test.js 从 PHP 与前端两侧锁定了行为。掌握这条链路后你不仅能熟练使用该块也能为其在主题与站点编辑中的扩展打下坚实基础。【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 WordPress 块编辑器 core/post-date 块深度解析：属性、动态渲染与发布/修改日期变体全指南
WordPress 块编辑器 core/post-date 块深度解析属性、动态渲染与发布/修改日期变体全指南【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg本篇技术指南以 Gutenberg 开源仓库中core/post-dateDate块为核心系统讲解该动态块的block.json属性与 Supports 配置、服务器端渲染逻辑、编辑器端交互界面、Publish Date 与 Modified Date 两个变体以及向后兼容的弃用迁移机制。读完本文你将完整掌握如何在模板、查询循环Query Loop与主题开发中正确使用并深度定制该块同时理解其底层源码实现PHP 与 React 两侧。块概览一个服务端渲染的动态块core/post-date是 WordPress 块编辑器Gutenberg中用于展示自定义日期的主题类Category:theme核心块定义于 packages/block-library/src/post-date/block.json。根据其自动生成的 API 文档packages/block-library/src/post-date/README.md它的关键元信息如下元信息项值块名Namecore/post-date分类CategorythemeAPI 版本API Version3块类型Block Type动态块Dynamic / server-rendered文本域textdomaindefault示例视口宽度example.viewportWidth350block.json中同时给出了块标题Date与描述Display a custom date.。作为动态块它不把 HTML 存进文章内容而是在服务端按需渲染详见下文动态块与 Block Markup一节这也是它在查询循环、归档页中能随每篇文章动态变化的原因。Attributesdatetime / format / isLink 三个核心属性块的属性Attributes通过block.json的attributes属性声明作用是定义可被编辑并持久化的数据字段。core/post-date共声明了三个属性属性类型默认值说明datetimestring—要显示的日期时间值Role 为contentformatstring—日期显示格式PHP 日期格式字符串或特殊值human-diffisLinkbooleanfalse是否为日期添加指向文章本身的链接Role 为content对应源码packages/block-library/src/post-date/block.jsonattributes: { datetime: { type: string, role: content }, format: { type: string }, isLink: { type: boolean, default: false, role: content } }三个属性的实际含义datetime标记为role: content的属性是块的内容核心会直接出现在文章内容的块注释参数中。它既可以是显式写入的一个日期字符串也可以通过 Block Bindings块绑定绑定到core/post-data数据源见下文变体与服务器端渲染两节。format控制日期最终如何呈现。除 PHP 日期格式如Y-m-d、F j, Y外还支持特殊值human-diff人性化相对时间如2 hours ago。为空时使用站点常规设置中的日期格式。isLinkfalse时日期只是纯文本timetrue时日期会被包裹在指向该文章永久链接permalink的a标签内。Supports块支持的面板能力supports声明块可被哪些区块设置能力接管。core/post-date的 Supports 配置见 block.json 与 README 的 Supports 一节整理如下支持项值说明anchortrue允许设置 HTML 锚点idhtmlfalse不允许直接编辑 HTML符合动态块定位color.gradientstrue支持渐变背景color.linktrue支持链接颜色spacing.margintrue支持外边距spacing.paddingtrue支持内边距typography.fontSizetrue支持字号typography.lineHeighttrue支持行高typography.textAligntrue支持文本对齐interactivity.clientNavigationtrue支持客户端导航站点编辑中的无刷新跳转除 README 中列出的项外block.json还声明了若干实验性能力排版方面有__experimentalFontFamily字体族、__experimentalFontWeight字重、__experimentalFontStyle字体风格、__experimentalTextTransform大小写变换、__experimentalTextDecoration文字装饰、__experimentalLetterSpacing字间距边框方面有__experimentalBorder的radius/color/width/style四项。同时通过__experimentalDefaultControls指定默认开启的控件颜色默认开背景、文本、链接排版默认开字号边框默认全开。这些默认控件的意义在于当主题或全局样式没有显式配置时编辑器的默认控件会以合理的最小集自动呈现避免侧栏过载。Context依赖的文章上下文数据usesContext声明该块运行所需的外部上下文README Context 一节postId当前文章 ID —— 决定日期取哪篇文章、链接指向哪里postType当前文章类型 —— 编辑器用它加载文章类型标签如文章/页面来动态生成Link to %s文案queryId所属查询循环Query Loop的 ID —— 用于判断块是否位于查询循环内部编辑器中isDescendentOfQueryLoop Number.isFinite( queryId )见 edit.jsx。块本身不通过providesContext向外提供上下文。这意味着它必须处于能获取上述上下文的父级结构中最典型的是查询循环、文章模板或单篇模板才能正确渲染脱离上下文时编辑器中会以当前日期作为兜底预览值。动态块与 Block Markup因为它是动态块文章内容里只保存一段块注释Block Comment真正的 HTML 由服务端渲染输出README 的 Block Markup 一节!-- wp:post-date /--带属性时的完整形态类似!-- wp:post-date {format:human-diff,isLink:true} /--保存时save()返回null见 deprecated.js 中save() { return null; }的历史形态当前版本编辑设置见 index.js即不保存任何 HTML这是所有动态块的共同特征也是html: false的直接原因。服务器端渲染原理render_block_core_post_date 逐行拆解服务端渲染回调定义在 packages/block-library/src/post-date/index.php通过register_block_type_from_metadata( __DIR__ . /post-date, array( render_callback render_block_core_post_date ) )注册第 98-105 行并在init钩子上调用。函数签名接收$attributes、$content与$blockWP_Block实例返回包裹在time标签中的文章日期。1. 旧版legacy兼容分支当既没有datetime属性、也没有针对datetime的 Block Bindings 配置时第 22-43 行函数判定这是没有datetime属性的旧版块转而从块绑定源core/post-data取值$source get_block_bindings_source( core/post-data ); if ( isset( $attributes[displayType] ) modified $attributes[displayType] ) { $source_args array( field modified ); } else { $source_args array( field date ); } $attributes[datetime] $source-get_value( $source_args, $block, datetime );这里field可以是date发布日期或modified修改日期对应 PHP 侧get_the_date()/get_the_modified_date()。旧版displayType: modified还会被加上wp-block-post-date__modified-date类第 45-47 行。2. 空值处理如果datetime为空第 49-57 行函数直接返回空字符串。注释指出当块绑定到最后修改日期且该日期早于发布日期时会出现此情况——此时必须尊重并返回空值该逻辑源自 WordPress/gutenberg#46839 的讨论。3. 日期格式化若format human-diff第 62-69 行使用human_time_diff()生成相对时间并根据时间戳是否晚于当前时刻分别拼接__(%s from now)或__(%s ago)文案否则第 70-73 行format为空时回退到站点选项get_option( date_format )最终用wp_date( $format, $post_timestamp )输出天然支持时区与多语言本地化。4. 类名与包装结构有textAlign时追加has-text-align-{值}第 75-77 行设置了链接文字颜色时追加has-link-color第 78-80 行用get_block_wrapper_attributes()统一生成包裹属性第 82 行这是主题可控类的关键入口核心输出第 84-88 行日期放在语义化time datetimeISO 格式标签中datetime属性值经esc_attr、显示文本经esc_html转义若isLink为真且存在postId上下文再整体包一层指向get_the_permalink( $block-context[postId] )的aURL 经esc_url转义。最终结构div classwp-block-post-date ... a href文章永久链接 time datetime2026-09-16T06:00:00September 16, 2026/time /a /div5. 相关单元测试印证仓库提供了专门的 PHP 单测 phpunit/blocks/render-block-core-post-date.php 来验证上述行为test_render_with_explicit_date_attribute显式datetime属性会被原样包含在输出中第 34-53 行test_render_with_date_attribute_bindingBlock Bindings 中的date/modified字段分别与get_the_date/get_the_modified_date结果一致且绑定值会覆盖显式回退值第 55-105 行test_render_legacy_block无datetime的旧版块按displayType回退到date/modified第 110-131 行test_render_modified_date_before_publish_date修改日期早于发布日期时输出空字符串第 133-159 行。这些测试直接印证了前文所述的 legacy 分支、绑定覆盖与空值策略。编辑器端体验工具栏与侧栏的完整交互编辑器侧的实现位于 packages/block-library/src/post-date/edit.jsx核心组件PostDateEdit提供了首次挂载默认值datetime未定义时用__unstableMarkNextChangeAsNotPersistent()标记一次不持久化的变更并写入当前日期第 60-65 行目的是把新版块与默认取文章发布日期的旧版块区分开工具栏修改日期非查询循环或默认编辑模式下显示BlockControls工具栏铅笔图标按钮wordpress/icons的pencil标题Change Date弹出__experimentalPublishDateTimePicker日期时间选择器支持 12/24 小时制判定依据站点时间格式与dmy/mdy/ymd日期顺序本地化第 119-173 行侧栏设置ToolsPanelInspectorControls内是ToolsPanel第 175-234 行含两个默认显示的面板项Date Format日期格式__experimentalDateFormatPicker默认格式取站点设置date_format第 187-202 行Link to %s链接到文章ToggleControl开关标签会利用postType.labels.singular_name动态生成例如文章类型为文章时显示链接到文章第 203-232 行12 小时制判定函数is12HourFormat()第 241-247 行通过正则/(?:^|[^\\])[aAgh]/检测格式串中是否存在未转义的 12 小时制字符a、A、g、h。对应的 test/edit.jsdom.test.js 用参数化用例覆盖了H:ifalse、g:i Atrue、\g\r\e\a\t转义字符false等边界情况。编辑器预览同样遵循human-diff用humanTimeDiff()、其余用dateI18n()的双分支逻辑第 96-105 行与 PHP 侧渲染保持一致。变体Post Date 与 Modified Datepackages/block-library/src/post-date/variations.js 定义了该块的两个区块变体均基于 Block Bindings 的core/post-data源变体名标题描述绑定字段附加类post-datePost Date展示文章的发布日期field: date—post-date-modifiedModified Date展示文章的最后更新日期field: modifiedwp-block-post-date__modified-date变体的attributes通过metadata.bindings.datetime挂接数据源isActive判定依据是绑定源与args.field的取值第 19-24、41-45 行。scope为[inserter, transform]即既可从插入器Inserter单独插入也可在块间转换。编辑器侧还会根据当前激活变体决定工具栏标题是Publish Date还是Dateedit.jsx并且在 Modified Date 变体激活时隐藏修改日期按钮第 119-121 行。两个变体在区块插入器界面表现为两个独立条目文章日期Post Date与修改日期Modified Date方便作者直接插入最后更新日期而无需手动绑定。向后兼容与弃用迁移机制core/post-date在历次迭代中积累了大量历史形态packages/block-library/src/post-date/deprecated.js 按[v4, v3, v2, v1]顺序登记了 4 个旧版本新版本排最前以获得更高匹配优先级v4已含datetime属性仅迁移历史textAlignmigrate: migrateTextAlignv3迁移块绑定参数名key→field第 147-174 行这是core/post-data源参数统一为field的兼容步骤v2面向既无datetime也无绑定的旧块将displayTypedate/modified转换为metadata.bindings.datetime结构modified同时追加wp-block-post-date__modified-date类第 249-272 行v1最早的仅textAlign/format/isLink版本迁移字体族与文本对齐第 314-316 行。这套机制保证了历史文章中的旧注释在块解析时能被逐级识别并升级到当前结构对动态块尤为重要——旧内容里的!-- wp:post-date {displayType:modified} /--也能在新版本中正确渲染为修改日期。样式与主题集成要点样式文件 packages/block-library/src/post-date/style.scss 非常克制仅一行核心规则.wp-block-post-date { // This block has customizable padding, border-box makes that more predictable. box-sizing: border-box; }由于块支持自定义内边距显式声明box-sizing: border-box使 padding 计算更可预期。其余视觉样式字号、颜色、行高、对齐、边框、链接色等全部交由块级 Supports 对应的生成类与全局样式接管主题开发者可以通过以下途径定制使用.wp-block-post-date选择器覆写整体样式利用has-text-align-*、has-link-color等工具类做定向调整在主题的theme.json中配置core/post-date的排版、颜色、间距等默认样式。实践场景与使用建议查询循环内在 Query Loop 模板块中插入日期块它会自动使用postId上下文渲染每篇文章的发布日期isLink打开后整篇可点击常用于博客卡片列表单篇模板在单篇文章模板中配合标题块展示发布时间修改日期变体适合教程、文档类站点告诉读者内容最后更新时间人性化时间设置format: human-diff可获得3 days ago式相对时间适合资讯流场景注意 PHP 侧会用human_time_diff兜底未来时刻显示from now主题定制通过.wp-block-post-date类与块级 Supports 的组合即可完成绝大多数视觉定制无需编写自定义渲染回调。总结core/post-date是理解动态块 Block Bindings 变体 弃用迁移完整范式的绝佳样本block.json声明属性与能力index.php的render_block_core_post_date()完成服务端渲染与旧版兼容edit.jsx提供所见即所得的编辑器体验variations.js以绑定方式派生发布/修改日期两个变体deprecated.js保证历史内容平滑升级而 phpunit/blocks/render-block-core-post-date.php 与 test/edit.jsdom.test.js 从 PHP 与前端两侧锁定了行为。掌握这条链路后你不仅能熟练使用该块也能为其在主题与站点编辑中的扩展打下坚实基础。【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考