Kategorien
JavaScript Plugins

React im Frontend eines Gutenberg Blocks verwenden

Gutenberg und die Gutenberg Blöcke verwenden im Backend React zum Rendern des Editors. Im Frontend hingegen, wird meist auf jQuery gesetzt.

Wir können React aber auch im Frontend der Seite nutzen und dabei sogar Elemente aus dem Backend wiederverwenden.

React im Frontend laden

Zuerst müssen wir unser JavaScript im frontend laden und die WordPress React Library [ 'wp-element'] als Dependencies benennen.

$frontend_js_path = "/assets/js/filters.frontend.js";
wp_enqueue_script( 
	"gutenberg-code-highlighter-frontend",
	_get_plugin_url() . $frontend_js_path,
	[ 'wp-element'],
	filemtime( _get_plugin_directory() . $frontend_js_path ),
	true
);

Dadurch können wir in unserem JavaScript Code über wp.element auf die Element Library von WordPress zugreifen. Diese ist einen Wrapper für die eigentliche React Library.

Sofern wir auf weitere Libraries im Frontend zugreifen möchten, können wir diese ebenfalls in den Dependencies aufführen.

Das könnten z.B. sein:

  • wp-i18n für die Übersetztung / Lokalisierung
  • wp-api-request um auf die REST-API zuzugreifen
  • wp-components zum wiederverwenden von Gutenberg Components

React in unserem Code laden

In unserem Frontend JavaScript Code laden wir zuerst die render Funktion von React

const { render } = wp.element;

Anschließend durchsuchen wir die Seite nach unseren Blöcken – wir möchten in diesem Beispiel den core/code Block modifizieren – und erstellen einen Loop.

const codeElements = document.querySelectorAll( ".derweili-gutenberg-code-highlighter" );

codeElements.forEach( ( codeElement, index ) => {

});

Innerhalb des Loops nutzen wir die render Funktion um einen React Component an der Stelle des Blocks zu laden.

Im Gesamten sieht das dann so aus:

const { render } = wp.element;

import Highlight from 'react-highlight.js'


const codeElements = document.querySelectorAll( ".derweili-gutenberg-code-highlighter" );

codeElements.forEach( ( codeElement, index ) => {
    
    const language = codeElement.dataset.language;
    const code = codeElement.getElementsByTagName( 'pre' )[0].childNodes[0].innerText;

    render(
        <Highlight language={language}>
            {code}
        </Highlight>,
        codeElement
    );

});

Verwendet habe ich das in meinem Syntax Highlighter Plugin das Ihr auf Github finden könnt:

https://github.com/derweili/gutenberg-code-highlighter/

Kategorien
Gutenberg Plugins

Mein neues Plugin: Block Layouts

Nachdem ich jetzt schon seit 1,5 Jahren mit den Gutenberg Editor arbeite, ist mir aufgefallen, dass ich immer wieder die selben Blöcke, in der selben Kombination verwende, es aber keine Möglichkeit gibt, diese Layouts wiederzuverwenden. Klar, gibt es die „wiederverwendbaren Blöcke“, ich möchte aber nicht immer den selben Inhalt, sondern nur die selben Elemente verwenden.

Aus anderen Programmen kenne ich solche Funktionen. In PowerPoint gibt es die Masterfolien und in InDesign gibt es die Musterseiten

Ich machte mich also auf die Suche, nach einer ähnlichen Funktion im Gutenberg Editor und bin auf die Funktion der Block-Templates gestoßen.

Block Templates

Mit Block Templates kann ich als Plugin Entwickler festlegen, welche Blöcke ein Beitrag haben soll, wenn der Nutzer einen neuen Post erstellt.

Das ist schonmal eine tolle Sache und bei einigen Plugins habe ich das auch schon gesehen, z. B. beim The Events Calendar Plugin. Wenn du wissen möchtest, wie man diese Block Template erstellt, findest du im Blog von Florian Brinkmann eine tolle Anleitung.

Leider sind die Block Templates nicht ganz das wonach ich suchte, denn sie haben ein paar Nachteile:

  • Sie sind Post-Type Spezifisch
  • Sie können nicht über das WordPress Backend verwaltet werden
  • Für jeden Post-Type kann nur ein Template definiert werden.

Ich suchte weiter, fand aber keine bestehende Lösung, die meine Anforderungen erfüllte. Daher entschied ich mich, meine eigene Lösung zu entwickeln.

Herausgekommen ist mein neues Plugin:

Block Layouts

Das Block Layouts Plugin bietet dir die möglichkeit über das WordPress Backend eigene Layouts (Tempaltes) zu definieren und diese für alle Inhaltstypen wiederzuverwenden.

Du kannst eine beliebige Anzahl an Layouts erstellen. Beim Anlegen einer neuen Seite oder Beitrag kannst du aus den Layouts wählen.

Layouts erstellen

Nachdem du das Plugin installiert und aktiviert hast, findest du im Menü den Menüpunkt „Block Layouts“. Dort findest du alle vorhandenen Layouts. Über den „Erstellen Button“ kannst du neue Layouts erstellen.

Die Layouts kannst du einfach über den Gutenberg Editor bearbeiten.

Wenn du Bereiche für Bilder oder Videos festlegst, empfehle ich nur den jeweiligen Block einzubauen, und noch kein Bild oder Video auszuwählen. Das erzeug später eine Ähnliche Funktionalität wie wir sie von den PowerPoint Masterfolien kennen.

Bevor du das Block Layout veröffentlichst, solltest du noch ein Beitragsbild auswählen. Dieses Beitrags Bild ist genauso wie die Block Layouts nicht öffentlich sichtbar, es dient dir aber zur schnelleren Wiedererkennung des Layouts. Am Besten nimmst du dafür ein Icon.

Wenn du also ein Layout für einen Rezept erstellst, kannst du ein Icon verwenden, das Messer und Gabel zeigt. Wenn du ein Musikreview Template erstellst, nimm doch einfach Noten.

Layouts verwenden

Um Layouts jetzt verwenden, erstellst du einfach eine neue Seite oder einen neuen Beitrag. Im daraufhin erscheinenden Edit-Screen öffnet sich ein Modal in dem du das Template auswählen kannst.

Wähle das Template das du verwenden möchtest aus und starte mit der Bearbeitung deines Beitrags.

Block Layouts später zuweisen oder ändern

Um das verwendete Layout später zu ändern oder um ein anderes Layout zuzuweisen, gibt es die Block Layouts Sidebar.

Diese findest du im Optionen Menü (Icon mit den drei Punkten)

Die Block Layouts Sidebar

In dieser Sidebar findest du alle verfügbaren Layouts. Bei Klick auf ein der Layouts wird dieses auf die aktuelle Seite angewendet.

Achtung: dein gesamter Beitrag wird dadurch überschrieben.