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 / Lokalisierungwp-api-request
um auf die REST-API zuzugreifenwp-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:
Schreibe einen Kommentar