💡 云策文档标注

概述

theme.json 中的 settings.border 属性用于全局控制 WordPress 区块的边框设置,允许配置用户界面中的可用选项而非直接定义样式。

关键要点

  • settings.border 属性映射到区块级别和样式界面的控件,用于定制主题用户可用的边框功能。
  • 支持四个布尔值设置:color(边框颜色选择器)、radius(边框半径控件)、style(边框样式选择器,支持 solid、dashed、dotted)、width(边框宽度输入)。
  • 默认所有边框属性设置为 false,需在 theme.json 中显式启用。
  • 从 WordPress 6.3 起,color、style 和 width 相互关联,任一设为 true 时,其他选项在界面中自动可用。
  • radius 设置为 false 对 Button 块无效,编辑器中的 border-radius 控件始终显示。

代码示例

{
	"version": 2,
	"settings": {
		"border": {
			"color": false,
			"radius": false,
			"style": false,
			"width": false
		}
	}
}

📄 原文内容

The settings.border property in theme.json gives you control over the global border settings for blocks in WordPress. It’s important to note that this lets you configure the available settings in the user interface, not the border styles themselves.

Each of the border settings maps to a control at the individual block level and in the Styles interface for blocks, letting you curate which controls are available to your theme users:

WordPress post editor showing a Post Featured Image block with custom border settings.

Border settings

WordPress supports four border settings that you can configure via the settings.border property in theme.json. Each of them allows you to enable or disable a specific border feature and accepts a boolean (true or false) value:

  • color: Enables/Disables the border-color picker.
  • radius: Enables/Disables the border-radius control.
  • style: Enables/Disables the border-style selector (users have the option of solid, dashed, or dotted).
  • <strong>width</strong>: Enables/Disables the border-width input.

By default, all border properties are set to false, as shown in this example theme.json code:

{
	"version": 2,
	"settings": {
		"border": {
			"color": false,
			"radius": false,
			"style": false,
			"width": false
		}
	}
}

As of WordPress 6.3, color, style, and width are intertwined. If any one of them is set to true, the others will be available as options within the user interface.

Also, setting the radius option to false does not work for the Button block. The border-radius control in the editor always appears.