Erstellen Sie ein Customizer-Panel mit den Komponenten des WordPress-Blockeditors (Gutenberg).

In unserer letzten Anleitung haben wir uns mit dem Erstellen einer Einstellungsseite mit den Komponenten des WordPress-Blockeditors (Gutenberg) befasst. In diesem Leitfaden werden wir noch weiter gehen und Gutenberg-Komponenten im WordPress Customizer verwenden.

Der Customizer mit Gutenberg-Komponenten

Voraussetzungen

• Habe die Anleitung zum Erstellen eines Plugins für den WordPress-Blockeditor (Gutenberg) befolgt
• Habe die Anleitung Verwenden von Optionen zum Speichern von Daten im WordPress-Blockeditor (Gutenberg) befolgt
• Habe die Anleitung zum Hinzufügen von Einstiegspunkten zum WordPress Create Block Script befolgt
• Habe die Anleitung zum Erstellen einer Einstellungsseite mit dem WordPress-Block-Editor (Gutenberg) befolgt

Erstellen Sie einen Einstiegspunkt im Webpack

Erstellen Sie im Anschluss an den Leitfaden „Einstiegspunkte zum WordPress-Blockskript erstellen” einen neuen Einstiegspunkt in der erweiterten webpack.config.jsDatei, die Sie in diesem Leitfaden erstellt haben.

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const path = require( 'path' );

module.exports = {
    ...defaultConfig,
    entry: {
        ...defaultConfig.entry,
        customizer: path.resolve( process.cwd(), 'src', 'customizer.js' ),
    }
};

Erstellen Sie zwei neue Dateien in Ihrer Lösung:

• /src/customizer.js
• /src/customizer.scss

Wir werden diese verwenden, um unser Plugin zu erstellen.

Registrieren Sie die Customizer-Einstellungen und -Komponenten in PHP

Öffnen Sie nach den Anleitungen in den Voraussetzungen die Root-PHP-Datei des Plugins (in diesem Fall wholesome-plugin.php) und fügen Sie Folgendes hinzu:

Registrieren Sie das Customizer-Steuerelement

Wir müssen ein benutzerdefiniertes Customizer-Steuerelement erstellen. Fügen Sie Ihrer Datei den folgenden Code hinzu, der einen Aufruf rendert, der das a <div>mit einer ID ausgibt, in die sich unser JavaScript einklinken kann.

Am Ende dieser Datei registrieren wir das Steuerelement mit dem register_control_type, was uns den Zugriff auf dieses Steuerelement in JavaScript ermöglicht.

Registrieren Sie die Customizer-Einstellungen

Im selben Codeblock müssen wir die Einstellungen registrieren, die wir im Customizer verwenden werden. Fügen Sie dazu den folgenden Codeblock nach der Zeile hinzu, die die register_control_type.

Beachten Sie, dass die ersten beiden Einstellungen über die Standardfunktion zugänglich get_theme_modsind, während die unteren beiden Einstellungen die Argumente übergeben 'type' => 'option', was bedeutet, dass diese Einstellungen als eindeutige Felder in der Optionstabelle registriert werden und über zugänglich sind get_option.

Für diese beiden unteren Einstellungen müssen wir sicherstellen, dass sie jeweils über register_settingund show_in_restbei registriert sind true, damit über Gutenberg auf sie zugegriffen werden kann.

Registrieren Sie die ‘Option’-Einstellungen

Registrieren Sie die beiden unteren Customizer-Einstellungen (auf die wir über zugreifen get_option) mit dem folgenden Codeblock:

Stellen Sie die Skripts in die Warteschlange

Registrieren Sie abschließend die Customizer-Assets mit dem folgenden Code (weitere Informationen finden Sie im Leitfaden zum Hinzufügen von Einstiegspunkten ).

Beachten Sie, dass wir wp_localize_scriptdiesen Codeblock auch verwenden, um die Einstellungen, auf die wir zugreifen get_theme_mod, an JavaScript zu übergeben.

Schauen wir uns diesen Teil des Codes genauer an:

Beachten Sie, dass wir dieselben Einstellungsschlüssel verwenden, die wir registriert haben, als wir die Customizer-Einstellungen $wp_customize->add_settingzuvor registriert haben (diejenigen, die nicht für die Verwendung einer Option konfiguriert wurden).

Erstellen Sie das Customizer-Panel in JavaScript

Fügen Sie den folgenden Code in die /src/customizer.jsDatei ein.

Dieser Code (die AppKomponente) ist zum größten Teil eine Überarbeitung des Codes aus dem Leitfaden zur Seite „Einstellungen erstellen”. Es verwendet dieselben Komponenten und setzt weiterhin die statevon der Einstellungs-API, verzichtet jedoch auf die Schaltfläche „Speichern” und den Hinweisbereich.

Eine bemerkenswerte Änderung ist die in componentDidMount, wo die Einstellungen von der API geladen werden. Beachten Sie, dass auf die beiden Einstellungen, auf die über get_theme_modzugegriffen wird, über die Variable zugegriffen wird, die WholesomePluginSettingswir in der wp_localize_scriptFunktion weiter oben in diesem Handbuch erstellt haben.

this.setState( {
  exampleSelect: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_select' ],
  exampleText: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_text' ],
  exampleText2: response[ 'wholesomecode_wholesome_plugin_example_text_2' ],
  exampleText3: response[ 'wholesomecode_wholesome_plugin_example_text_3' ],
  exampleToggle: Boolean( response[ 'wholesomecode_wholesome_plugin_example_toggle' ] ),
  isAPILoaded: true,
} );

Behandeln Sie das Speichern

Wir müssen nicht wirklich etwas Besonderes tun, um mit den Änderungen umzugehen. Das einzige, was wir tun müssen, ist, uns einzuklinken customizeund den WordPress Customizer das Speichern zu überlassen, zum Beispiel:

In diesem Beispiel onChangeübergibt der den Wert des Eingabefelds (in diesem Fall unser <select>) und aktualisiert den Status und übergibt diesen Wert dann über die wp.customize.value()Funktion an den Customizer.

Erstellen Sie den Customizer-Bereich und das Panel mit JavaScript

Fügen Sie am Ende der /src/customizer.jsDatei den folgenden Code hinzu:

Dieser Code erstellt den Customizer-Bereich und das Panel in JavaScript.

Der Code fügt auch unser benutzerdefiniertes Gutenberg-Steuerelement hinzu, indem er eine new customize.ControlKlasse registriert und die typemit demselben Namen übergibt, den typewir bei der Registrierung des Steuerelements in PHP festgelegt haben.

Wir verwenden diesen Code auch, um den von <div>uns registrierten in unserem benutzerdefinierten Gutenberg-Steuerelement zu finden und die Gutenberg-Komponenten in dieses zu rendern <div>.

Fügen Sie die SCSS hinzu

Wir müssen das Panel ein wenig aufräumen, indem wir das folgende SCSS in hinzufügen /src/customizer.scss:

Anzeigen des Customizers

Navigieren Sie zum WordPress Customizer und sehen Sie sich das Gutenberg Customizer Panel in Aktion an:

Der Customizer mit Gutenberg-Komponenten

• Schauen Sie sich an, wie Sie mit der Komponente verschachtelte untergeordnete Blöcke erstellenInnerBlocks
• Sehen Sie sich die Verwendung von Post-Meta-Feldern in Gutenberg-Blöcken an