WordPress Gutenberg: Reaktionskomponenten am Frontend

Lesezeit: 9 Minuten

Benutzeravatar von iskotaa
iskotaa

Gutenberg ist noch ziemlich neu, aber ich hoffe immer noch, dass jemand auf dieses Problem gestoßen ist und eine Lösung gefunden hat.

Ich habe create-guten-block verwendet, um ein Projekt zu modellieren und einen Testblock zu erstellen. Das Problem, auf das ich stoße, ist, dass nichts passiert, wenn ich versuche, eine React-Komponente zu verwenden, um den Status am Front-End zu ändern. Die Komponenten werden problemlos durch save() geladen, aber wenn Sie versuchen, etwas Einfaches wie das Umschalten einer Liste zu tun, reagiert das Frontend nicht auf die Statusänderungen. Ich werde auch bemerken, dass create-guten-block kein Front-End-JS lädt, also habe ich das kompilierte Javascript ausgetauscht, um es auf dem Front-End zu laden, und konnte es immer noch nicht zum Laufen bringen.

Hier ist ein Code, den ich von Codecademy als einfaches Beispiel zum Testen gezogen habe. Wenn Sie einen Namen auswählen, wird der Text in sibling.js geändert, um den Namen anzuzeigen. Der Code funktioniert gut in create-react-app, macht aber nichts am Frontend als Block in Gutenberg:

block.js

import { Parent } from './parent';

// More code here 

save: function( props ) {
    return (
          <div>
              <Parent />
          </div>
     );
 },

parent.js

import React from 'react';
import { Child } from './child';
import { Sibling } from './sibling';

export class Parent extends React.Component {
    constructor(props) {
        super(props);

        this.state = { name: 'Frarthur' };

        this.changeName = this.changeName.bind(this);
    }

    changeName(newName) {
        this.setState({
        name: newName
        });
    }

    render() {
        return (
        <div>
            <Child onChange={this.changeName} />
            <Sibling name={this.state.name} />
        </div>
        );
    }
};

kind.js

import React from 'react';

export class Child extends React.Component {
    constructor(props) {
        super(props);

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        const name = e.target.value;
        this.props.onChange(name);
    }

    render() {
        return (
        <div>
            <select
            id="great-names"
            onChange={this.handleChange}>

                <option value="Frarthur">Frarthur</option>
                <option value="Gromulus">Gromulus</option>
                <option value="Thinkpiece">Thinkpiece</option>
            </select>
        </div>
        );
    }
}

geschwister.js

import React from 'react';

export class Sibling extends React.Component {
    render() {
        const name = this.props.name;
        return (
        <div>
            <h1>Hey, my name is {name}!</h1>
            <h2>Don't you think {name} is the prettiest name ever?</h2>
            <h2>Sure am glad that my parents picked {name}!</h2>
        </div>
        );
    }
}

Benutzeravatar von snnsnn
snnsnn

Gutenberg ist großartig, kann aber nicht dasselbe für seine Dokumentation sagen. Es ist wie jede andere WordPress-Dokumentation viel zu ausführlich und schlecht organisiert und geschwätzig. Ich denke, es kommt auf das Gebiet und die Zielgruppe an.

Es hat einige Zeit gedauert, bis ich das Handbuch durchgegangen bin, um zu verstehen, was Blöcke sind. Ressourcen sind knapp und die Leute verwechseln normalerweise Blöcke mit ihrer visuellen Darstellung auf dem Bildschirm im Editor.

Beginnen wir damit, was Gutenberg-Blöcke sind. Gutenberg-Blöcke sind anmutige Shortcodes wie dieser:

<!-- wp:paragraph {"key": "value"} -->
<p>Welcome to the world of blocks.</p>
<!-- /wp:paragraph -->

Diese Shortcodes werden vom Editor zur visuellen Darstellung in Reaktionskomponenten gerendert.

Erinnere dich an Shortcodes wie diesen hier, die durch das tinymce-Plugin in eine visuelle Darstellung gerendert werden könnten, und Sie würden eine vollständig geformte und funktionierende Galerie im Editorfenster sehen. Die Idee ist die gleiche, nur diesmal rendert der Gutenberg-Editor leicht unterschiedliche Shortcodes in eine visuelle Darstellung.

Nun entsteht die Verwirrung, weil WordPress-Dokumente diese visuellen Darstellungen auch als Blöcke ansprechen. Aber die Quelle der Wahrheit für den gesamten Rendering-Serialisierungs-Parsing-Re-Rendering-Zyklus ist eine, und das sind diese sogenannten “anmutigen Shortcodes”, der Rest sind verschiedene Formen und Darstellungen, die diese Shortcodes annehmen. Angenommen, im Kontext des Editors handelt es sich um eine gerenderte Reaktionskomponente, am Frontend handelt es sich nur um normales HTML.

