构建自定义区块通常意味着向区块检查器侧边栏添加控件。这可以通过 <InspectorControls> 组件实现，在 WordPress 6.2 发布之前，所有设置都集中在一个地方。

WordPress 6.2 为区块检查器引入了选项卡。现在，控制设置的项和管理样式的项分别位于不同的选项卡下，因此您可以更清楚地看到正在处理的内容。

如您所见，现在您有更多地方可以放置自定义控件。如何定位它们呢？

可用位置

流程没有改变；您仍然使用 <InspectorControls> 组件。但在 6.2 中，新的 group 属性允许您指定控件出现的位置。

group 接受这些预定义的位置，每个位置对应一个特定区域：

• settings (默认)
• styles
• color
• typography
• dimensions
• border
• advanced

设置和样式面板

settings 和 styles 选项分别对应“设置”和“样式”面板，并将项目添加到每个面板的底部。如果 <InspectorControls> 缺少 group 属性（或其值设置为 settings），控件将进入“设置”部分。

例如，此代码向“设置”选项卡添加了一个自定义控件。

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody } from '@wordpress/components';

/**
 * Internal dependencies
 */
import './editor.scss';

/**
 * Edit Component
 */
export default function Edit() {
	return (
		<div { ...useBlockProps() }>
			{ __(
				'Inspector Control Groups Block',
				'inspector-control-groups'
			) }
			<InspectorControls>
				<PanelBody
					title={ __(
						'Custom Block Controls',
						'inspector-control-groups'
					) }
				>
					{ __(
						'Custom block controls added using the InspectorControls component',
						'inspector-control-groups'
					) }
				</PanelBody>
			</InspectorControls>
		</div>
	);
}

如果您希望此控件出现在“样式”选项卡中，可以添加 group 属性并将其设置为 styles。

export default function Edit() {
	return (
		<div { ...useBlockProps() }>
			{ __(
				'Inspector Control Groups Block',
				'inspector-control-groups'
			) }
			<InspectorControls group="styles">
				<PanelBody
					title={ __(
						'Custom Block Controls',
						'inspector-control-groups'
					) }
				>
					{ __(
						'Custom block controls added using the InspectorControls component',
						'inspector-control-groups'
					) }
				</PanelBody>
			</InspectorControls>
		</div>
	);
}

您可能会注意到“设置”选项卡消失了。这是因为您的控件不再定位到设置部分，并且没有其他控件会显示在那里。如果您添加另一个没有 group 属性（或将其设置为 settings）的 <InspectorControls> 组件，“设置”选项卡就会出现。

样式面板内部

定位“样式”选项卡的每个内部面板非常简单。通过将 color、typography、dimensions 或 border 之一传递给 group 属性即可实现。

export default function Edit() {
	return (
		<div { ...useBlockProps() }>
			{ __(
				'Inspector Control Groups Block',
				'inspector-control-groups'
			) }
			<InspectorControls group="color">
				<div className="full-width-control-wrapper">
					{ __(
						"I'm in the colors group!",
						'inspector-control-groups'
					) }
				</div>
			</InspectorControls>
			<InspectorControls group="typography">
				<div className="full-width-control-wrapper">
					{ __(
						"I'm in the typography group!",
						'inspector-control-groups'
					) }
				</div>
			</InspectorControls>
			<InspectorControls group="dimensions">
				<div className="full-width-control-wrapper">
					{ __(
						"I'm in the dimensions group!",
						'inspector-control-groups'
					) }
				</div>
			</InspectorControls>
			<InspectorControls group="border">
				<div className="full-width-control-wrapper">
					{ __(
						"I'm in the border group!",
						'inspector-control-groups'
					) }
				</div>
			</InspectorControls>
		</div>
	);
}

这里需要注意一点：这些区域中的项目使用 CSS Grid。要使您的组件占据整个宽度，您需要在区块样式表中为包装元素添加一些 CSS。

.full-width-control-wrapper {
	grid-column: 1 / -1;
}

高级区域

您可以通过将 group 设置为 advanced 或使用 <InspectorAdvancedControls> 组件将项目插入“高级”区域。

export default function Edit() {
	return (
		<div { ...useBlockProps() }>
			{ __(
				'Inspector Control Groups Block',
				'inspector-control-groups'
			) }
			<InspectorAdvancedControls>
				{ __(
					"I'm in the advanced group!",
					'inspector-control-groups'
				) }
			</InspectorAdvancedControls>

			<InspectorControls group="advanced">
				{ __(
					"I'm in the advanced group!",
					'inspector-control-groups'
				) }
			</InspectorControls>
		</div>
	);
}

本文仅触及了表面——设计上力求简洁。但有了这个新功能，您将对区块 UI 拥有更多的控制权。随着您的探索，无疑会发现更多构建简单直观 UI 的方法。