Blog

  • Gutenberg 1.8

    Am 28.11.2017 wurde mit Gutenberg die 18. Beta Version des Plugins veröffentlicht. Diese kann zu Testzwecken über das offizielle Plugin Verzeichnis heruntergeladen werden.

    Die neue Version 1.8 bring einige Verbesserungen unter der Haube mit sich, um Plugins mehr Möglichkeiten zu bieten Gutenberg anzupassen. Dies betrifft zum einen die Erweiterung bestehender Blöcke, die Eingrenzung verfügbarer Blöcke oder die Einstellungsmöglichkeit von Meta-Boxen, ob sie unter Gutenberg erscheinen sollen. Eine weitere Interessante Funktion sind die Block Templates, die ich bereits in einem eigenen Artikel vorgestellt habe.

    Meta Box Kompatibilität

    Wenn eine Meta Box nicht mit Gutenberg funktioniert und der Entwickler kein Update liefern möchte oder kann, so kann er beim Initialisieren das __block_editor_compatible_meta_box Argument mit angeben.

    add_meta_box( 'my-meta-box', 'My Meta Box', 'my_meta_box_callback',
        null, 'normal', 'high',
        array(
            '__block_editor_compatible_meta_box' => false,
        )
    );

    Ist der Wert auf false gesetzt, so wird nicht der Gutenberg Editor geladen, sondern WordPress fällt auf den Classic Editor zurück und die Box funktioniert weiterhin.

    Wenn eine Meta Box in eine Blockfunktion umgewandelt wurde, so kann der Entwickler mit __back_compat_meta_box angeben, dass die Box nur im Classic Editor aber nicht unter Gutenberg angezeigt wird.

    add_meta_box( 'my-meta-box', 'My Meta Box', 'my_meta_box_callback',
        null, 'normal', 'high',
        array(
            '__back_compat_meta_box' => false,
        )
    );

    Weitere Infos zu den Meta Boxen findet ihr im Gutenberg Handbuch.

    Weitere Neuerungen

    Aber auch an der Benutzeroberfläche hat sich einiges getan. So worden einige Elemente nach User-Feedback verbessert und die Unterstützung auf mobilen Geräten verbessert. Beim Veröffentlichungs-Ablauf wurden die ersten Verbesserungen umgesetzt, weitere werde in den nächsten Versionen folgen.

    Ein heiß diskutiertes Thema sind die Textfarben und Hintergründe, die man selbst definieren kann. In dieser Version ist ein Kontrast-Checker hinzugekommen, der prüft ob die Texte mit den Farben gut lesbar sind und somit barrierefrei bleiben.

    Eine vollständige Übersicht der Änderungen gibt es im Make-Blog auf WordPress.org.

  • Block Templates

    Noch ist das Feature nicht in Gutenberg integriert, seit heute gibt es aber ein Proposal Ticket auf GitHub, das die Funktionen von Block Templates beschreibt und einige Beispiele aufzeigt.

    Definition

    Ein Block Template ist einfach gesagt eine Liste von Blöcken. Die Blöcke können vordefinierte Attribute und Platzhalter enthalten, sie können statisch oder dynamisch sein.

    Nutzung

    Block Templates sollten nicht mit globalen oder verschachtelten Blöcken verwechselt werden. Die Liste der Blöcke können aber globale Blöcke und auch verschachtelte Blöcke beinhalten. Hierbei geht es nicht darum ein Konfigurierte Gruppe von Blöcken auf verschiedenen Seiten wiederzuverwenden, dafür sind globale Blöcke, mit ineinander geschachtelten Blöcken die bessere Lösung.

    Bei Block Template  geht es darum eine Vorlage zu liefern, die vom Nutzer an verschiedenen Stellen ausgefüllt werden kann.

    Hier ein Beispiel wie Templates in Custom Post Types bereitgestellt werden können:

    function register_book_type() {
    	$args = array(
    		'public' => true,
    		'label'  => 'Books',
    		'show_in_rest' => true,
    		'template' => array(
    			array( 'core/image' ),
    			array( 'core/heading', array(
    				'placeholder' => 'Author...',
    			) ),
    			array( 'core/paragraph', array(
    				'placeholder' => 'Add book description...',
    			) ),
    		),
    	);
    	register_post_type( 'book', $args );
    }
    add_action( 'init', 'register_book_type' );

    Details

    Template können:

    • In JS (state tree) und PHP definiert werden
    • Blöcke mit Unterblöcken enthalten
    • Gesperrt sein (Es ist nicht möglich die Blöcke zu bewegen oder zu löschen)
    • Als Standard für einen Post Type gesetzt werden
    • Vom Benutzer gespeichert und bearbeitet werden
    • Als Inhalt eines page-template.php genutzt werden um den Editor von einem Theme aus zu initialisieren
  • Wie werden Blöcke gespeichert?

    Bisher wurde der Inhalt eines Beitrags oder einer Seite in die Tabelle wp_posts in der Spalte post_content gespeichert. Doch wie wird das nun gelöst, ist jeder Block ein eigener Datenbank Eintrag?

    Der Inhalt von Beiträgen und Seiten wird auch weiterhin komplett in der Spalte post_content in der wp_posts Tabelle abgespeichert. Dies verhindert zum einen das Zusätzliche Abfragen von Datenbankeinträgen, was Performance Einbusen bedeuten würde, zum anderen bietet diese Lösung die beste Abwärtskompatibilität mit den schon bestehenden Inhalten.

    Gutenberg Block edit flow
    Edit Flow

    Laden

    Wenn ein, aus mehreren Blöcken bestehender, Inhalt im Editor geladen wird, wird mit Hilfe eines Parsers der Text in die jeweiligen Blöcke aufgeteilt. In der Informatik nennt man diesen Schritt Serialisierung. Strukturierte Daten werden in eine Sequenzielle Darstellungsform abgebildet. Für die Strukturierung der Blöcke im Inhalt werden HTML Kommentare verwendet. Diese werden vom Parser interpretiert und und so eine geordnete Liste von Blöcken erstellt um den sogenannten Post State zu erzeugen.

    <!– wp:heading –>
    <h2>Eine Überschrift</h2>
    <!– /wp:heading –>

    <!– wp:paragraph –>
    <p>Hier steht Text</p>
    <!– /wp:paragraph –>

    Block API und Rendern

    Mit Hilfe der Block API werden die einzelnen Blöcke nun interpretiert und visuell dargestellt. Blöcke haben jeweils eine edit() Funktion, die beschreibt wie der Inhalt im Editor interpretiert werden soll. 

    Wenn sich Block Attribute oder Inhalte ändern, wird die Darstellung neu gerendert und die rechte Schlaufe des Diagrams einmal durchlaufen. Dies geschieht auch, wenn ein neuer Block hinzugefügt oder entfernt wird.

    Serialisieren und Speichern

    Wenn der Inhalt nun gespeichert wird, wird jeweils die save() Funktion eines jeden Blocks ausgeführt und eine HTML Darstellung erzeugt. Zusätzlich wird der HTML Kommentar um den Block gesetzt, um ihn beim nächsten Laden wieder interpretieren zu können. Im nächsten Schritt werden die Blöcke der Seite oder des Beitrags zusammengesetzt und wieder in die Spalte abgespeichert.