Olemme tarkastelleet mukautettuja lohkosivupalkkeja, kolmannen osapuolen lohkosivupalkkeja InspectorControlsin kautta ja ohjaimien lisäämistä viestien sivupalkkiin. Tässä oppaassa tarkastelemme säätimien sijoittamista heidän omaan mukautuneeseen sivupalkkiin.
Mukautettu sivupalkkimme
Yllä oleva kuvakaappaus näyttää, mitä aiomme rakentaa. Suurimmaksi osaksi aiomme vain muuttaa hieman Post Sidebar -oppaassa luomaamme koodia, joten varmista, että olet täyttänyt oppaan ensin.
Edellytykset
- Olet noudattanut Pluginin luominen WordPress Block Editor (Gutenberg) -opasta
- Lue edelliset sivupalkkioppaat (sivupalkki mukautetulle lohkolle ja sivupalkki olemassa olevalle lohkolle )
- Olet noudattanut Ohjainten lisääminen viestien sivupalkkiin PluginDocumentSettingPanel- oppaan avulla
Käytämme koodia Viestin sivupalkin oppaasta, joten jos et ole täyttänyt opasta, tee se. Ei hätää, odotan.
Avaa /components/Sidebar.jsedellisessä oppaassa luomasi tiedosto. Aiomme korvata rivin, joka tuo PluginDocumentSettingPanelkoodin, seuraavalla koodilla:
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
Vaihda nyt merkintä <PluginDocumentSettingPanel...ja <PluginSidebar...työ tehty! Eikö?
No kyllä ja ei. Se antaa meille sivupalkin, mutta se on ruma! Tarvitsemme joitain paneeleja, jotta säätimet muotoillaan oikein.
Myös sivupalkki puuttuu "Asetukset"-valikosta. Tämän ratkaisemiseksi meidän on toteutettava PluginSidebarMoreMenuItem.
Muokkaa /components/Sidebar.jsuudelleen ja liitä seuraava koodi:
import { Panel, PanelBody, ToggleControl } from '@wordpress/components';
import { dispatch, select } from '@wordpress/data';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
import { Component, Fragment } 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 (<Fragment>
<PluginSidebarMoreMenuItem target="wholesomecode-wholesome-plugin-sidebar">
{ __( 'Display Settings', 'wholesome-plugin') }
</PluginSidebarMoreMenuItem>
<PluginSidebar
name="wholesomecode-wholesome-plugin-sidebar"
title={ __( 'Display Settings', 'wholesome-plugin') }
>
<Panel>
<PanelBody
title={ __( 'Display Settings', 'wholesome-plugin') }
icon="visibility"
>
<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,
},
} );
this.setState( { exampleToggle: value } );
} }
/>
</PanelBody>
</Panel>
</PluginSidebar>
</Fragment>
);
}
}
Se on parempi, olemme käyttäneet täsmälleen samaa koodia kuin edellisessä viestisivupalkin esimerkissä, mutta nyt se näyttää siltä.
Nyt kun meillä on koodimme paikallaan, älä unohda suorittaa npm startsen kääntämistä, ja sen pitäisi nyt näyttää seuraavalta:
Mukautettu sivupalkkimme toiminnassa
Kuten liitännäisen sivupalkin oppaassamme, vaihdamme sisäänkirjautumisen vaatimuksen kytkintä, päivitämme uloskirjautuneen viestin, poistamme sen käytöstä ja päivitämme viestin uudelleen. Kun se on päällä, emme voi käyttää viestiä.
Sivupalkin nimi on wholesomecode-wholesome-plugin-sidebar'. Halutessasi voimme avata ja sulkea tämän sivupalkin automaattisesti muualta editorissa. Oletetaan, että meillä on napsautustoiminnolla varustettu painike, joka tekee tämän.
Koodi sivupalkin dynaamiseen avaamiseen on seuraava:
wp.data.dispatch('core/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );
Samoin voimme sulkea sivupalkin dynaamisesti seuraavasti:
wp.data.dispatch('core/edit-post').closeGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );