云策 WordPress 开发者社区

块编辑器开发文档

Heading

查看官方原文 ↗
💡 云策文档标注

概述

Heading 是一个实验性的 WordPress 组件，用于渲染标题和标题文本，基于库的排版系统实现。它允许开发者通过指定 level 属性来控制标题的语义级别和样式大小。

关键要点

  • Heading 组件目前处于实验阶段，意味着其实现可能发生重大或破坏性变更。
  • 它基于 Text 组件构建，继承了 Text 的大部分属性，但替换了 size 属性为 level，并默认 isBlock 为 true。
  • level 属性接受 1 到 6 的数字或字符串值，用于定义标题的语义元素（如 h1 对应 level 1）和排版大小。

代码示例

import { __experimentalHeading as Heading } from '@wordpress/components';

function Example() {
    return <Heading>Code is Poetry</Heading>;
}

注意事项

  • 由于是实验性功能，开发者在使用时需注意潜在的兼容性和稳定性问题。
  • level 属性是可选的，默认值为 2，开发者应根据需要调整以匹配设计规范。
📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

Heading renders headings and titles using the library’s typography system.

Usage

import { __experimentalHeading as Heading } from '@wordpress/components';

function Example() {
    return <Heading>Code is Poetry</Heading>;
}

Props

Heading uses Text underneath, so we have access to all of Text‘s props except for:

  • size which is replaced by level;
  • isBlock‘s default value, which is true for the Heading component.

For a complete list of those props, check out Text.

level: 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'

Passing any of the heading levels to level will both render the correct typographic text size as well as the semantic element corresponding to the level (h1 for 1 for example).

  • Required: No
  • Default: 2