Füge Select2 als InspectorControl in WordPress Gutenberg hinzu

Für ein Projekt, an dem ich arbeitete, wollte ich Select2 als Gutenberg verwenden InpectorControl, damit ich Einstellungen auf einen Block anwenden kann. Dieses Tutorial vermittelt Ihnen auch die Grundlage, die Sie benötigen, um React-Komponenten von Drittanbietern in den WordPress Gutenberg-Editor zu integrieren.

Select2 ist ein super praktischer Ersatz für Select-Boxen auf Ihrer Website. Insbesondere bietet es einige großartige Optionen zum Auswählen mehrerer Elemente.

Das fertige Produkt Select2 im WordPress Gutenberg InspectorControls

Die gute Nachricht ist, dass ich keine React-Komponente bauen musste, um Select2 in Gutenberg zu integrieren, die react-selectKomponente von Jed Watson leistet bereits hervorragende Arbeit, aber es war nicht so einfach, es gut mit Gutenberg zu spielen, als einfach zu folgen die Anleitungen.

Das Wichtigste zuerst, wir mussten die Komponente in unserem Build installieren. Da dies auf npm war, war es so einfach, Folgendes in unser Terminal einzugeben:

Select2 in einen Gutenberg-Block bekommen

Unter Verwendung von Zac Gordons Gutenberg Course Git Repo (Teil von Zac Gordons fantastischem Gutenberg-Entwicklungskurs) als Basis für mein Plugin (insbesondere das InspectorControlsBeispiel), musste react-selectich die folgenden Includes am Anfang meiner Datei hinzufügen:

import React from 'react';
import Select from 'react-select';

Ach nein! Das Kompilieren gibt uns einen Fehler:

Modul nicht gefunden: Fehler: Kann ‘reagieren’ nicht auflösen

Keine Angst, dieser großartige Artikel über „So verwenden Sie externe React-Komponenten in Ihren Gutenberg-Blöcken” von CSS Igniter kam uns zu Hilfe, wir müssen uns nur externalsin unserer webpack.config.jsDatei registrieren:

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
}

So:

module.exports = {
    entry: {
        './assets/js/editor': './blocks/index.js',
        './assets/js/script': './blocks/script.js',
    },
    output: {
        path: path.resolve( __dirname ),
        filename: '[name].js',
    },
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM',
    }
...

Registrierung der InspectorControls

Innerhalb der Panel-Rolle Ihrer <InspectorControls>Komponente müssen Sie Folgendes hinzufügen:

Wir sind noch nicht ganz fertig, da wir auch das selectedOptionAttribut und die handleSelectChangeFunktion registrieren müssen. Wir können das so machen:

attributes: {
    selectedOption: {
        type: 'string',
        default: null,
    }
},

…und nun zur Funktion…

Moment mal, warum müssen wir JSON.stringify()und JSON.parse()die Werte? Nun, da der Wert, den die react-selectKomponente akzeptiert, ein Array ist und Gutenberg uns diesen Wert nicht als Array speichern lässt, ist dies eine Problemumgehung, die wir verwenden können.

Etwas zusammensetzen

Unser kompletter InspectorControlsBereich sollte nun so aussehen:

Sieht gut aus in Gutenberg

Wie Sie auf dem Screenshot sehen können, funktioniert es ziemlich gut:

Select2 als Gutenberg InspectorControl

Es weiter bringen

Ich habe dieses Inspector-Steuerelement in meinem Secure Blocks for Gutenberg-Plugin verwendet. Finden Sie heraus, wie ich das Select2-Steuerelement mit dynamischen Daten aus der WordPress-REST-API gefüllt habe .