Es ist das Rückgabeelement von edit Funktion, die bestimmt, wie ein Block im Editorfenster angezeigt wird:

<!-- language: lang-js -->
registerBlockType(«NAMESPACE/BLOCK_NAME», {
    edit: function(props){
        // Should return a react element
    }
})

Es ist von größter Bedeutung, den Lebenszyklus eines Blocks zu verstehen, um ihn besser zu verstehen. Fangen wir von vorne an:

Wenn Sie im Komponentenbereich auf ein Blocksymbol klicken, wird zurückgegeben save Funktion wird gerendert und serialisiert und in die Seite eingefügt.

<!-- language: lang-js -->
registerBlockType("NAMESPACE/BLOCK_NAME", {
    save: function(props){
       // Should return a react element
    }
})

save Die Funktion sollte ein React-Element zurückgeben, dieses Element wird von React and gerendert serialisiert vom Blockserialisierer und in den Beitragsinhalt als eingefügt Block. Du kannst nachschauen serializer.js für die Serialisierung des React-Elements in einen Block1.

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://stackoverflow.com/questions/51771125/source.jpg" alt="" /></figure>
<!-- /wp:image -->

Wenn es sich um einen dynamischen Block handelt, save Funktion wird zurückkehren null, also wird es keinen Inhalt geben. Block sieht in etwa so aus:

<!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true} /-->

Beachten Sie den selbstschließenden Kommentar:

Im blockiert Grammatikder erste wird als statischer Block (_Block_Balanced_) und der zweite als dynamischer Block (_Block_Void_) bezeichnet.

Es ist wichtig sich das zu merken Statische Blöcke enthalten gerenderten Inhalt und ein Objekt mit Attributen. Für dynamische Blöcke render_callback versorgt werden soll register_block_type Funktion während der Blockregistrierung.

Also, wann the_content angefordert wird, bekommt der Server the_content und durchläuft mehrere Filter bevor Sie auf die Anfrage antworten.

Während dieser Phase werden Attribute von statischen Blöcken entfernt und Inhalte zurückgegeben, da statische Blöcke ihren Inhalt bereits in sich selbst haben. Für dynamische Blöcke wird render_callback aufgerufen und sein Rückgabewert wird als Blockinhalt zurückgegeben. Das meinen sie damit irgendwie voll isomorph3 in der Dokumentation. Sie können auschecken render_block Funktion im WordPress-Kern.

Wenn Sie den Block über die visuellen Elemente von Gutenberg bearbeiten, durchläuft der Block erneut den Reserialisierungsprozess und eine neue visuelle Darstellung wird basierend auf den von Ihnen vorgenommenen Änderungen auf die Seite gezeichnet.

<!-- wp:paragraph {"key": "value"} -->
<p>Welcome to the world of blocks.</p>
<!-- /wp:paragraph -->

Sobald Sie auf die Schaltfläche „Veröffentlichen“ klicken, werden diese serialisierten Daten oder Zeilendaten, wie in der Dokumentation angegeben, in der Datenbank gespeichert.

Angenommen, Sie schließen die Seite nach dem Speichern. Wenn Sie es das nächste Mal öffnen, wird der gespeicherte Block vom Blockparser analysiert und die visuelle Darstellung wird auf die Seite gezeichnet. Sie können sich den Parser ansehen2.

Während des Parsens wird das Block-Markup anhand der validiert save Funktion. Wenn Sie die Rückgabe geändert haben save Funktion zwischen zwei Bearbeitungen wird zuvor gespeichertes Block-Markup ungültig oder veraltet. Sie können veralteten Code aktualisieren, indem Sie den Upgrade-Pfad in Ihrer Blockierungseinstellung angeben registerBlockType. Allerdings ändern Sie die edit Funktion ohne Rückwirkungen, da sie steuert, wie Blöcke auf dem Editor-Bildschirm erscheinen.

Der Upgrade-Pfad ist nur ein Array von Objekten mit Funktionen und Eigenschaften. Veraltete Blöcke werden von jedem Element in diesem Array basierend auf der Priorität überprüft und migriert, wenn der Block mit der neuen Version kompatibel ist, wenn nicht, wird die alte Version zurückgegeben.

Kommen wir nun zu Ihrer Frage, wenn eine Seite auf dem Front-End-Server Ihnen eine vollständig geformte HTML-Datei sendet. Auf der Vorderseite erhalten Sie also statisches HTML, kein Reaktionselement.

