InspectorControls 是 Gutenberg 開發(fā)中用于在右側邊欄添加自定義控件的組件，1. 它屬于 @wordpress/block-editor 包，2. 常搭配 PanelBody、TextControl 等組件使用，3. 使用時需在 edit.js 中引入并合理布局控件類型如文本框、下拉選擇、開關、滑動條和顏色選擇器等，4. 應注意分組設置、保持簡潔、支持國際化及優(yōu)化性能。

在 Gutenberg 開發(fā)中，InspectorControls 是一個非常實用的組件，它用于在編輯器右側邊欄（也就是“塊設置”面板）中添加自定義控件。如果你希望讓用戶能通過側邊欄調整塊的屬性，比如顏色、尺寸或布局選項，那么 InspectorControls 就是你要用到的關鍵工具。

下面是一些常見的使用場景和具體實現方式，幫助你快速上手。

什么是 InspectorControls？

簡單來說，InspectorControls 是 WordPress 的 @wordpress/block-editor 包提供的一個 React 組件。它負責將 UI 控件插入到 Gutenberg 編輯器的右側邊欄中。通常搭配像 PanelBody、TextControl、SelectControl 等組件一起使用。

你不能把它直接放在主編輯區(qū)域（Edit 函數里其他地方），只能作為 InspectorControls 的子元素來渲染。

如何添加基本控件

最常見的做法是在你的塊的 edit.js 文件中引入相關組件，并在 InspectorControls 中加入一些控制項。例如：

import { InspectorControls, PanelBody, TextControl } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

export default function Edit( { attributes, setAttributes } ) {
    const { customText } = attributes;

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( '設置', 'my-block' ) }>
                    <TextControl
                        label={ __( '輸入文字', 'my-block' ) }
                        value={ customText }
                        onChange={ ( value ) => setAttributes( { customText: value } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <p>{ customText }</p>
        </>
    );
}

這樣用戶就能在側邊欄修改顯示的文字內容了。

常見控件類型及用途

你可以根據需求選擇不同的控件類型，以下是一些常用的：

• TextControl：文本輸入框，適合字符串類型的屬性。
• SelectControl：下拉選擇框，適合有限選項的設置。
• ToggleControl：開關按鈕，用于布爾值（true/false）。
• RangeControl：滑動條，適合數值范圍調節(jié)。
• ColorPicker：顏色選擇器，用于顏色設置。

舉個例子，添加一個顏色選擇器可以這樣寫：

import { ColorPicker } from '@wordpress/block-editor';

<ColorPicker
    color={ colorValue }
    onChange={ ( value ) => setAttributes( { colorValue: value } ) }
 />

這些控件都可以組合使用，構建出功能豐富的設置面板。

注意事項與最佳實踐

• 合理分組控件：使用多個 PanelBody 把不同類別的設置分開，提高可讀性。
• 避免過度復雜：不要一次加太多控件，保持界面簡潔。
• 國際化支持：所有文字標簽都應使用 __() 或 _x() 進行翻譯。
• 性能優(yōu)化：如果控件很多，考慮懶加載或按需渲染。

基本上就這些。用好 InspectorControls 能顯著提升塊的功能性和用戶體驗，雖然不復雜但容易忽略細節(jié)，建議多參考官方文檔和已有插件的實現方式。

以上是如何在Gutenberg使用InspectorControls的詳細內容。更多信息請關注PHP中文網其他相關文章！