Skapa ett anpassat sidofält med PluginSidebar

Senaste uppdateringen nov 9, 2022

Vi har tagit en titt på anpassade blocksidofält, blockeringssidofält från tredje part via InspectorControls och hur man lägger till kontroller i postsidofältet. I den här guiden ska vi titta på hur vi placerar våra kontroller i deras helt egna anpassade sidofält.

Vår anpassade sidofält

Skärmdumpen ovan visar vad vi ska bygga. För det mesta kommer vi bara att ändra koden som vi byggde i Post Sidebar-guiden något, så se till att du har slutfört den guiden först.

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 )
Har följt guiden Lägg till kontroller till Post Sidebar med PluginDocumentSettingPanel

Vi kommer att använda koden från Post Sidebar-guiden, så om du inte har slutfört den guiden, vänligen gör det. Det är okej, jag väntar.

Öppna /components/Sidebar.jsfilen som du skapade i föregående guide. Vi kommer att ersätta raden som importerar PluginDocumentSettingPanelmed följande kod:

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

Byt nu ut markeringen <PluginDocumentSettingPanel...med <PluginSidebar...och jobbet gjort! Höger?

Tja, ja och nej. Det ger oss en sidofält, men det är fult! Vi behöver några paneler så att kontrollerna formateras korrekt.

Även sidofältet saknas i menyn "Alternativ". För att lösa detta måste vi implementera PluginSidebarMoreMenuItem.

Redigera /components/Sidebar.jsigen och klistra in följande kod:

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

Det är bättre, vi har använt exakt samma kod som i vårt tidigare sidofältsexempel, men nu ser det ut som en del.

Nu när vi har vår kod på plats, glöm inte att köra npm startför att kompilera den, och den ska nu se ut så här:

Vår anpassade sidofält i aktion

Som i vår guide för plugin-sidofältet byter vi växeln kräver inloggning, uppdaterar ett utloggat inlägg, stänger av det igen och uppdaterar inlägget igen. När den är aktiverad kan vi inte komma åt inlägget.

Namnet på vår sidofält är wholesomecode-wholesome-plugin-sidebar'. Om vi vill kan vi automatiskt öppna och stänga sidofältet från någon annanstans i editorn. Låt oss säga att vi har en knapp med en klickåtgärd som gör detta.

Koden för att öppna sidofältet dynamiskt är följande:

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

På samma sätt kan vi stänga sidofältet dynamiskt så här:

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

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

Inspelningskälla: wholesomecode.ltd