Block Supports 是允许块声明支持某些功能的 API。
启用这些功能中的任何一项都会在块上注册额外的属性,并提供用于操作该属性的用户界面。
为了使属性能够应用于块,生成的属性会被添加到块的包装元素中。它们被添加到从 useBlockProps 钩子返回的对象中。
BlockEdit 函数:
function BlockEdit() {
const blockProps = useBlockProps();
return <div { ...blockProps }>Hello World!</div>;
}
save 函数:
function BlockEdit() {
const blockProps = useBlockProps.save();
return <div { ...blockProps }>Hello World!</div>;
}
对于通过 PHP 中的 render_callback 渲染的动态块,您可以使用 get_block_wrapper_attributes() 函数。它返回一个包含所有生成属性的字符串,需要在包装块元素的起始标签中输出。
render_callback 函数:
function render_block() {
$wrapper_attributes = get_block_wrapper_attributes();
return sprintf(
'<div %1$s>%2$s</div>',
$wrapper_attributes,
'Hello World!'
);
}
allowedBlocks
注意:自 WordPress 6.9 起。
- 类型:
boolean - 默认值:
false
此属性添加了用户界面控件,使用户能够选择块容器的允许子块。要使用此功能,请将 attributes.allowedBlocks 作为 useInnerBlocksProps 选项对象中的 allowedBlocks 属性传递。
supports: {
allowedBlocks: true
}
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
function Edit( { attributes } ) {
const { allowedBlocks } = attributes;
const blockProps = useBlockProps();
const innerBlocksProps = useInnerBlocksProps( blockProps, {
allowedBlocks
} );
return <div { ...innerBlocksProps } />;
}
anchor
- 类型:
boolean - 默认值:
false
锚点允许您直接链接到页面上的特定块。此属性添加了一个字段来定义块的 ID,并添加一个按钮以复制直接链接。
// 声明对锚点链接的支持。
supports: {
anchor: true
}
autoRegister
- 类型:
boolean - 默认值:
false
启用 仅 PHP 块 自动出现在块编辑器中,而无需 JavaScript 注册。当设置为 true 时,在服务器上通过 render_callback 注册的块将自动在编辑器中注册并使用 ServerSideRender。这些块的默认版本为块 API 3,如果它们使用旧版本,则会自动升级。
register_block_type( 'my-plugin/server-block', array(
'render_callback' => function( $attributes ) {
$wrapper_attributes = get_block_wrapper_attributes();
return sprintf(
'<div %1$s>Server content</div>',
$wrapper_attributes
);
},
'supports' => array(
'autoRegister' => true,
),
) );
align
- 类型:
boolean或array - 默认值:
false
此属性添加了块控件,使用户能够更改块的对齐方式。
supports: {
// 声明对块对齐的支持。
// 这添加了对所有选项的支持:
// left, center, right, wide, and full.
align: true
}
supports: {
// 声明对特定对齐选项的支持。
align: [ 'left', 'right', 'full' ]
}
当块声明支持 align 时,属性定义将扩展以包含一个类型为 string 的 align 属性。默认情况下,不分配任何对齐方式。块可以通过指定具有默认值的自己的 align 属性来应用默认对齐方式。例如:
attributes: {
align: {
type: 'string',
default: 'right'
}
}
alignWide
- 类型:
boolean - 默认值:
true
此属性允许为您的主题启用 宽对齐。若要为单个块禁用此行为,请将此标志设置为 false。
supports: {
// 移除对宽对齐的支持。
alignWide: false
}
ariaLabel
- 类型:
boolean - 默认值:
false
ARIA 标签允许您为元素定义可访问的标签。此属性允许启用块的 aria-label 定义,而无需暴露用户界面字段。
supports: {
// 添加对 aria 标签的支持。
ariaLabel: true
}
background
注意:自 WordPress 6.5 起。
- 类型:
Object - 默认值:
null - 子属性
backgroundImage:类型boolean,默认值falsebackgroundSize:类型boolean,默认值false
此值表示块支持某些与背景相关的 CSS 样式属性。当如此时,如果 主题声明支持,块编辑器将显示用户设置其值的用户界面控件。
backgroundImage 添加用户界面控件,允许用户选择背景图像。backgroundSize 添加焦点点选择器以选择背景图像的位置,并允许用户选择背景大小(覆盖、包含、固定)。
supports: {
background: {
backgroundImage: true // 启用背景图像控件。
backgroundSize: true // 启用背景图像 + 大小控件。
}
}
当块声明支持特定背景属性时,其属性定义将扩展以包含 style 属性。
当选择背景图像时,图像数据存储在 style.background.backgroundImage 中。
当选择背景图像并更改其位置或大小时,背景位置存储在 style.background.backgroundPosition 中,其背景大小存储在 style.background.backgroundSize 属性中。
style:一个类型为object的属性,未分配默认值。这是在声明backgroundImage或backgroundSize支持时添加的。它存储用户设置的自定义值。background:一个类型为object的属性。backgroundImage:一个类型为object的属性,包含所选图像的信息url:类型string,图像的 URLid:类型int,媒体附件 IDsource:类型string,目前唯一的值是filetitle:类型string,媒体附件的标题
backgroundPosition:一个类型为string的属性,定义背景图像的位置,由焦点点选择器选择并在 CSS 中用作background-position值。backgroundSize:一个类型为string的属性,定义 CSSbackground-size值。
块可以通过指定具有默认值的自己的属性来应用默认背景图像、位置和大小。例如:
attributes: {
style: {
background: {
backgroundImage: {
"url":"IMAGE_URL"
}
backgroundPosition:"50% 50%",
backgroundSize: "cover"
}
}
}
className
- 类型:
boolean - 默认值:
true
默认情况下,类 .wp-block-your-block-name 会添加到您保存的标记的根元素中。这有助于为块提供一致的样式机制,主题和插件可以依赖此机制。如果出于某种原因不希望标记上有类,则可以禁用此功能。
supports: {
// 移除对生成的 className 的支持。
className: false
}
color
- 类型:
Object - 默认值:null
- 子属性:
background:类型boolean,默认值truebutton: 类型boolean,默认值falseenableContrastChecker: 类型boolean,默认值truegradients: 类型boolean,默认值falseheading: 类型boolean,默认值falselink: 类型boolean,默认值falsetext: 类型boolean,默认值true
此值表示该块支持某些与颜色相关的属性。当存在此值时,区块编辑器将向用户显示 UI 控件以设置其值。
请注意,
background和text键的默认值为true,因此如果存在color属性,它们也将被视为已启用:supports: { color: { // 这也启用了文本和背景 UI 控件。 gradients: true // 启用渐变 UI 控件。 } }可以单独禁用它们:
supports: { color: { // 启用文本 UI 控件。 background: false, // 禁用背景 UI 控件。 gradients: true // 启用渐变 UI 控件。 } }color.background
此属性添加 UI 控件,允许用户为块应用纯色背景。
当声明颜色支持时,此属性默认启用(连同文本),因此只需设置 color 即可启用背景颜色。
supports: { color: true // 启用背景和文本颜色支持。 }若要禁用背景支持但保留其他颜色支持,设置为
false。supports: { color: { // 禁用背景支持。文本颜色支持仍然启用。 background: false } }当块声明支持
color.background时,属性定义扩展以包含两个新属性:backgroundColor和style:backgroundColor:类型为string的属性,未分配默认值。当用户从预设背景颜色列表中选择时,预设 slug 存储在
backgroundColor属性中。背景颜色预设源自
editor-color-palette主题支持。块可以通过指定具有默认值的自有属性来应用默认预设背景颜色。例如:
attributes: { backgroundColor: { type: 'string', default: 'some-preset-background-slug', } }style:类型为object的属性,未分配默认值。当选择自定义背景颜色时(即使用自定义颜色选择器),自定义颜色值存储在
style.color.background属性中。块可以通过指定具有默认值的自有属性来应用默认自定义背景颜色。例如:
attributes: { style: { type: 'object', default: { color: { background: '#aabbcc', } } } }
color.button
注意:自 WordPress 6.5 起。
此属性添加块控件,允许用户设置块中的按钮颜色(文本、背景)。按钮颜色默认禁用。
要启用按钮颜色支持,将
color.button设置为true。supports: { color: { button: true } }按钮颜色预设源自
editor-color-palette主题支持。当块声明支持
color.button时,属性定义扩展以包含style属性:style:类型为object的属性,未分配默认值。当选择按钮颜色时,颜色值存储在
style.elements.button.color.text和style.elements.button.color.background属性中。块可以通过指定具有默认值的自有属性来应用默认按钮颜色。例如:
attributes: { style: { type: 'object', default: { elements: { button: { color: { text: 'var:preset|color|contrast', background: '#000000', } } } } } }
color.enableContrastChecker
注意:自 WordPress 6.5 起。
确定对比度检查器小部件是否在区块编辑器 UI 中显示。
对比度检查器仅在块声明支持颜色时出现。它测试颜色组合的可读性,并在存在潜在问题时发出警告。此属性默认启用。设置为
false以显式禁用:supports: { color: { enableContrastChecker: false } }color.__experimentalDuotone
注意:自 WordPress 6.3 起已弃用。
此属性已被
filter.duotone取代。color.gradients
此属性添加 UI 控件,允许用户为块应用渐变背景。
supports: { color: { gradients: true, // 如果您不想与渐变一起使用它们,则必须禁用默认值。 background: false, text: false } }渐变预设源自
editor-gradient-presets主题支持。当块声明支持
color.gradient时,属性定义扩展以包含两个新属性:gradient和style:gradient:类型为string的属性,未分配默认值。当用户从预设渐变列表中选择时,预设 slug 存储在
gradient属性中。块可以通过指定具有默认值的自有属性来应用默认预设渐变。例如:
attributes: { gradient: { type: 'string', default: 'some-preset-gradient-slug', } }style:类型为object的属性,未分配默认值。当选择自定义渐变时(即使用自定义渐变选择器),自定义渐变值存储在
style.color.gradient属性中。块可以通过指定具有默认值的自有属性来应用默认自定义渐变。例如:
attributes: { style: { type: 'object', default: { color: { gradient: 'linear-gradient(135deg,rgb(170,187,204) 0%,rgb(17,34,51) 100%)', } } } }
color.heading
注意:自 WordPress 6.5 起。
此属性添加块控件,允许用户设置块中的标题颜色。标题颜色默认禁用。
要启用标题颜色支持,将
color.heading设置为true。supports: { color: { // 启用标题颜色支持。 heading: true } }标题颜色预设源自
editor-color-palette主题支持。当块声明支持
color.heading时,属性定义扩展以包含style属性:style:类型为object的属性,未分配默认值。当选择标题颜色时,颜色值存储在
style.elements.heading.color.text和style.elements.heading.color.background属性中。块可以通过指定具有默认值的自有属性来应用默认标题颜色。例如:
attributes: { style: { type: 'object', default: { elements: { heading: { color: { text: 'var:preset|color|contrast', background: '#000000', } } } } } }
color.link
此属性添加块控件,允许用户设置块中的链接颜色。链接颜色默认禁用。
要启用链接颜色支持,将
color.link设置为true。supports: { color: { link: true } }链接颜色预设源自
editor-color-palette主题支持。当区块声明支持
color.link时,属性定义会扩展以包含style属性:style:一个object类型的属性,未分配默认值。当选择链接颜色时,颜色值存储在
style.elements.link.color.text和style.elements.link.:hover.color.text属性中。区块可以通过指定具有默认值的自身属性来应用默认的链接颜色。例如:
attributes: { style: { type: 'object', default: { elements: { link: { color: { text: 'var:preset|color|contrast', }, ":hover": { color: { text: "#000000" } } } } } } }
color.text
此属性添加区块控件,允许用户设置区块中的文本颜色。
当声明颜色支持时,默认启用此属性(连同背景色),因此只需设置颜色即可启用文本颜色。
supports: { color: true // 启用背景和文本,但不启用链接。 }若要禁用文本颜色支持但保留其他颜色支持,将
color.text设置为false。supports: { color: { // 禁用文本颜色支持。 text: false } }文本颜色预设源自
editor-color-palette主题支持。当区块声明支持
color.text时,属性定义会扩展以包含两个新属性:textColor和style:textColor:一个string类型的属性,未分配默认值。当用户从预设文本颜色列表中选择时,预设标识符存储在
textColor属性中。区块可以通过指定具有默认值的自身属性来应用默认的预设文本颜色。例如:
attributes: { textColor: { type: 'string', default: 'some-preset-text-color-slug', } }style:一个object类型的属性,未分配默认值。当选择自定义文本颜色(即使用自定义颜色选择器)时,自定义颜色值存储在
style.color.text属性中。区块可以通过指定具有默认值的自身属性来应用默认的自定义文本颜色。例如:
attributes: { style: { type: 'object', default: { color: { text: '#aabbcc', } } } }
contentRole
注意: 自 WordPress 6.9 起。
- 类型:
boolean - 默认值:
false
将区块本身标记为内容。它主要用于未声明
content属性,或其内容仅通过其内部区块表达的区块。启用后,仅内容的编辑模式仍可编辑这些区块,并允许添加或删除内部区块。supports: { contentRole: true }customClassName
- 类型:
boolean - 默认值:
true
此属性添加一个字段,用于定义区块包装器的自定义 className。
supports: { // 移除对自定义 className 的支持。 customClassName: false }dimensions
注意: 自 WordPress 6.2 起。
- 类型:
Object - 默认值:null
- 子属性:
aspectRatio:类型boolean,默认值falseheight:类型boolean,默认值falseminHeight:类型boolean,默认值falseminWidth:类型boolean,默认值falsewidth:类型boolean,默认值false
此值表示区块支持某些与尺寸相关的 CSS 样式属性。当声明时,如果 主题声明支持,区块编辑器将显示 UI 控件供用户设置其值。
supports: { dimensions: { aspectRatio: true, // 启用宽高比控件。 height: true, // 启用高度控件。 minHeight: true, // 启用最小高度控件。 minWidth: true, // 启用最小宽度控件。 width: true, // 启用宽度控件。 } }当区块声明支持特定尺寸属性时,其属性定义会扩展以包含
style属性。style:一个object类型的属性,未分配默认值。这是在声明aspectRatio、height、minHeight、minWidth或width支持时添加的。它存储用户设置的自定义值。例如:
attributes: { style: { dimensions: { aspectRatio: "16/9", height: "40vh", minHeight: "50vh", minWidth: "200px", width: "400px", } } }editableRoot
- 类型:
boolean - 默认值:
false
当设置为
true时,区块声明其在祖先元素(编辑器画布)是contenteditable编辑主机、焦点和原生选择位于该处而不是在区块自身的可编辑元素上时仍能正常工作。编辑器使用此功能在选中此类区块时保持画布可编辑,从而启用跨区块的原生部分选择。依赖event.target或 DOM 焦点指向其自身元素的区块不应声明此支持。filter
- 类型:
Object - 默认值:null
- 子属性:
duotone:类型boolean,默认值false
此值表示区块支持某些与滤镜相关的属性。当声明时,区块编辑器将显示 UI 控件供用户设置其值。
filter.duotone
此属性添加 UI 控件,允许用户对区块或区块的一部分应用双色滤镜。
supports: { filter: { // 启用双色支持 duotone: true } }, selectors: { filter: { // 将滤镜应用于图像块内的 img 元素 duotone: '.wp-block-image img' } }可以通过设置
selectors.filter.duotone选择器将滤镜应用于区块内的元素。双色预设源自 theme.json 中的
color.duotone。当区块声明支持
filter.duotone时,属性定义会扩展以包含属性style:style:一个object类型的属性,未分配默认值。区块可以通过指定具有默认值的自身属性来应用默认的双色颜色。例如:
attributes: { style: { type: 'object', default: { color: { duotone: [ '#FFF', '#000' ] } } } }
html
- 类型:
boolean - 默认值:
true
默认情况下,区块的标记可以单独编辑。要禁用此行为,将
html设置为false。supports: { // 移除对 HTML 模式的支持。 html: false }inserter
- 类型:
boolean - 默认值:
true
默认情况下,所有区块都会出现在插入器、区块转换菜单、样式指南等中。要将区块从用户界面的所有部分隐藏,以便只能通过编程方式插入,将
inserter设置为false。supports: { // 将此区块从插入器中隐藏。 inserter: false }interactivity
- 类型:
boolean或object - 默认值:
false - 子属性:
clientNavigation:类型boolean,默认值falseinteractive:类型boolean,默认值false
指示区块是否使用交互性 API 功能。
clientNavigation子属性指示块是否与交互性 API 客户端导航兼容。有关详细信息,请参阅客户端导航兼容性指南。interactive子属性指示块是否使用交互性 API 指令。如果您将
supports.interactivity设置为true,则相当于同时将supports.interactivity.clientNavigation和supports.interactivity.interactive也设置为true。layout
- 类型:
boolean或Object - 默认值:null
- 子属性:
default:类型Object,默认值 nullallowSwitching:类型boolean,默认值falseallowEditing:类型boolean,默认值trueallowInheriting:类型boolean,默认值trueallowSizingOnChildren:类型boolean,默认值falseallowVerticalAlignment:类型boolean,默认值trueallowJustification:类型boolean,默认值trueallowOrientation:类型boolean,默认值trueallowWrap:类型boolean,默认值trueallowCustomContentAndWideSize:类型boolean,默认值true
此值仅适用于作为内部块容器的块。如果设置为
true,布局类型将为flow。对于其他布局类型,必须在default对象内显式设置type。请注意,为了使布局正常工作,其适用的块应具有类名作为选择器。该类名将拼接为布局类型字符串以形成布局选择器。
layout.default
- 类型:
Object - 默认值:null
允许设置
type属性以定义块的默认布局类型,以及该布局类型固有属性的默认值。例如,对于flex布局,可以为flexWrap设置默认值。layout.allowSwitching
- 类型:
boolean - 默认值:
false
暴露一个切换器控件,允许在所有现有布局类型之间进行切换。
layout.allowEditing
- 类型:
boolean - 默认值:
true
确定块侧边栏中布局控件的显示情况。如果设置为 false,将隐藏布局控件。
layout.allowInheriting
- 类型:
boolean - 默认值:
true
仅针对
flow布局类型,确定“内部块使用内容宽度”切换器的显示情况。layout.allowSizingOnChildren
- 类型:
boolean - 默认值:
false
仅针对
flex布局类型,确定 flex 块的所有子块的尺寸控件(适配/增长/最大宽度/固定)的显示情况。layout.allowVerticalAlignment
- 类型:
boolean - 默认值:
true
仅针对
flex布局类型,确定块工具栏中垂直对齐控件的显示情况。layout.allowJustification
- 类型:
boolean - 默认值:
true
针对
flex布局类型,确定块工具栏和块侧边栏中对齐控件的显示情况。针对constrained布局类型,确定块侧边栏中对齐控件的显示情况。layout.allowOrientation
- 类型:
boolean - 默认值:
true
仅针对
flex布局类型,确定块工具栏中方向控件的显示情况。layout.allowWrap
- 类型:
boolean - 默认值:
true
仅针对
flex布局类型,确定块侧边栏中“允许换行”切换器的显示情况。当设置为false时,换行行为由layout.default中的flexWrap值控制。layout.allowCustomContentAndWideSize
- 类型:
boolean - 默认值:
true
仅针对
constrained布局类型,确定块侧边栏中自定义内容和宽尺寸控件的显示情况。listView
注意:自 WordPress 7.0 起。
- 类型:
boolean - 默认值:
false
为块的内部块在块检查器中启用列表视图面板。
当启用此支持时,检查器将显示一个列表视图树,允许用户从侧边栏而不是仅使用全局文档列表视图来检查和管理工作块的内部块。
supports: { listView: true }listView支持仅影响编辑器 UI,不会为块添加任何属性。lock
- 类型:
boolean - 默认值:
true
块可能希望禁用切换锁定状态的能力。默认情况下,用户可以通过块“选项”下拉菜单对其进行锁定/解锁。要禁用此行为,请将
lock设置为false。supports: { // Remove support for locking UI. lock: false }multiple
- 类型:
boolean - 默认值:
true
非多重块可以插入到每个帖子中,且仅一次。例如,如果已编辑的帖子中已存在内置的“更多”块,则无法再次插入该块。非多重块的图标会自动变暗(不可点击)以防止出现多个实例。
supports: { // Use the block just once per post multiple: false }position
注意:自 WordPress 6.2 起。
- 类型:
Object - 默认值:null
- 子属性:
sticky:类型boolean,默认值false
此值表示块支持某些与位置相关的 CSS 样式属性。当支持时,如果主题声明了支持,块编辑器将显示 UI 控件供用户设置其值。
请注意,粘性位置控件目前仅适用于设置在文档根级别的块。将块设置为
sticky位置时,当用户滚动页面时,该块将粘附于其最直接的父级。supports: { position: { sticky: true // Enable selecting sticky position. } }当块声明支持特定位置属性时,其属性定义将扩展以包含
style属性。style:无默认值分配的object类型的属性。这是在声明sticky支持时添加的。它存储用户设置的自定义值。例如:
attributes: { style: { position: { type: "sticky", top: "0px" } } }renaming
注意:自 WordPress 6.5 起。
- 类型:
boolean - 默认值:
true
默认情况下,用户可以通过块“选项”下拉菜单或“高级”面板重命名块。要禁用此行为,请将 renaming 设置为 false。
supports: { // Don't allow the block to be renamed in the editor. renaming: false, }reusable
- 类型:
boolean - 默认值:
true
块可能希望禁用转换为可复用块的能力。默认情况下,所有块都可以转换为可复用块。如果 supports reusable 设置为 false,则不会显示将块转换为可复用块的选项。
supports: { // Don't allow the block to be converted into a reusable block. reusable: false, }shadow
注意:自 WordPress 6.5 起。
- 类型:
boolean - 默认值:
false
此属性添加块控件,允许用户为块设置框阴影。默认情况下禁用阴影。
supports: { shadow: true // Enable the box-shadow picker. }阴影预设源自
theme.json中定义的阴影预设。当块声明支持
shadow时,属性定义将扩展以包含style属性:style: 一个没有默认值的object类型属性。当选择阴影时,颜色值存储在
style.shadow中。块可以通过指定具有默认值的自身属性来应用默认阴影。例如:
attributes: { style: { type: 'object', default: { shadow: "var:preset|shadow|deep" } } }
spacing
- Type:
Object - Default value: null
- Subproperties:
margin: 类型boolean或array,默认值falsepadding: 类型boolean或array,默认值falseblockGap: 类型boolean或array,默认值false
此值表示块支持某些与间距相关的 CSS 样式属性。当支持时,如果主题声明了支持,区块编辑器将显示 UI 控件供用户设置其值。
supports: { spacing: { margin: true, // Enable margin UI control. padding: true, // Enable padding UI control. blockGap: true, // Enables block spacing UI control for blocks that also use `layout`. } }当块声明支持特定的间距属性时,其属性定义将扩展以包含
style属性。style: 一个没有默认值的object类型属性。这是在声明margin或padding支持时添加的。它存储用户设置的自定义值。例如:
attributes: { style: { margin: 'value', padding: { top: 'value', } } }间距属性可以定义允许侧面的数组——“top”、“right”、“bottom”、“left”——可以进行配置。当定义了此类任意侧面时,仅显示这些侧面的 UI 控件。
轴向侧面使用
vertical和horizontal术语定义,并为每个轴向对显示单个 UI 控件(例如,vertical同时控制顶部和底部侧面)。间距属性可以支持任意单独侧面 **或** 轴向侧面,但不能混合两者。注意:
blockGap接受vertical和horizontal轴向侧面,用于调整间隙列和行值。blockGap不支持任意侧面。supports: { spacing: { margin: [ 'top', 'bottom' ], // Enable margin for arbitrary sides. padding: true, // Enable padding for all sides. blockGap: [ 'horizontal', 'vertical' ], // Enables axial (column/row) block spacing controls } }typography
- Type:
Object - Default value:
null - Subproperties:
fontSize: 类型boolean,默认值falselineHeight: 类型boolean,默认值falsetextAlign: 类型boolean或array,默认值falsetextShadow: 类型boolean,默认值false
此对象的存在表示块支持某些与排版相关的属性。当支持时,区块编辑器将显示排版 UI,允许用户控制其值。
supports: { typography: { // Enable support and UI control for font-size. fontSize: true, // Enable support and UI control for line-height. lineHeight: true, // Enable support and UI control for text alignment. textAlign: true, }, }typography.fontSize
- Type:
boolean - Default value:
false
此值表示块支持字体大小 CSS 样式属性。当支持时,区块编辑器将显示 UI 控件供用户设置其值。
此控件中显示的值为通过
editor-font-sizes主题支持 声明的值,如果没有提供则使用默认值。supports: { typography: { // Enable support and UI control for font-size. fontSize: true, }, }当块声明支持
fontSize时,属性定义将扩展以包含两个新属性:fontSize和style:fontSize: 一个没有默认值的string类型属性。它存储用户选择的任何预设值。块可以通过指定具有默认值的自身fontSize属性来应用默认字体大小。例如:
attributes: { fontSize: { type: 'string', default: 'some-value', } }style: 一个没有默认值的object类型属性。它存储用户设置的自定义值,并与其他块支持(如颜色)共享。块可以通过指定具有默认值的自身style属性来应用默认样式。例如:
attributes: { style: { type: 'object', default: { typography: { fontSize: 'value' } } } }typography.lineHeight
- Type:
boolean - Default value:
false
此值表示块支持行高 CSS 样式属性。当支持时,如果主题声明了支持,区块编辑器将显示 UI 控件供用户设置其值。
supports: { typography: { // Enable support and UI control for line-height. lineHeight: true, }, }当块声明支持
lineHeight时,属性定义将扩展以包含一个新的没有默认值的object类型属性style。它存储用户设置的自定义值。块可以通过指定具有默认值的自身style属性来应用默认样式。例如:attributes: { style: { type: 'object', default: { typography: { lineHeight: 'value' } } } }typography.textAlign
注意:自 WordPress 6.6 起。
- Type:
boolean或array - Default value:
false
此属性添加块工具栏控件,允许更改块的文本对齐方式。
supports: { typography: { // Declare support for block's text alignment. // This adds support for all the options: // left, center, right. textAlign: true } }supports: { typography: { // Declare support for specific text alignment options. textAlign: [ 'left', 'right' ] } }当块声明支持
textAlign时,属性定义将扩展以包含一个新的没有默认值的object类型属性style。它存储用户设置的自定义值。块可以通过指定具有默认值的自身style属性来应用默认样式。例如:attributes: { style: { type: 'object', default: { typography: { textAlign: 'value' } } } }typography.textShadow
- Type:
boolean - Default value:
false
此值表示块支持文本阴影 CSS 样式属性。当支持时,如果主题声明了支持,区块编辑器将显示 UI 控件供用户设置其值。
supports: { typography: { // Enable support and UI control for text-shadow. textShadow: true, }, }当块声明支持
textShadow时,属性定义将扩展以包含两个新属性:textShadow和style:textShadow: 一个没有默认值的string类型属性。它存储用户选择的任何预设值。块可以通过指定具有默认值的自身textShadow属性来应用默认预设文本阴影。例如:
attributes: { textShadow: { type: 'string', default: 'some-value', } }style: 一个没有默认值的object类型属性。它存储用户设置的自定义值,并与其他块支持(如颜色)共享。块可以通过指定具有默认值的自身style属性来应用默认样式。例如:
attributes: { style: { type: 'object', default: { typography: { textShadow: 'value' } } } }splitting
当设置为
true时,Enter会将块拆分为两个块。请注意,此功能仅适用于简单的文本块,例如带有单个RichText字段的段落和标题。在edit函数中的 RichText 必须 拥有一个与文本属性键匹配的identifierprop,以便正确更新选择并知道在哪里拆分。visibility
注意:自 WordPress 6.9 起。
- Type:
boolean - 默认值:
true
默认情况下,用户可以从块的“选项”下拉菜单中隐藏块。要禁用此行为,请将 visibility 设置为 false。
supports: { visibility: false, }