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

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

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

什麼是InspectorControls？

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

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

如何添加基本控件

最常見的做法是在你的塊的edit.js文件中引入相關(guān)組件，並在InspectorControls中加入一些控制項(xiàng)。例如：

 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={ __( &#39;設(shè)置&#39;, &#39;my-block&#39; ) }>
                    <TextControl
                        label={ __( &#39;輸入文字&#39;, &#39;my-block&#39; ) }
                        value={ customText }
                        onChange={ ( value ) => setAttributes( { customText: value } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <p>{ customText }</p>
        </>
    );
}

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

常見控件類型及用途

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

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

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

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

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

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

注意事項(xiàng)與最佳實(shí)踐

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

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

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