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

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

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

什么是 InspectorControls？

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

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

如何添加基本控件

最常見的做法是在你的塊的 edit.js 文件中引入相關(guān)組件，并在 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={ __( '設(shè)置', 'my-block' ) }>
                    <TextControl
                        label={ __( '輸入文字', 'my-block' ) }
                        value={ customText }
                        onChange={ ( value ) => setAttributes( { customText: value } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <p>{ customText }</p>
        </>
    );
}

這樣用戶就能在側(cè)邊欄修改顯示的文字內(nèi)容了。

常見控件類型及用途

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

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

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

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

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

這些控件都可以組合使用，構(gòu)建出功能豐富的設(shè)置面板。

注意事項與最佳實踐

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

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

以上是如何在Gutenberg使用InspectorControls的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！