此功能仍处于实验阶段。“Experimental”（实验性）意味着这是早期实现，可能会发生重大且破坏性的更改。
这些面板为其子项提供渐进式发现选项。例如通过块支持提供的控件。
开发指南
ToolsPanel 创建一个带有标题的容器，其中包括一个下拉菜单。该菜单是根据与 ToolsPanelItem 组件类型匹配的面板子项自动生成的。
每个菜单项允许开启或关闭相应子项的显示。触发控件的 onSelect 和 onDeselect 回调，从而对子项进行更精细的控制，例如当块支持控件被切换为关闭时重置块属性。
子控件是否最初显示取决于之前是否已设置值，或者子项是否通过 isShownByDefault 属性标记为默认显示。确定子项是否有值是通过子项的 props 中提供的 hasValue 函数完成的。
未包裹在 ToolsPanelItem 内的组件仍然会渲染，但它们不会出现在 ToolsPanel 菜单中，也不受其控制。这种机制的一个有益场景是在面板内显示介绍性或帮助文本。
ToolsPanel 布局
ToolsPanel 采用两列网格布局。默认情况下，面板内的 ToolsPanelItem 组件样式设置为跨越两列，因为这符合大多数用例。大多数非控制元素（如帮助文本）将作为相关控件的 ToolsPanelItem 的子项渲染，无需额外样式。
假设某个元素与多个控件相关（例如对比度检查器），或与面板本身相关（例如面板描述）。在这种情况下，它们将被渲染到面板中，而无需包裹 ToolsPanelItem。默认情况下，它们仅跨越单列。如果这不可取，这些元素可能需要进行小幅样式调整，例如 grid-column: 1 / -1;
下面的使用示例将说明一个非 ToolsPanelItem 的描述段落、应在单行中显示的控件以及跨越两列的其他控件。
用法
import styled from '@emotion/styled';
import {
BoxControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
__experimentalUnitControl as UnitControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const PanelDescription = styled.div`
grid-column: span 2;
`;
const SingleColumnItem = styled( ToolsPanelItem )`
grid-column: span 1;
`;
export function DimensionPanel() {
const [ height, setHeight ] = useState();
const [ width, setWidth ] = useState();
const [ padding, setPadding ] = useState();
const [ margin, setMargin ] = useState();
const resetAll = () => {
setHeight( undefined );
setWidth( undefined );
setPadding( undefined );
setMargin( undefined );
};
return (
<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
<PanelDescription>
Select dimensions or spacing related settings from the menu for
additional controls.
</PanelDescription>
<SingleColumnItem
hasValue={ () => !! height }
label={ __( 'Height' ) }
onDeselect={ () => setHeight( undefined ) }
isShownByDefault
>
<UnitControl
__next40pxDefaultSize
label={ __( 'Height' ) }
onChange={ setHeight }
value={ height }
/>
</SingleColumnItem>
<SingleColumnItem
hasValue={ () => !! width }
label={ __( 'Width' ) }
onDeselect={ () => setWidth( undefined ) }
isShownByDefault
>
<UnitControl
__next40pxDefaultSize
label={ __( 'Width' ) }
onChange={ setWidth }
value={ width }
/>
</SingleColumnItem>
<ToolsPanelItem
hasValue={ () => !! padding }
label={ __( 'Padding' ) }
onDeselect={ () => setPadding( undefined ) }
>
<BoxControl
label={ __( 'Padding' ) }
onChange={ setPadding }
values={ padding }
allowReset={ false }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => !! margin }
label={ __( 'Margin' ) }
onDeselect={ () => setMargin( undefined ) }
>
<BoxControl
label={ __( 'Margin' ) }
onChange={ setMargin }
values={ margin }
allowReset={ false }
/>
</ToolsPanelItem>
</ToolsPanel>
);
}
Props
hasInnerWrapper: boolean
标记此 ToolsPanel 中的项目将包含在一个内部包装器元素中，使面板能够相应地布局它们。
- 必需：否
- 默认值：
false
dropdownMenuProps: {}
用于配置面板的 DropdownMenu 的弹出层 props。
- 类型：
DropdownMenuProps - 必需：否
headingLevel: 1 | 2 | 3 | 4 | 5 | 6 | ‘1’ | ‘2’ | ‘3’ | ‘4’ | ‘5’ | ‘6’
面板标题的标题级别。
- 必需：否
- 默认值：
2
label: string
要在面板标题中显示的文本文字，并作为面板下拉菜单的 aria-label。
- 必需：是
panelId: string | null
如果设置了 panelId，它将通过 ToolsPanelContext 传递并用于限制面板项。当设置了 panelId 时，只有当 panelId 显式为 null 或项目的 panelId 完全匹配时，项目才能注册自己。
- 必需：否
resetAll: ( filters?: ResetAllFilter[] ) => void
当选择“重置所有”菜单选项时调用的函数。作为参数，它接收一个数组，其中包含所有有效注册的 ToolsPanelItems 的 resetAllFilter 回调。
- 必需：是
shouldRenderPlaceholderItems: boolean
告知 ToolsPanel 当其 ToolsPanelItem 子项被切换为关闭并隐藏时，应渲染占位符内容（而不是 null）。
请注意，占位符项目不会应用通常通过 className 属性应用于可见 ToolsPanelItem 的 className。
- 必需：否
- 默认值：
false