Ajouter des contrôles à la barre latérale de publication avec PluginDocumentSettingPanel
Jusqu’à présent, nous avons examiné la barre latérale des blocs en ajoutant InspectorControlsà nos blocs personnalisés et en ajoutant des contrôles à la barre latérale des blocs principaux et tiers avec des filtres et des composants d’ordre supérieur. Dans ce guide, nous allons examiner l’ajout de contrôles à la barre latérale de publication.
Paramètres d’affichage dans la barre latérale des messages
Dans ce guide, nous allons créer un contrôle "Paramètres d’affichage" qui permettra uniquement aux utilisateurs connectés de voir le message lorsqu’il est activé.
Conditions préalables
- Avoir suivi le guide Création d’un plugin pour l’éditeur de blocs WordPress (Gutenberg)
- Lisez les guides de la barre latérale précédente (barre latérale pour un bloc personnalisé et barre latérale pour un bloc existant )
- Lisez le guide Utilisation des champs Meta Post pour stocker les attributs dans le guide WordPress Block Editor (Gutenberg)
Enregistrement du Post Meta en PHP
Veuillez suivre les étapes du guide de création de plugin pour nous donner notre plugin initial, nous développerons cela dans notre guide.
Après avoir fait cela, configurons la méta de publication dont nous avons besoin pour notre contrôle de basculement des autorisations. Ouvrez le fichier racine du plugin (dans notre cas wholesome-plugin.php) et ajoutez le code suivant :
function wholesomecode_wholesome_plugin_register_post_meta() {
register_meta(
'post',
'_wholesomecode_wholesome_plugin_require_login',
[
'auth_callback' => '__return_true',
'default' => false,
'show_in_rest' => true,
'single' => true,
'type' => 'boolean',
]
);
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );
Si vous avez jeté un coup d’œil au guide des champs méta post, cela devrait vous sembler un peu familier. Tout ce qu’il fait, c’est qu’il permet d’accéder à notre post meta depuis l’éditeur de blocs (Gutenberg).
Dans votre plugin, créez un nouveau dossier appelé componentset créez le fichier suivant /components/Sidebar.js. Dans ce fichier collez le code suivant :
import { ToggleControl } from '@wordpress/components';
import { dispatch, select } from '@wordpress/data';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
export default class Sidebar extends Component {
render() {
const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];
return (<PluginDocumentSettingPanel
name="wholesomecode-wholesome-plugin-sidebar"
title={ __( 'Display Settings', 'wholesome-plugin') }
>
<ToggleControl
checked={ exampleToggle }
help={ __( 'User must be logged-in in to view this post.', 'wholesome-plugin') }
label={ __( 'Require Login', 'wholesome-plugin') }
onChange={ (value) => {
dispatch( 'core/editor' ).editPost( {
meta: {
'_wholesomecode_wholesome_plugin_require_login': value,
},
} );
} }
/>
</PluginDocumentSettingPanel>
);
}
}
Nous l’ ToggleControlavons déjà vu dans nos guides latéraux précédents, mais le panneau que nous utilisons est légèrement nouveau. Nous utilisons PluginDocumentSettingPanelpour identifier que ce contrôle doit apparaître dans la barre latérale de la publication.
Notez également qu’au lieu d’extraire des attributs, nous obtenons nos métadonnées avec le code suivant :
const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];
et nous l’enregistrons via notre onChangeméthode en utilisant ce code :
onChange={ (value) => {
dispatch( 'core/editor' ).editPost( {
meta: {
'_wholesomecode_wholesome_plugin_require_login': value,
},
} );
} }
Cela met à jour la méta du message actuel. Il ne sera pas enregistré tant que nous n’aurons pas enregistré notre message, donc toute l’enregistrement est géré pour nous.
Il y a une dernière chose que nous devons faire avec notre barre latérale de publication, et c’est de l’enregistrer. En haut du /src/index.jsfichier, ajoutez ce qui suit :
import { registerPlugin } from '@wordpress/plugins';
import render from './components/Sidebar';
registerPlugin(
'wholesomecode-wholesome-plugin-sidebar',
{
icon: 'visibility',
render,
}
);
Nous devrions vraiment penser à modifier la structure de notre plugin afin que le code qui enregistre le bloc soit importé d’un autre fichier, mais pour plus de simplicité, nous utiliserons le même fichier.
Ici, nous utilisons registerPluginpour enregistrer la barre latérale. Nous transmettons le composant Sidebar que nous avons créé en tant que méthode ‘render’, avec une icône.
Ajouter la logique Masquer si déconnecté
Ouvrez à nouveau le fichier racine du plugin (dans notre cas wholesome-plugin.php) et déposez-y le code suivant. Il existe de bien meilleures façons de le faire, mais je le garde court à des fins d’exemple:
function wholesomecode_wholesome_plugin_require_login() {
global $post, $wp_query;
if (is_admin() ||! is_singular() ||! $post) {
return;
}
if (is_user_logged_in()) {
return;
}
$login_required = get_post_meta( $post->ID, '_wholesomecode_wholesome_plugin_require_login', true );
if (! $login_required) {
return;
}
$wp_query->set_404();
status_header( 401 );
}
add_action( 'wp', 'wholesomecode_wholesome_plugin_require_login' );
Ce code renvoie simplement notre modèle 404 et un statut de 401 (non autorisé) si le basculement est défini sur vrai.
Jetons un coup d’œil aux commandes de la barre latérale de publication en action.
Contrôle des autorisations via la barre latérale de publication
Dans cet exemple, nous basculons le commutateur sur vrai, affichons notre page dans une nouvelle fenêtre de navigateur (déconnectée) et après une actualisation, voyons qu’elle renvoie la page 404, puis basculons-la sur faux, actualisons et voilà, la publication est à nouveau visible. Magie de Gutenberg !
- Jetez un œil à la création d’une barre latérale personnalisée autonome
- Découvrez comment créer des blocs enfants imbriqués avec le
InnerBlockscomposant - Jetez un œil à l’utilisation des champs post-méta dans les blocs Gutenberg (si vous ne l’avez pas déjà fait) et des boîtes méta personnalisées pilotées par les composants Gutenberg
- Jetez un œil à la création d’une page de paramètres avec les composants Gutenberg