So verwenden Sie InspectorControls in Gutenberg

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!