Also in Wirklichkeit save Die Funktion hat nichts mit dem Frontend zu tun, außer dem Erstellen von statischem HTML, das in Blockkommentare eingeschlossen ist <!-- wp:image --><!-- /wp:image -->, was beim Bearbeiten von Inhalten passiert. Es wird beim Servieren niemals ausgeführt oder konsultiert the_content am vorderen Ende.

Um Interaktivität hinzuzufügen, müssen Sie Code schreiben, der speziell auf das Frontend abzielt, genau wie Sie es vor Gutenberg getan haben.

Du kannst sehen the_content im Klartext durch Umschalten auf Code-Editor im Editorfenster mit Weitere Tools und Optionen Schaltfläche, vertikale Ellipsen daneben aktualisieren Taste.

Aus der Frontend-Perspektive macht es keinen Unterschied, ob Sie beim Erstellen den Tinymce-Editor oder den Gutenberg-Editor oder einfaches HTML verwenden the_content.

Es liegt an Ihnen, eine andere Javascript-Datei einzureihen oder diejenige zu verwenden, über die Sie sich in die Warteschlange eingereiht haben enqueue_block_assets beim Registrieren Block.

Um React zu verwenden, müssen Sie Ihre Komponente mit ReactDOM in das Dokument einbinden. Das Gute ist, dass Wordpess React und ReactDOM bereits im globalen Raum bereitstellt, aber Sie müssen die Abhängigkeit angeben, wenn Sie das Skript in die Warteschlange stellen.

  • Entschuldigung, dass es so lange gedauert hat, dies als die beste Antwort zu markieren. Danke, dass Sie so gründlich sind!

    – iskotaa

    27. November 2019 um 22:18 Uhr

  • Können Sie ein Beispiel geben, wie Sie die Komponente mit ReactDOM in ein Dokument einbinden? Ich habe ein ähnliches Problem, bei dem ich in der Speichermethode React verwenden und Ereignisse wie onClick abfangen möchte.

    – Ognian

    2. Dezember 2019 um 8:09 Uhr

  • @Ognyan Sicher. const element =

    Hallo Welt

    ; ReactDOM.render(element, document.getElementById(‘root’)); Stellen Sie sicher, dass Sie ein Element mit dem Attribut id als ‘root’ in Ihrer HTML-Datei haben. Eine ausführlichere Erklärung finden Sie hier respondjs.org/docs/rendering-elements.html. Wenn Sie gutenberg wie gewohnt mit WordPress verwenden, ist Reagieren möglicherweise keine gute Idee.

    – snnsnn

    2. Dezember 2019 um 9:19 Uhr


  • @SnnSnn das sollte in die eingefügt werden save Funktion ? Ich muss Ereignisse im Frontend abfangen (wo Benutzer auf eine Schaltfläche klicken sollten), nicht im Editor!

    – Ognian

    2. Dezember 2019 um 9:22 Uhr

  • @Ognyan Wenn Sie über eine Speicherfunktion verfügen, bedeutet dies, dass Blockinhalte bereits am Frontend gerendert werden. Verwenden Sie einfach Vanilla JS oder JQuery, wie Sie es zuvor getan haben.

    – snnsnn

    2. Dezember 2019 um 9:27 Uhr

Soweit ich weiß, unterstützt Gutenburg nur Interaktivität auf der Editor Seite der Gleichung. Ja, Sie definieren die Aussicht Seite in React, aber diese Ansicht wird an dem Punkt, an dem der Beitrag gespeichert wird, in statisches Markup gerendert, und dann wird nur dieses statische Markup an den Client (Leser) geliefert.

Der Vorteil ist, dass Sie “serverseitiges Rendering” kostenlos erhalten und Ihr Client React nicht benötigt, um den Beitrag anzuzeigen. Der Nachteil ist, wenn Sie Client-seitige Interaktivität durchführen möchten, liegt dies außerhalb des Geltungsbereichs von Gutenburg, und Sie müssen Ihren eigenen Weg finden.

  • Danke Bessey! Ich habe es in den letzten drei Monaten gut in den Griff bekommen und biete nur Front-End-Interaktivität mit jQuery. Nicht ideal, aber bereits von WordPress eingereiht und es funktioniert.

    – iskotaa

    7. November 2018 um 15:45 Uhr


  • Können Sie ein Beispiel geben, wie Sie die Komponente mit ReactDOM in ein Dokument einbinden? Ich habe ein ähnliches Problem, bei dem ich in der Speichermethode React verwenden und Ereignisse wie onClick abfangen möchte.

    – Ognian

    2. Dezember 2019 um 7:30 Uhr

1395270cookie-checkWordPress Gutenberg: Reaktionskomponenten am Frontend

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy