Finora abbiamo dato un’occhiata alla barra laterale dei blocchi aggiungendo InspectorControlsai nostri blocchi personalizzati e aggiungendo controlli alla barra laterale dei blocchi principali e di terze parti con filtri e componenti di ordine superiore. In questa guida esamineremo l’aggiunta di controlli alla barra laterale del post.
Visualizza le impostazioni nella barra laterale del post
In questa guida creeremo un controllo "Impostazioni di visualizzazione" che consentirà solo agli utenti che hanno effettuato l’accesso di visualizzare il post quando attivato.
Prerequisiti
- Ho seguito la guida Creazione di un plug-in per l’editor di blocchi di WordPress (Gutenberg).
- Leggi le precedenti guide della barra laterale (barra laterale per un blocco personalizzato e barra laterale per un blocco esistente )
- Leggi la guida Utilizzo dei meta campi post per memorizzare gli attributi nella guida di WordPress Block Editor (Gutenberg).
Registrazione del Post Meta in PHP
Si prega di completare i passaggi nella guida alla creazione del plug -in per fornirci il nostro plug-in iniziale, lo espanderemo nella nostra guida.
Dopo aver fatto ciò, impostiamo il meta meta di cui abbiamo bisogno per le nostre autorizzazioni per attivare/disattivare il controllo. Apri il file root del plugin (nel nostro caso wholesome-plugin.php) e aggiungi il seguente codice:
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' );
Se hai dato un’occhiata alla guida ai meta campi dei post, dovrebbe sembrare un po ‘familiare. Tutto ciò che fa è consentire l’accesso al nostro post meta dall’interno dell’editor di blocchi (Gutenberg).
Nel tuo plugin crea una nuova cartella chiamata componentse crea il seguente file /components/Sidebar.js. In quel file incolla il seguente codice:
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>
);
}
}
L’ ToggleControlabbiamo visto prima nelle nostre precedenti guide della barra laterale, ma il pannello che stiamo utilizzando è leggermente nuovo. Usiamo PluginDocumentSettingPanelper identificare che questo controllo dovrebbe apparire nella barra laterale del post.
Nota inoltre che invece di inserire gli attributi, otteniamo i nostri metadati con il seguente codice:
const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];
e lo salviamo tramite il nostro onChangemetodo usando questo codice:
onChange={ (value) => {
dispatch( 'core/editor' ).editPost( {
meta: {
'_wholesomecode_wholesome_plugin_require_login': value,
},
} );
} }
Questo aggiorna il meta del post corrente. In realtà non verrà salvato fino a quando non salveremo il nostro post, quindi tutto il salvataggio viene gestito per noi.
C’è un’ultima cosa che dobbiamo fare con la nostra barra laterale dei post, ed è registrarla. Nella parte superiore del /src/index.jsfile aggiungi quanto segue:
import { registerPlugin } from '@wordpress/plugins';
import render from './components/Sidebar';
registerPlugin(
'wholesomecode-wholesome-plugin-sidebar',
{
icon: 'visibility',
render,
}
);
Dovremmo proprio pensare di modificare la struttura del nostro plugin in modo che il codice che registra il blocco venga importato da un altro file, ma per semplicità utilizzeremo lo stesso file.
Qui usiamo registerPluginper registrare la barra laterale. Passiamo nel componente Sidebar che abbiamo creato come metodo di "rendering", insieme a un’icona.
Aggiungi la logica Nascondi se disconnesso
Ancora una volta apri il file root del plugin (nel nostro caso wholesome-plugin.php) e inserisci il codice seguente. Ci sono modi molto migliori per farlo, ma lo tengo breve a scopo di esempio:
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' );
Questo codice restituisce semplicemente il nostro modello 404 e uno stato di 401 (non autorizzato) se Toggle è impostato su true.
Diamo un’occhiata ai controlli della barra laterale del post in azione.
Controllo delle autorizzazioni tramite la barra laterale del post
In questo esempio attiviamo l’interruttore su true, visualizziamo la nostra pagina in una nuova finestra del browser (disconnessa) e dopo un aggiornamento vediamo che restituisce la pagina 404, quindi lo attiviamo su false, refresh e voilà, il post è di nuovo visibile. Magia di Gutenberg!
- Dai un’occhiata alla creazione di una barra laterale personalizzata autonoma
- Dai un’occhiata alla creazione di blocchi figlio nidificati con il
InnerBlockscomponente - Dai un’occhiata all’utilizzo dei meta campi post nei blocchi Gutenberg (se non l’hai già fatto) e nelle meta box personalizzate guidate da componenti Gutenberg
- Dai un’occhiata alla creazione di una pagina delle impostazioni con i componenti Gutenberg