Looge PluginSidebar abil kohandatud külgriba

Viimati uuendatud nov. 9, 2022

Oleme vaadanud kohandatud plokkide külgribasid, kolmanda osapoole plokkide külgribasid InspectorControlsi kaudu ja seda, kuidas postituste külgribale juhtelemente lisada. Selles juhendis vaatleme oma juhtelementide paigutamist nende enda kohandatud külgribale.

Meie kohandatud külgriba

Ülaltoodud ekraanipilt näitab, mida me ehitame. Enamasti muudame lihtsalt postituse külgriba juhendis loodud koodi veidi, seega veenduge, et olete selle juhendi esmalt täitnud.

Eeldused

Olete järginud WordPressi plokiredaktori (Gutenbergi) pistikprogrammi loomise juhendit
Lugege eelmisi külgriba juhendeid (kohandatud ploki jaoks külgriba ja olemasoleva ploki jaoks külgriba )
Järginud PluginDocumentSettingPaneli juhendit Postituse külgribale juhtelementide lisamine

Kasutame postituse külgriba juhendi koodi, nii et kui te pole seda juhendit täitnud, tehke seda. Pole hullu, ma ootan.

Avage /components/Sidebar.jseelmises juhendis loodud fail. Asendame rea, mis impordib PluginDocumentSettingPanel, järgmise koodiga:

import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';

Nüüd asenda märgistus <PluginDocumentSettingPanel...ja <PluginSidebar...töö on tehtud! eks?

No jah ja ei. See annab meile külgriba, kuid see on kole! Vajame mõningaid paneele, et juhtnupud oleksid õigesti vormindatud.

Samuti puudub ‘Valikud’ menüüst külgriba. Selle lahendamiseks peame rakendama PluginSidebarMoreMenuItem.

Redigeerige /components/Sidebar.jsuuesti ja kleepige järgmine kood:

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>
        );
    }
}

See on parem, oleme kasutanud täpselt sama koodi nagu meie eelmise postituse külgriba näites, kuid nüüd näeb see osa välja.

Nüüd, kui meil on kood paigas, ärge unustage npm startselle kompileerimiseks käivitada ja see peaks nüüd välja nägema järgmine:

Meie kohandatud külgriba töös

Nagu meie pistikprogrammi külgriba juhendis, lülitame sisse logimise nõude lüliti, värskendame väljalogitud postitust, lülitame selle uuesti välja ja värskendame postitust uuesti. Kui see on sisse lülitatud, ei pääse me postitusele juurde.

Meie külgriba nimi on wholesomecode-wholesome-plugin-sidebar'. Soovi korral saame selle külgriba automaatselt avada ja sulgeda mujalt redaktoris. Oletame, et meil on klõpsamistoiminguga nupp, mis seda teeb.

Külgriba dünaamilise avamise kood on järgmine:

wp.data.dispatch('core/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );

Samamoodi saame külgriba dünaamiliselt sulgeda järgmiselt:

wp.data.dispatch('core/edit-post').closeGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );

Vaadake komponendiga pesastatud alamplokkide loomistInnerBlocks
Vaadake post-meta väljade kasutamist Gutenbergi plokkides (kui te pole seda veel teinud) ja Gutenbergi komponendipõhistes kohandatud metakastides
Vaadake Gutenbergi komponentidega seadete lehe loomist

: wholesomecode.ltd