Créer des méta-boîtes personnalisées à l’aide de l’éditeur de blocs WordPress (Gutenberg)
La première question que vous pourriez vous poser est "pourquoi aurais-je besoin de créer des méta-boîtes personnalisées avec l’éditeur de blocs (Gutenberg) ?", vous pouvez toujours implémenter des méta-boîtes avec PHP et ajouter des contrôles au bloc, à la publication ou même à une barre latérale personnalisée. à Gutenberg.
Il y a plusieurs raisons pour lesquelles vous pourriez vouloir faire cela, notamment :
- Certains blocs ont des paramètres complexes, et l’affichage d’une méta-boîte en mode édition peut faciliter son utilisation pour un client
- Parce que vous voudrez peut-être modifier un certain aspect de la mise en page du message, tel que l’en-tête. Vous pouvez masquer le champ du titre de l’article et le remplacer par une boîte de méta personnalisée en haut de la page, et pouvoir contrôler toutes les méta de l’article qui s’y rapportent
- Parce que vous pouvez utiliser des modèles de blocs pour placer les méta-boîtes personnalisées où vous le souhaitez, afin qu’elles aient plus de sens dans le contexte
- Parce que vous pouvez appliquer cet apprentissage à d’autres aspects du développement de l’éditeur de blocs (Gutenberg)
Dans ce guide, nous allons développer ce que nous avons déjà construit dans notre guide Post Meta Fields. Vous pouvez utiliser des attributs de bloc, mais en raison de la nature des méta-boîtes, nous utiliserons des champs post-méta dans ce guide.
Conditions préalables
- Se familiariser avec la création de plugins pour WordPress Gutenberg
- Familiarisez-vous avec les blocs dynamiques et le rendu côté serveur
- Familiarisez-vous avec l’utilisation des champs post-méta dans WordPress Gutenberg
Parce que nous suivons le guide Post Meta Fields, nous aurons déjà utilisé register_metapour créer notre champ post meta, en nous assurant que nous avons défini show_in_restsur true et nous aurons également défini la source de notre attribut JavaScript sur metaet défini la clé méta.
Il ne reste plus qu’à implémenter l’interface.
Modifiez le /src/edit.jsfichier en remplaçant l’ @wordpress/componentsimportation par ce qui suit :
import { Panel, PanelBody, TextControl } from '@wordpress/components';
Remplacez ensuite le bloc de code d’édition par ce qui suit :
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>
);
}
Nous avons maintenant un Panel, un PanelBodyet un TextControl. Notez que j’ai ajouté le admin-pluginsparamètre à l’icône du PanelBodypour le garder cohérent avec l’icône du plugin.
Appliquer les styles
Remplacez le SCSS /src/editor.scsspar ce qui suit :
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
p {
all: unset;
}
}
Si vous utilisez une Custom Meta Box créée dans Gutenberg, je vous recommande de la placer avec un modèle de bloc, mais vous pouvez l’insérer normalement comme ceci :
Utilisation d’une méta-boîte personnalisée de Gutenberg
Une fois que vous avez créé votre méta-boîte, il n’y a pas de limite à ce que vous pouvez y ajouter. Toute la bibliothèque de composants WordPress Gutenberg React est à votre disposition, ainsi qu’une vaste bibliothèque de composants React externes (voir mon article sur l’ajout de select2 dans votre projet ).
L’exemple suivant est la pointe de l’iceberg de ce que vous pouvez réaliser :
Boîte méta personnalisée avec champs méta supplémentaires
Pour construire ceci, voici le code dont vous avez besoin :
Enregistrez vos champs méta de publication en PHP
Ouvrez le fichier PHP racine du plugin (dans ce cas wholesome-plugin.php) et mettez à jour ce register_metaque nous avons ajouté dans le guide précédent avec ce qui suit :
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' );
Mettre à jour les attributs JavaScript
Ouvrez /src/index.jset remplacez les attributs que nous avons ajoutés dans le guide précédent par les suivants :
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',
},
},
Importer les composants
Modifiez le /src/edit.jsfichier en remplaçant l’ @wordpress/componentsimportation par ce qui suit :
import {
Panel,
PanelBody,
PanelRow,
SelectControl,
TextControl,
ToggleControl,
} from '@wordpress/components';
Mettre à jour la méthode d’édition
Continuez à modifier le /src/edit.jsfichier en remplaçant Editle bloc de code par ce qui suit :
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>
);
}
Ajouter du SCSS
Enfin, ouvrez le /src/editor.scssfichier et remplacez son contenu par ce qui suit :
.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;
}
}
- Découvrez comment créer des blocs enfants imbriqués avec le
InnerBlockscomposant - Jetez un œil à l’utilisation des paramètres pour stocker des données dans le tableau des options de Gutenberg