Przyjrzeliśmy się niestandardowym paskom bocznym bloku, paskom bocznym bloków innych firm za pośrednictwem InspectorControls oraz sposobom dodawania elementów sterujących do paska bocznego posta. W tym przewodniku przyjrzymy się umieszczeniu naszych kontrolek na ich własnym, niestandardowym pasku bocznym.
Nasz niestandardowy pasek boczny
Powyższy zrzut ekranu pokazuje, co zamierzamy zbudować. W większości przypadków zamierzamy tylko nieznacznie zmienić kod, który zbudowaliśmy w przewodniku po pasku bocznym Post, więc upewnij się, że najpierw ukończyłeś ten przewodnik.
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 )
- Postępowałem zgodnie z instrukcją Dodaj kontrolki do paska bocznego posta za pomocą przewodnika PluginDocumentSettingPanel
Użyjemy kodu z przewodnika po pasku bocznym Post, więc jeśli nie ukończyłeś tego przewodnika, zrób to. W porządku, poczekam.
Otwórz /components/Sidebar.jsplik utworzony w poprzednim przewodniku. Zastąpimy wiersz, który importuje PluginDocumentSettingPanelnastępujący kod:
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
Teraz zastąp znaczniki <PluginDocumentSettingPanel...i <PluginSidebar...gotowe! Prawidłowy?
Cóż, tak i nie. To daje nam pasek boczny, ale jest brzydki! Potrzebujemy kilku paneli, aby kontrolki były poprawnie sformatowane.
Brakuje również paska bocznego w menu „Opcje". Aby rozwiązać ten problem, musimy wdrożyć PluginSidebarMoreMenuItem.
Edytuj /components/Sidebar.jsponownie i wklej następujący 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>
);
}
}
To lepiej, użyliśmy dokładnie tego samego kodu, co w naszym poprzednim przykładzie paska bocznego posta, ale teraz wygląda to tak samo.
Teraz, gdy mamy już nasz kod, nie zapomnij go uruchomić npm start, aby go skompilować, a teraz powinien wyglądać następująco:
Nasz niestandardowy pasek boczny w akcji
Podobnie jak w naszym przewodniku po pasku bocznym wtyczek, przełączamy przełącznik wymaganego logowania, odświeżamy wylogowany post, wyłączamy go i odświeżamy ponownie. Po przełączeniu nie możemy uzyskać dostępu do wpisu.
Nazwa naszego paska bocznego to wholesomecode-wholesome-plugin-sidebar'. Jeśli chcemy, możemy automatycznie otwierać i zamykać ten pasek boczny z dowolnego miejsca w edytorze. Załóżmy, że mamy przycisk z akcją kliknięcia, który to robi.
Kod do dynamicznego otwierania paska bocznego jest następujący:
wp.data.dispatch('core/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );
Podobnie możemy dynamicznie zamknąć pasek boczny w następujący sposób:
wp.data.dispatch('core/edit-post').closeGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );
- 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