Hittills har vi tagit en titt på sidofältet för block genom att lägga InspectorControlstill våra anpassade block och lägga till kontroller till kärn- och tredjepartsblocksidofältet med filter och högre ordningskomponenter. I den här guiden ska vi titta på hur vi lägger till kontroller i sidofältet.
Visa inställningar i postsidofältet
I den här guiden kommer vi att skapa en "Visningsinställningar"-kontroll som endast tillåter inloggade användare att se inlägget när de växlas.
Förutsättningar
- Har följt guiden Skapa ett plugin för WordPress Block Editor (Gutenberg) .
- Läs de tidigare sidofältsguiderna (sidofält för ett anpassat block och sidofält för ett befintligt block )
- Läs Använda inläggsmetafält för att lagra attribut i guiden WordPress Block Editor (Gutenberg).
Registrera Post Meta i PHP
Vänligen slutför stegen i guiden skapa plugin för att ge oss vårt första plugin, vi kommer att utöka om detta i vår guide.
När du har gjort detta, låt oss ställa in postmeta som vi behöver för vår behörighetsväxlingskontroll. Öppna rotfilen för plugin-programmet (i vårt fall wholesome-plugin.php) och lägg till följande kod:
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' );
Om du har tagit en titt på guiden för inläggsmetafält bör detta se lite bekant ut. Allt det gör är att det gör att vår postmeta kan nås från blockredigeraren (Gutenberg).
Skapa en ny mapp i ditt plugin som heter componentsoch skapa följande fil /components/Sidebar.js. Klistra in följande kod i den filen:
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>
);
}
}
De ToggleControlvi har sett tidigare i våra tidigare sidofältsguider, men panelen vi använder är något ny. Vi använder PluginDocumentSettingPanelför att identifiera att denna kontroll ska visas i inläggets sidofält.
Observera också att istället för att dra in attribut får vi vår metadata med följande kod:
const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];
och vi sparar det via vår onChangemetod med denna kod:
onChange={ (value) => {
dispatch( 'core/editor' ).editPost( {
meta: {
'_wholesomecode_wholesome_plugin_require_login': value,
},
} );
} }
Detta uppdaterar metan för det aktuella inlägget. Det kommer faktiskt inte att sparas förrän vi sparar vårt inlägg, så all besparing hanteras åt oss.
Det finns en sista sak vi behöver göra med vår post sidofält, och det är att registrera den. Lägg till följande högst upp i /src/index.jsfilen:
import { registerPlugin } from '@wordpress/plugins';
import render from './components/Sidebar';
registerPlugin(
'wholesomecode-wholesome-plugin-sidebar',
{
icon: 'visibility',
render,
}
);
Vi borde verkligen tänka på att ändra strukturen på vårt plugin så att koden som registrerar blocket importeras från en annan fil, men för enkelhetens skull kommer vi att använda samma fil.
Här använder vi registerPluginför att registrera sidofältet. Vi skickar in Sidebar-komponenten som vi skapade som ’render’-metoden, tillsammans med en ikon.
Lägg till logiken Göm om utloggad
Öppna återigen rotfilen för plugin-programmet (i vårt fall wholesome-plugin.php) och släpp in följande kod. Det finns mycket bättre sätt att göra detta, men jag håller det kort för exempel:
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' );
Den här koden returnerar helt enkelt vår 404-mall och statusen 401 (Obehörig) om växlingen är inställd på sant.
Låt oss ta en titt på postsidofältets kontroller i aktion.
Styra behörigheter via Post Sidebar
I det här exemplet växlar vi omkopplaren till sant, tittar på vår sida i ett nytt (utloggat) webbläsarfönster och efter en uppdatering ser vi att den returnerar 404-sidan, växlar den sedan till false, refresh och voilà, inlägget är synligt igen. Gutenberg magi!
- Ta en titt på att skapa ett fristående anpassat sidofält
- Ta en titt på att skapa kapslade underordnade block med
InnerBlockskomponenten - Ta en titt på hur du använder postmetafält i Gutenberg-block (om du inte redan har gjort det) och Gutenberg Component Driven Custom Meta Boxes
- Ta en titt på att skapa en inställningssida med Gutenberg Components