InspectorControls ist eine Komponente, die in der Entwicklung von Gutenberg verwendet wird, um benutzerdefinierte Steuerelemente in der rechten Seitenleiste hinzuzufügen. 1. Es geh?rt zum @WordPress/Block-Eduitor-Paket. 2. Es wird oft mit PanelBody, TextControl und anderen Komponenten verwendet. 3. Wenn Sie es verwenden, müssen Sie Steuertypen wie Textfelder, Pulldown-Auswahl, Schalter, Schieberegler und Farbauswahltypen in edit.js. 4. Achten Sie auf Gruppierungseinstellungen, halten Sie sie einfach, unterstützen Sie die Internationalisierung und optimieren Sie die Leistung.

In der Entwicklung von Gutenberg ist InspectorControls eine sehr praktische Komponente, mit der benutzerdefinierte Steuerelemente in der rechten Seitenleiste des Editors hinzugefügt werden (dh das Blockeinstellungsfeld). Wenn Benutzer Blockeigenschaften wie Farb-, Gr??e oder Layoutoptionen einstellen, ist InspectorControls das wichtigste Tool, das Sie verwenden m?chten.

Im Folgenden finden Sie einige h?ufige Nutzungsszenarien und spezifische Implementierungsmethoden, mit denen Sie schnell beginnen k?nnen.

Was sind InspectorControls?

Kurz gesagt, InspectorControls ist eine React-Komponente, die von WordPress @wordpress/block-editor Paket bereitgestellt wird. Es ist dafür verantwortlich, die UI -Steuerelemente in die rechte Seitenleiste des Gutenberg -Herausgebers einzuführen. Es wird normalerweise mit Komponenten wie PanelBody , TextControl , SelectControl und anderen Komponenten verwendet.

Sie k?nnen es nicht direkt in den Hauptbearbeitungsbereich (eine andere in der Bearbeitungsfunktion) setzen, es kann nur als untergeordnetes Element von InspectorControls gerendert werden.

So fügen Sie grundlegende Steuerelemente hinzu

Der h?ufigste Ansatz besteht darin, relevante Komponenten in die edit.js -Datei Ihres Blocks einzuführen und InspectorControls einige Steuerelemente hinzuzufügen. Zum Beispiel:

 Import {InspectorControls, PanelBody, textControl} aus '@WordPress/Block-Editor';
Importieren {__} aus '@WordPress/i18n';

Standardfunktion Exportieren Sie die Standardfunktion bearbeiten ({Attribute, setAttributes}) {
    const {customText} = Attribute;

    Zurückkehren (
        <>
            <SpectorControls>
                <PanelBody title = {__ (&#39;set&#39;, &#39;my-block&#39;)}>
                    <TextControl
                        Label = {__ (&#39;Eingabetext&#39;, &#39;my-block&#39;)}
                        value = {customText}
                        onchange = {(value) => setAttributes ({CustomText: value})}
                    />
                </PanelBody>
            </InspectorControls>
            <p> {CustomText} </p>
        </>
    );
}

Auf diese Weise kann der Benutzer den angezeigten Textinhalt in der Seitenleiste ?ndern.

Gemeinsame Kontrolltypen und Verwendung

Sie k?nnen verschiedene Steuertypen entsprechend Ihren Anforderungen ausw?hlen. Hier sind einige h?ufig verwendete:

• TextControl : Texteingabefeld, eine für den Zeichenfolgentyp geeignete Eigenschaft.
• SelectControl : Dropdown-Auswahlbox, geeignet für Einstellungen mit begrenzten Optionen.
• ToggleControl : Schalttaste, verwendet für boolesche Werte (True/False).
• RangeControl : Schiebebalken, geeignet für die Einstellung der numerischen Bereichs.
• Colorpicker : Farbauswahl, verwendet für Farbeinstellungen.

Beispielsweise kann das Hinzufügen eines Farbauswahls so geschrieben werden:

 importieren {colorpicker} aus '@WordPress/Block-editor';

<Colorpicker
    color = {colorValue}
    onchange = {(value) => setAttributes ({colorValue: value})}
 />

Diese Steuerelemente k?nnen in Kombination verwendet werden, um ein featurereiches Einstellungsfeld zu erstellen.

Notizen und Best Practices

• Angemessene Gruppierungssteuerung : Verwenden Sie mehrere PanelBody , um Einstellungen verschiedener Kategorien zu trennen, um die Lesbarkeit zu verbessern.
• Vermeiden Sie überkomplexit?t : Fügen Sie nicht zu viele Steuerelemente gleichzeitig hinzu, um die Schnittstelle einfach zu halten.
• Unterstützung von Internationalisierung : Alle Text -Tags sollten mit __() oder _x() übersetzt werden.
• Leistungsoptimierung : Wenn es viele Steuerelemente gibt, sollten Sie bei Bedarf faulen Laden oder Rendern in Betracht ziehen.

Grunds?tzlich ist das. Die Verwendung von InspectorControls kann die Funktionalit?t und Benutzererfahrung des Blocks erheblich verbessern. Obwohl es nicht kompliziert ist, ist es leicht, Details zu ignorieren. Es wird empfohlen, auf die offiziellen Dokumente und vorhandenen Plug-Ins zu verweisen, um sie zu implementieren.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie InspectorControls in Gutenberg. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!