Jak dotąd przyjrzeliśmy się blokowi bocznemu, dodając InspectorControlsnasze niestandardowe bloki i dodając kontrolki do głównego i zewnętrznego paska bocznego z filtrami i komponentami wyższego rzędu. W tym przewodniku przyjrzymy się dodawaniu kontrolek do paska bocznego posta.
Ustawienia wyświetlania na pasku bocznym posta
W tym przewodniku zamierzamy utworzyć kontrolkę „Ustawienia wyświetlania", która pozwoli tylko zalogowanym użytkownikom przeglądać posty po przełączeniu.
Warunki wstępne
- Postępowałem zgodnie z przewodnikiem Tworzenie wtyczki do edytora bloków WordPress (Gutenberg)
- Przeczytaj poprzednie przewodniki po pasku bocznym (pasek boczny dla bloku niestandardowego i pasek boczny dla istniejącego bloku )
- Przeczytaj przewodnik Używanie pól post meta do przechowywania atrybutów w edytorze bloków WordPress (Gutenberg)
Rejestracja Post Meta w PHP
Wykonaj kroki w przewodniku tworzenia wtyczek, aby dać nam naszą początkową wtyczkę, omówimy to w naszym przewodniku.
Po wykonaniu tej czynności skonfigurujmy meta postu, której potrzebujemy do kontroli przełączania naszych uprawnień. Otwórz plik główny wtyczki (w naszym przypadku wholesome-plugin.php) i dodaj następujący 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' );
Jeśli zajrzałeś do przewodnika po polach po meta, powinno to wyglądać trochę znajomo. Wszystko, co robi, to umożliwia dostęp do naszej meta postu z poziomu edytora bloków (Gutenberg).
W swojej wtyczce utwórz nowy folder o nazwie componentsi utwórz następujący plik /components/Sidebar.js. W tym pliku wklej następujący kod:
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>
);
}
}
Widzieliśmy ToggleControlwcześniej w naszych poprzednich przewodnikach po pasku bocznym, ale panel, którego używamy, jest nieco nowy. Używamy PluginDocumentSettingPaneldo określenia, że ta kontrolka powinna pojawić się na pasku bocznym posta.
Zauważ też, że zamiast wciągać atrybuty, otrzymujemy nasze metadane z następującym kodem:
const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];
i zapisujemy go za pomocą naszej onChangemetody za pomocą tego kodu:
onChange={ (value) => {
dispatch( 'core/editor' ).editPost( {
meta: {
'_wholesomecode_wholesome_plugin_require_login': value,
},
} );
} }
To aktualizuje meta bieżącego posta. W rzeczywistości nie zostanie zapisany, dopóki nie zapiszemy naszego posta, więc całe zapisywanie jest obsługiwane za nas.
Jest jeszcze jedna ostatnia rzecz, którą musimy zrobić z naszym paskiem bocznym posta, a mianowicie go zarejestrować. Na górze /src/index.jspliku dodaj następujące informacje:
import { registerPlugin } from '@wordpress/plugins';
import render from './components/Sidebar';
registerPlugin(
'wholesomecode-wholesome-plugin-sidebar',
{
icon: 'visibility',
render,
}
);
Powinniśmy naprawdę pomyśleć o zmianie struktury naszej wtyczki, aby kod rejestrujący blok był importowany z innego pliku, ale dla uproszczenia użyjemy tego samego pliku.
Tutaj używamy registerPlugindo zarejestrowania paska bocznego. Przekazujemy komponent Sidebar, który stworzyliśmy jako metodę „render” wraz z ikoną.
Dodaj logikę Ukryj, jeśli się wylogujesz
Ponownie otwórz plik główny wtyczki (w naszym przypadku wholesome-plugin.php) i wrzuć następujący kod. Są na to o wiele lepsze sposoby, ale piszę krótko na przykład:
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' );
Ten kod po prostu zwraca nasz szablon 404 i stan 401 (Nieautoryzowany), jeśli przełącznik jest ustawiony na wartość prawda.
Przyjrzyjmy się działającym kontrolkom paska bocznego posta.
Kontrolowanie uprawnień za pomocą paska bocznego postu
W tym przykładzie przełączamy przełącznik na true, wyświetlamy naszą stronę w nowym (wylogowanym) oknie przeglądarki i po odświeżeniu widzimy, że zwraca stronę 404, następnie przełączamy ją na false, odświeżanie i voila, post jest ponownie widoczny. Magia Gutenberga!
- Spójrz na tworzenie samodzielnego niestandardowego paska bocznego
- Spójrz na tworzenie zagnieżdżonych bloków podrzędnych za pomocą
InnerBlockskomponentu - Spójrz na użycie post meta pól w blokach Gutenberga (jeśli jeszcze tego nie zrobiłeś) i Gutenberg Component Driven Custom Meta Boxes
- Spójrz na tworzenie strony ustawień za pomocą komponentów Gutenberg