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.
function wholesomecode_wholesome_plugin_customizer_register( $wp_customize) {
class Wholesome_Plugin_Gutenberg_Control extends WP_Customize_Control {
public $type = 'wholesome-plugin-gutenberg-control';
public function render_content() {}
public function content_template() {
?>
<div id="wholesome-plugin-customizer"></div>
<?php
}
}
$wp_customize->register_control_type( 'Wholesome_Plugin_Gutenberg_Control' );
}
add_action( 'customize_register', 'wholesomecode_wholesome_plugin_customizer_register', 10 );
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.
$wp_customize->add_setting( 'wholesomecode_wholesome_plugin_example_select' );
$wp_customize->add_setting( 'wholesomecode_wholesome_plugin_example_text' );
$wp_customize->add_setting( 'wholesomecode_wholesome_plugin_example_text_2', [ 'type' => 'option' ] );
$wp_customize->add_setting( 'wholesomecode_wholesome_plugin_example_toggle', [ 'type' => 'option' ] );
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:
function wholesomecode_wholesome_plugin_register_settings() {
register_setting(
'wholesomecode_wholesome_plugin_settings',
'wholesomecode_wholesome_plugin_example_text_2',
[
'default' => '',
'show_in_rest' => true,
'type' => 'string',
]
);
register_setting(
'wholesomecode_wholesome_plugin_settings',
'wholesomecode_wholesome_plugin_example_toggle',
[
'default' => '',
'show_in_rest' => true,
'type' => 'string',
]
);
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_settings', 10 );
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 ).
function wholesomecode_wholesome_plugin_customizer_scripts() {
$dir = __DIR__;
$script_asset_path = "$dir/build/customizer.asset.php";
if (! file_exists( $script_asset_path)) {
throw new Error(
'You need to run `npm start` or `npm run build` for the "wholesomecode/wholesome-plugin" block first.'
);
}
$customizer_js = 'build/customizer.js';
$script_asset = require( $script_asset_path );
wp_enqueue_script(
'wholesomecode-wholesome-plugin-customizer-editor',
plugins_url( $customizer_js, __FILE__ ),
$script_asset['dependencies'],
$script_asset['version']
);
wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );
wp_localize_script(
'wholesomecode-wholesome-plugin-customizer-editor',
'WholesomePluginSettings',
[
'wholesomecode_wholesome_plugin_example_select' => get_theme_mod( 'wholesomecode_wholesome_plugin_example_select', '' ),
'wholesomecode_wholesome_plugin_example_text' => get_theme_mod( 'wholesomecode_wholesome_plugin_example_text', '' ),
]
);
$customizer_css = 'build/customizer.css';
wp_enqueue_style(
'wholesomecode-wholesome-plugin-customizer',
plugins_url( $customizer_css, __FILE__ ),
['wp-components'],
filemtime( "$dir/$customizer_css") );
}
add_action( 'customize_controls_enqueue_scripts', 'wholesomecode_wholesome_plugin_customizer_scripts', 10 );
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:
wp_localize_script(
'wholesomecode-wholesome-plugin-customizer-editor',
'WholesomePluginSettings',
[
'wholesomecode_wholesome_plugin_example_select' => get_theme_mod( 'wholesomecode_wholesome_plugin_example_select', '' ),
'wholesomecode_wholesome_plugin_example_text' => get_theme_mod( 'wholesomecode_wholesome_plugin_example_text', '' ),
]
);
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.
import './customizer.scss';
const { api } = wp;
import {
Panel,
PanelBody,
Placeholder,
SelectControl,
Spinner,
TextControl,
ToggleControl,
} from '@wordpress/components';
import {
Fragment,
render,
Component,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
const { customize } = wp;
class App extends Component {
constructor() {
super( ...arguments );
this.state = {
exampleSelect: '',
exampleText: '',
exampleText2: '',
exampleText3: '',
exampleToggle: false,
isAPILoaded: false,
};
}
componentDidMount() {
api.loadPromise.then(() => {
this.settings = new api.models.Settings();
const { isAPILoaded } = this.state;
if (isAPILoaded === false) {
this.settings.fetch().then( (response) => {
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,
} );
} );
}
} );
}
render() {
const {
exampleSelect,
exampleText,
exampleText2,
exampleToggle,
isAPILoaded,
} = this.state;
if (! isAPILoaded) {
return (<Placeholder>
<Spinner />
</Placeholder>
);
}
return (<Fragment>
<div className="wholesome-plugin__main">
<Panel>
<PanelBody
title={ __( 'Panel Body One', 'wholesome-plugin') }
icon="admin-plugins"
>
<SelectControl
help={ __( 'An example dropdown field.', 'wholesome-plugin') }
label={ __( 'Example Select', 'wholesome-plugin') }
onChange={ (exampleSelect) => {
this.setState( { exampleSelect } );
customize.value('wholesomecode_wholesome_plugin_example_select')(exampleSelect);
}}
options={ [
{
label: __( 'Please Select...', 'wholesome-plugin' ),
value: '',
},
{
label: __( 'Option 1', 'wholesome-plugin' ),
value: 'option-1',
},
{
label: __( 'Option 2', 'wholesome-plugin' ),
value: 'option-2',
},
] }
value={ exampleSelect }
/>
</PanelBody>
<PanelBody
title={ __( 'Panel Body Two', 'wholesome-plugin') }
icon="admin-plugins"
>
<TextControl
help={ __( 'This is an example text field.', 'wholesome-plugin') }
label={ __( 'Example Text', 'wholesome-plugin') }
onChange={ (exampleText) => {
this.setState( { exampleText } );
customize.value('wholesomecode_wholesome_plugin_example_text')(exampleText);
}}
value={ exampleText }
/>
</PanelBody>
<PanelBody
title={ __( 'Panel Body Three', 'wholesome-plugin') }
icon="admin-plugins"
>
<TextControl
help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }
label={ __( 'Example Text 2', 'wholesome-plugin') }
onChange={ (exampleText2) => {
this.setState( { exampleText2 } );
customize.value('wholesomecode_wholesome_plugin_example_text_2')(exampleText2);
}}
value={ exampleText2 }
/>
</PanelBody>
<PanelBody
title={ __( 'Panel Body Four', 'wholesome-plugin') }
icon="admin-plugins"
>
<ToggleControl
checked={ exampleToggle }
help={ __( 'An example toggle.', 'wholesome-plugin') }
label={ __( 'Example Toggle', 'wholesome-plugin') }
onChange={ (exampleToggle) => {
this.setState( { exampleToggle } );
customize.value('wholesomecode_wholesome_plugin_example_toggle')(exampleToggle);
}}
/>
</PanelBody>
</Panel>
</div>
</Fragment>) }
}
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:
onChange={ (exampleSelect) => {
this.setState( { exampleSelect } );
customize.value('wholesomecode_wholesome_plugin_example_select')(exampleSelect);
}}
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:
customize.bind('ready', function() {
const panelKey = 'wholesomecode-wholesome-plugin-customizer-panel';
const sectionKey = 'wholesomecode-wholesome-plugin-customizer-section';
customize.panel.add(
new customize.Panel( panelKey, {
description: __( 'Wholesome Plugin Example Panel', 'wholesome-plugin' ),
priority: 1000,
title: __( 'Wholesome Plugin Panel', 'wholesome-plugin' ),
})
);
customize.section.add(
new customize.Section( sectionKey, {
customizeAction: __( 'Wholesome Plugin ▸ Section', 'wholesome-plugin' ),
panel: panelKey,
title: __( 'Wholesome Plugin Section', 'wholesome-plugin' ),
})
);
customize.control.add(
new customize.Control( 'wholesomecode-wholesome-plugin-customizer-gutenberg-control', {
section: sectionKey,
type: 'wholesome-plugin-gutenberg-control',
})
);
const htmlOutput = document.getElementById( 'wholesome-plugin-customizer' );
if (htmlOutput) {
render(
<App />,
htmlOutput
);
}
});
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:
#wholesome-plugin-customizer {
.components-placeholder {
background: #f1f1f1;
}
.wholesome-plugin__main {
margin-left: auto;
margin-right: auto;
.components-panel {
background: none;
border: none;
}
.components-panel__body {
background: #ffffff;
border: 1px solid #e2e4e7;
margin-bottom: 1rem;
}
}
.components-base-control__help {
margin-top: .5rem;
}
.components-panel__row {
> div {
flex-grow: 1;
margin-right: 1rem;
&:last-of-type {
margin-right: 0;
}
}
}
.wholesome-plugin__notices {
.components-snackbar {
bottom: .5rem;
position: fixed;
}
}
}
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 erstellen
InnerBlocks - Sehen Sie sich die Verwendung von Post-Meta-Feldern in Gutenberg-Blöcken an