Erstellen Sie benutzerdefinierte Meta-Boxen mit dem WordPress-Blockeditor (Gutenberg)
Die erste Frage, die Sie vielleicht haben, lautet: „Warum sollte ich benutzerdefinierte Metaboxen mit dem Blockeditor (Gutenberg) erstellen?“ Sie können Metaboxen dennoch mit PHP implementieren und Steuerelemente zum Block, Post oder sogar einer benutzerdefinierten Seitenleiste hinzufügen bei Gutenberg.
Es gibt einige Gründe, warum Sie dies tun möchten, darunter:
- Einige Blöcke haben komplexe Einstellungen, und das Anzeigen einer Metabox im Bearbeitungsmodus kann die Verwendung für einen Kunden erleichtern
- Weil Sie vielleicht einen bestimmten Layoutaspekt des Beitrags ändern möchten, z. B. die Kopfzeile. Sie könnten das Post-Titelfeld ausblenden und durch ein benutzerdefiniertes Meta-Feld oben auf der Seite ersetzen und alle damit verbundenen Post-Meta steuern
- Weil Sie Blockvorlagen verwenden können, um die benutzerdefinierten Meta-Boxen dort zu platzieren, wo Sie möchten, damit sie im Kontext sinnvoller sind
- Weil Sie dieses Gelernte auf andere Aspekte der Entwicklung des Blockeditors (Gutenberg) anwenden können
In diesem Leitfaden werden wir das erweitern, was wir bereits in unserem Post-Meta-Felder-Leitfaden erstellt haben. Sie könnten Blockattribute verwenden, aber aufgrund der Natur von Meta-Boxen werden wir in diesem Leitfaden Post-Meta-Felder verwenden.
Voraussetzungen
- Machen Sie sich mit der Erstellung von Plugins für WordPress Gutenberg vertraut
- Machen Sie sich mit dynamischen Blöcken und serverseitigem Rendering vertraut
- Machen Sie sich mit der Verwendung von Post-Meta-Feldern in WordPress Gutenberg vertraut
Da wir dem Post-Meta-Felder-Leitfaden folgen, haben wir bereits verwendet register_meta, um unser Post-Meta-Feld zu erstellen, um sicherzustellen, dass wir es show_in_restauf true gesetzt haben, und wir haben auch die Quelle unseres JavaScript-Attributs auf gesetzt metaund den Meta-Schlüssel definiert.
Es bleibt nur noch die Schnittstelle zu implementieren.
Bearbeiten Sie die /src/edit.jsDatei und ersetzen Sie den @wordpress/componentsImport durch Folgendes:
import { Panel, PanelBody, TextControl } from '@wordpress/components';
Ersetzen Sie dann den Code bearbeiten-Block durch Folgendes:
export default function Edit( { attributes, setAttributes }) {
const { blockText } = attributes;
return (<div { ...useBlockProps() }>
<Panel>
<PanelBody
title={ __( 'Example Meta Box', 'wholesome-plugin') }
icon="admin-plugins"
>
<TextControl
label={ __( 'Example Meta', 'wholesome-plugin') }
help={ __( 'This is an example meta field.', 'wholesome-plugin') }
onChange={ (blockText) => setAttributes( { blockText }) }
value={ blockText }
/>
</PanelBody>
</Panel>
</div>
);
}
Wir haben jetzt a Panel, a PanelBodyund a TextControl. Beachten Sie, dass ich das admin-pluginszum Icon-Parameter von hinzugefügt habe PanelBody, um es mit dem Plugin-Icon konsistent zu halten.
Wenden Sie die Stile an
Ersetzen Sie das SCSS in /src/editor.scssdurch Folgendes:
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
p {
all: unset;
}
}
Wenn Sie eine in Gutenberg erstellte benutzerdefinierte Metabox verwenden, würde ich empfehlen, sie mit einer Blockvorlage zu platzieren, Sie können sie jedoch wie folgt einfügen:
Verwenden einer benutzerdefinierten Gutenberg-Metabox
Sobald Sie Ihre Meta-Box erstellt haben, sind dem, was Sie hinzufügen können, keine Grenzen gesetzt. Die gesamte Bibliothek der WordPress Gutenberg React-Komponenten steht Ihnen zur Verfügung, zusammen mit einer riesigen Bibliothek externer React-Komponenten (siehe meinen Artikel über das Hinzufügen von select2 zu Ihrem Projekt ).
Das folgende Beispiel ist die Spitze des Eisbergs dessen, was Sie erreichen können:
Benutzerdefinierte Meta-Box mit zusätzlichen Meta-Feldern
Um dies zu erstellen, ist hier der Code, den Sie benötigen:
Registrieren Sie Ihre Post-Meta-Felder in PHP
Öffnen Sie die Root-PHP-Datei des Plugins (in diesem Fall wholesome-plugin.php) und aktualisieren Sie die register_metain der vorherigen Anleitung hinzugefügte Datei wie folgt:
function wholesomecode_wholesome_plugin_register_post_meta() {
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_select',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_text',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_text_2',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_text_3',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_toggle',
[
'auth_callback' => '__return_true',
'default' => false,
'show_in_rest' => true,
'single' => true,
'type' => 'boolean',
]
);
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );
Aktualisieren Sie die JavaScript-Attribute
Öffnen /src/index.jsund ersetzen Sie die Attribute, die wir im vorherigen Handbuch hinzugefügt haben, durch die folgenden:
attributes: {
exampleSelect: {
meta: '_wholesomecode_wholesome_plugin_example_select',
source: 'meta',
},
exampleText: {
meta: '_wholesomecode_wholesome_plugin_example_text',
source: 'meta',
},
exampleText2: {
meta: '_wholesomecode_wholesome_plugin_example_text_2',
source: 'meta',
},
exampleText3: {
meta: '_wholesomecode_wholesome_plugin_example_text_3',
source: 'meta',
},
exampleToggle: {
meta: '_wholesomecode_wholesome_plugin_example_toggle',
source: 'meta',
},
},
Importieren Sie die Komponenten
Bearbeiten Sie die /src/edit.jsDatei und ersetzen Sie den @wordpress/componentsImport durch Folgendes:
import {
Panel,
PanelBody,
PanelRow,
SelectControl,
TextControl,
ToggleControl,
} from '@wordpress/components';
Aktualisieren Sie die Edit-Methode
Fahren Sie mit der Bearbeitung der /src/edit.jsDatei fort und ersetzen Sie Editden Codeblock durch Folgendes:
export default function Edit( { attributes, setAttributes }) {
const {
exampleSelect,
exampleText,
exampleText2,
exampleText3,
exampleToggle,
} = attributes;
return (<div { ...useBlockProps() }>
<Panel>
<PanelBody
title={ __( 'Example Meta Box', 'wholesome-plugin') }
icon="admin-plugins"
>
<SelectControl
help={ __( 'An example dropdown field.', 'wholesome-plugin') }
label={ __( 'Example Select','wholesome-plugin') }
onChange={ (exampleSelect) => setAttributes( { 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 }
/>
<TextControl
help={ __( 'This is an example text field.', 'wholesome-plugin') }
label={ __( 'Example Text', 'wholesome-plugin') }
onChange={ (exampleText) => setAttributes( { exampleText }) }
value={ exampleText }
/>
<PanelRow>
<TextControl
help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }
label={ __( 'Example Text 2', 'wholesome-plugin') }
onChange={ (exampleText2) => setAttributes( { exampleText2 }) }
value={ exampleText2 }
/>
<TextControl
help={ __( 'This control is inline.', 'wholesome-plugin') }
label={ __( 'Example Text 3', 'wholesome-plugin') }
onChange={ (exampleText3) => setAttributes( { exampleText3 }) }
value={ exampleText3 }
/>
</PanelRow>
<ToggleControl
checked={ exampleToggle }
help={ __( 'An example toggle.', 'wholesome-plugin') }
label={ __( 'Example Toggle', 'wholesome-plugin') }
onChange={ (exampleToggle) => setAttributes( { exampleToggle }) }
/>
</PanelBody>
</Panel>
</div>
);
}
Fügen Sie etwas SCSS hinzu
Öffnen Sie schließlich die /src/editor.scssDatei und ersetzen Sie ihren Inhalt durch Folgendes:
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
.components-base-control {
margin-bottom: 1rem;
select {
height: 2rem;
min-height: 2rem;
}
}
p {
all: unset;
}
}
- Schauen Sie sich an, wie Sie mit der Komponente verschachtelte untergeordnete Blöcke erstellen
InnerBlocks - Sehen Sie sich die Verwendung von Einstellungen zum Speichern von Daten in der Optionstabelle in Gutenberg an