Redux | React

Um die Daten vom Editor zu speichern, verwendet WordPress nun Redux, ein Framework für React. Dort sind die sogenannten "States" alles abgespeichert.

Browser Entwickler Tool

Falls du Gutenberg Entwickler bist, dann kann ich dir wärmstens das Chrome bzw. Firefox Plugin weiterempfehlen. Dort kannst du zugleich alle States herauslesen und manipulieren.

Hier sind die Links: Google Chrome Plugin Firefox Plugin

Dispatch | Einfaches Beispiel mit wp.data

Das Package "wp.data" wird standardmäßig von Gutenberg mitgeliefert. Dort findest du viele weitere Funktionen, um die Aktionen von Gutenberg zu managen.

Gutenberg Sidebar zuklappen mittels React

Als erstes importieren wir uns die Funktion dispatch von dem Package "wp.data".

import { dispatch } from '@wordpress/data';

Mit dieser Funktion können wir die States verändern bzw. manipulieren.

<Button onClick={ ( event ) => {  dispatch('core/edit-post').closeGeneralSidebar()  }   }>
    Sidebar schließen
</Button>

Von der Konsole aus kann man dieses Script verwenden: wp.data.dispatch('core/edit-post').openGeneralSidebar();

Gutenberg Sidebar aufklappen mittels React

<Button onClick={ ( event ) => {  dispatch('core/edit-post').openGeneralSidebar('edit-post/document')  }   }>
    Sidebar öffnen
</Button>

Von der Konsole aus kann man dieses Script verwenden:

wp.data.dispatch('core/edit-post').openGeneralSidebar('edit-post/document')

Weitere tolle Hooks findest du hier: https://github.com/WordPress/gutenberg/tree/master/packages/edit-post

Withstate | React State Funktion

In React wird in einem Class Component ein State Objekt geschrieben mit Zuweisungen. Diese dienen als Default zum Arbeiten. Beispiel: HeadlineActive: false

WordPress bietet diese Funktion auch direkt im Core an und diese heißt WithState. Die Schreibweise ist etwas seltsam, aber zum effektiven Arbeiten lohnt sich dies. Ich persönlich arbeite direkt mit den internen WordPress Attributen. Diese sind in meiner Meinung nach effektiver, weil WordPress ständig Revisionen machen und alle Eingaben direkt speichert. Dies kann natürlich auf Zeit so einigen Datenmüll erzeugen. Aber dafür gibt es gute WordPress Cleaning Tools. Aber dafür freuen sich die User, falls der PC ausging oder der Browser abstürzt die geschriebenen Inhalte immer noch da sind. Hier ein Beispiel mit WithSate:

import { CheckboxControl } from '@wordpress/components';
import { withState } from '@wordpress/compose';
 
const MyCheckboxControl = withState( {
    isChecked: true,
} )( ( { isChecked, setState } ) => (
    <CheckboxControl
        heading="User"
        label="Is author"
        help="Is the user a author or not?"
        checked={ isChecked }
        onChange={ ( isChecked ) => { setState( { isChecked } ) } }
    />
) );