Toistaiseksi olemme tarkastelleet lohkosivupalkkia lisäämällä InspectorControlsmukautettuja lohkojamme ja lisäämällä ohjaimia ydin- ja kolmannen osapuolen lohkosivupalkkiin suodattimilla ja korkeamman järjestyksen komponenteilla. Tässä oppaassa aiomme tarkastella säätimien lisäämistä viestien sivupalkkiin.
Näyttöasetukset Viestin sivupalkissa
Tässä oppaassa aiomme luoda "Näyttöasetukset"-säätimen, joka sallii vain kirjautuneiden käyttäjien tarkastella viestiä, kun se on kytketty päälle.
Edellytykset
- Olet noudattanut Pluginin luominen WordPress Block Editor (Gutenberg) -opasta
- Lue edelliset sivupalkkioppaat (sivupalkki mukautetulle lohkolle ja sivupalkki olemassa olevalle lohkolle )
- Lue WordPressin lohkoeditorin (Gutenberg) oppaan artikkeli Meta-kenttien käyttäminen attribuuttien tallentamiseen
Post Metan rekisteröinti PHP:ssä
Suorita laajennuksen luontioppaan vaiheet antaaksesi meille ensimmäinen laajennus. Laajennamme tätä oppaassamme.
Kun olet tehnyt tämän, määritetään julkaisun meta, jota tarvitsemme käyttöoikeuksien vaihtohallintaan. Avaa laajennuksen juuritiedosto (tapauksessamme wholesome-plugin.php) ja lisää seuraava koodi:
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' );
Jos olet katsonut postin metakenttien opasta, tämän pitäisi näyttää hieman tutulta. Se vain mahdollistaa viestimetaamme pääsyn lohkoeditorista (Gutenberg).
Luo laajennuksessasi uusi kansio nimeltä componentsja luo seuraava tiedosto /components/Sidebar.js. Liitä tiedostoon seuraava koodi:
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>
);
}
}
Olemme ToggleControlnähneet aiemmin aiemmissa sivupalkkioppaissamme, mutta käyttämämme paneeli on hieman uusi. Käytämme PluginDocumentSettingPaneltunnistamaan, että tämän ohjausobjektin pitäisi näkyä viestin sivupalkissa.
Huomaa myös, että määritteiden hakemisen sijaan saamme metatietomme seuraavalla koodilla:
const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];
ja tallennamme sen onChangemenetelmällämme käyttämällä tätä koodia:
onChange={ (value) => {
dispatch( 'core/editor' ).editPost( {
meta: {
'_wholesomecode_wholesome_plugin_require_login': value,
},
} );
} }
Tämä päivittää nykyisen viestin metasisällön. Se ei itse asiassa tallennu ennen kuin tallennamme viestimme, joten kaikki tallentaminen hoidetaan puolestamme.
Viimeinen asia, joka meidän on tehtävä viestisivupalkin kanssa, on rekisteröinti se. Lisää tiedoston yläosaan /src/index.jsseuraava:
import { registerPlugin } from '@wordpress/plugins';
import render from './components/Sidebar';
registerPlugin(
'wholesomecode-wholesome-plugin-sidebar',
{
icon: 'visibility',
render,
}
);
Meidän pitäisi todellakin harkita liitännäisrakenteen muuttamista niin, että lohkon rekisteröivä koodi tuodaan toisesta tiedostosta, mutta yksinkertaisuuden vuoksi käytämme samaa tiedostoa.
Täällä käytämme registerPluginsivupalkin rekisteröintiä. Ohjaamme sivupalkkikomponentin, jonka loimme "renderöinti" -menetelmänä, yhdessä kuvakkeen kanssa.
Lisää Piilota uloskirjautuneena -logiikka
Avaa vielä kerran laajennuksen juuritiedosto (tapauksessamme wholesome-plugin.php) ja pudota seuraava koodi. On olemassa paljon parempia tapoja tehdä tämä, mutta kirjoitan sen lyhyesti esimerkiksi tarkoituksia varten:
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' );
Tämä koodi yksinkertaisesti palauttaa 404-mallimme ja tilan 401 (luvaton), jos Toggle-asetus on tosi.
Katsotaanpa viestien sivupalkin säätimiä toiminnassa.
Käyttöoikeuksien hallinta Viestin sivupalkin kautta
Tässä esimerkissä vaihdamme kytkimen tosi, katsomme sivuamme uudessa (uloskirjautuneena) selainikkunassa ja näemme päivityksen jälkeen, että se palauttaa 404-sivun, sitten vaihdamme sen epätosi-tilaan, päivitä ja voilà, viesti on taas näkyvissä. Gutenbergin taikuutta!
- Tutustu itsenäisen mukautetun sivupalkin luomiseen
- Tutustu sisäkkäisten alilohkojen luomiseen
InnerBlockskomponentin avulla - Tutustu post-metakenttien käyttöön Gutenberg-lohkoissa (jos et jo ole) ja Gutenbergin komponenttiohjatuissa mukautetuissa metalaatikoissa
- Tutustu asetussivun luomiseen Gutenberg Componentsilla