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
);Code-Sprache: PHP (php)

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;Code-Sprache: JavaScript (javascript)

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 ) => {

});Code-Sprache: JavaScript (javascript)

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

});Code-Sprache: JavaScript (javascript)

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

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