So greifen Sie mit PHP auf Gutenberg-Blöcke zu und analysieren sie

In diesem Beitrag sehen wir uns an, wie man die Gutenberg-Blöcke eines Beitrags analysiert und bestimmte Blöcke extrahiert, um etwas anderes zu erstellen. Wir werden uns WordPress-PHP-Funktionen zum Analysieren, Extrahieren und Rendern ausgewählter Blöcke ansehen.

Ein Vorteil des neuen Gutenberg-Editors in WordPress sind strukturiertere Daten für Post-Inhalte. Früher wurde alles als HTML gespeichert und es gab keine Möglichkeit, bestimmte Inhalte ohne einige sehr komplexe reguläre Ausdrücke zu extrahieren. Aber mit Gutenberg wird jeder Inhalt, sei es ein Absatz, eine Überschrift, ein Bild, ein Video, eine Schaltfläche oder eine Spalte, die andere Blöcke enthält, mit Informationen gespeichert, die uns sagen, was dieser Inhalt ist.

Mit integrierten WordPress-Funktionen ist es sehr einfach, alle Blöcke im Inhalt eines Beitrags in einem Array mit all ihren Informationen abzurufen. Dies eröffnet viele nützliche Funktionen für Theme-Entwickler. Um nur ein paar Ideen zu nennen:

• Generieren Sie dynamisch ein Inhaltsverzeichnis, indem Sie alle Überschriften abrufen (Tutorial unten).
• Rufen Sie alle Videos, Bilder oder Zitate ab, die in allen Beiträgen verwendet werden, um sie alle zu sammeln und auf einer anderen Seite aufzulisten.
• Extrahieren Sie den ersten Absatz eines Beitrags und verwenden Sie diesen als Auszug in Archiven (Tutorial unten).
• Verschaffen Sie sich einen Überblick über die Verwendung bestimmter Blöcke und deren Position. Angenommen, Sie haben einen benutzerdefinierten Werbeblock und müssen wissen, wie oft er in Ihren Posts verwendet wird und wie weit unten im Inhalt sie erscheinen.
• Rendern Sie die Blöcke eines Beitrags, aber schließen Sie bestimmte Blocktypen aus.
• Überprüfen Sie, ob ein Beitragsinhalt mit einem Video beginnt, und verwenden Sie dieses Video anstelle des vorgestellten Bilds in Archiven.
• Wenn Sie einen benutzerdefinierten Block verwenden, der technische Spezifikationen zu Produkten enthält, können Sie ganz einfach eine Seite erstellen, auf der die technischen Spezifikationen in Produktbeiträgen angezeigt und verglichen werden.
• Sammeln Sie dynamisch alle Einzelbilder, die in einem Beitrag verwendet werden, und erstellen Sie daraus am Ende oder an anderer Stelle eine Galerie.

Lassen Sie uns einfach direkt hineinspringen!

Analysieren Sie die Blöcke eines Beitrags

Zum Parsen von Blöcken verwenden wir die WordPress-Funktion [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(). Als Parameter müssen Sie eine Zeichenfolge mit dem Inhalt eines Beitrags angeben. Wenn Sie sich in einer Schleife befinden oder Zugriff auf ein Post-Objekt haben, geben Sie $post->post_contentdie Funktion einfach als Parameter an.

Die Rückgabe von parse_blocks()ist ein Array, wobei jedes Array-Element ein Block ist. Für jedes Blockelement haben Sie Informationen wie Blocktyp (Schlüssel ‘ blockName‘), Blockattribute (Schlüssel ‘ attrs‘), innere Blöcke für verschachtelte Blöcke wie Spalten (Schlüssel ‘ innerBlocks‘) und zwei Elemente für den eigentlichen Blockinhalt (Schlüssel ‘ innerHTML‘ und ‘ innerContent‘). Das Element innerHTMList eine Zeichenfolge mit HTML-Inhalt, während innerContentes sich um ein Array von HTML-Zeichenfolgen handelt.

Und das ist alles! Durchlaufen Sie das zurückgegebene Array von parse_blocks(), um Ihr Ding zu erledigen. Weitere Codebeispiele dazu sehen wir uns weiter unten in diesem Beitrag an.

Eine Anmerkung zu klassischen (Nicht-Gutenberg-) Beiträgen

Möglicherweise arbeiten Sie an einer älteren WordPress-Site, die vor dem Upgrade auf Gutenberg Beiträge erstellt hat (oder ein Plugin zum Deaktivieren von Gutenberg verwendet hat). In diesem Fall haben diese Beiträge keinen strukturierten Beitragsinhalt, sondern der gesamte Beitragsinhalt befindet sich in einem „Klassischen Editor”-Block.

Das von der Funktion zurückgegebene Array parse_blocks()gibt bei dieser Art von Posts ein Block-Array-Element mit blockNameset to zurück null. Der vollständige HTML-Inhalt des Beitrags befindet sich in der innerHTMLZeichenfolge dieses Elements.

Wir können mit Sicherheit davon ausgehen, dass wir es mit einem „Pre-Gutenberg”-Post zu tun haben, wenn die Rückgabe parse_blocks()eines Posts ein Element hat und blockNamees ist. nullAndernfalls blockNamewird immer gefüllt. Dies ist eine gute Überprüfung, die Sie im Hinterkopf behalten sollten, wenn Sie Code zum Analysieren der Blöcke von Beiträgen schreiben und ältere WordPress-Inhalte verarbeiten möchten.

Rendern Sie einen Block

WordPress bietet auch eine Funktion zum Rendern eines bestimmten Blocks mit [render_block](https://developer.wordpress.org/reference/functions/render_block/)(). Als Parameter müssen Sie für einen Block ein Array angeben, genau wie eines der von parse_blocks()oben zurückgegebenen. Die Funktion gibt eine Zeichenfolge mit gerendertem HTML zurück, die Sie einfach direkt ausgeben können.

Der obige Code rendert alle Blöcke des Beitrags, genau wie es normalerweise beim Rendern des Inhalts des Beitrags der Fall wäre. Der lustige Teil kommt, wenn wir anfangen, Code hinzuzufügen, um bestimmte Blöcke, an denen wir interessiert sind, auszuschließen oder einzuschließen.

Der folgende Code druckt beispielsweise nur die Absatzblöcke des Beitrags aus:

foreach ($blocks as $block) {
    if ($block['blockName'] == 'core/paragraph') {
        echo render_block($block);
    }
}

Und dies wird alle Blöcke rendern, aber alle Shortcode-Blöcke ausschließen:

foreach ($blocks as $block) {
    if ($block['blockName'] != 'core/shortcode') {
        echo render_block($block);
    }
}

Blocknamen

Wenn Sie die Blöcke eines Beitrags analysieren, müssen Sie höchstwahrscheinlich den Typ des Blocks überprüfen. Sie sind ziemlich einfach zu erraten. Zum Beispiel ist ein Absatzblock, Sie haben es erraten, paragraph. Denken Sie jedoch daran, dass allen Gutenberg-Blöcken in WordPress ein Namespace vorangestellt ist. Bei WordPress-Kernblöcken (Standard) haben sie alle das Präfix „ core/“. Die Ausnahme bilden die Embed-Blöcke, denen ein „ ” vorangestellt ist core-embed/. So hat beispielsweise ein Absatzblock den Blocknamen core/paragraph.

Um wildes Raten zu vermeiden, hier ein Überblick über die von WordPress bereitgestellten Standardblöcke (zum Zeitpunkt des Schreibens):

Gemeinsame Blöcke

• Absatz:core/paragraph
• Bild:core/image
• Überschrift:core/heading
• Galerie:core/gallery
• Aufführen:core/list
• Zitieren:core/quote
• Audio:core/audio
• Abdeckung:core/cover
• Datei:core/file
• Video:core/video

Formatierung

• Vorformatiert:core/preformatted
• Code:core/code
• Classic: core/freeform
  (aber für Nicht-Gutenberg-Posts ist es null, siehe Hinweis zu Nicht-Gutenberg-Posts)
• Benutzerdefiniertes HTML:core/html
• Pullzitat:core/pullquote
• Tisch:core/table
• Vers:core/verse

Layout

• Taste:core/button
• Säulen:core/columns
• Mehr:core/more
• Seitenumbruch:core/nextpage
• Separator:core/separator
• Abstandshalter:core/spacer
• Medien & Text:core/media-text

Widgets

• Kurzwahl:core/shortcode
• Archiv:core/archives
• Kategorien:core/categories
• Neueste Kommentare:core/latest-omments
• Neueste Beiträge:core/latest-posts

Einbettungen

• Einbetten:core/embed

• Twitter:core-embed/twitter

• Youtube:core-embed/youtube

• Facebook:core-embed/facebook

• Instagram:core-embed/instagram

• WordPress:core-embed/wordpress

• SoundCloud:core-embed/soundcloud

• Spotify:core-embed/spotify

• Flickr:core-embed/flickr

• Video:core-embed/vimeo

• Animation:core-embed/animoto

• Cloudup:core-embed/cloudup

• Crowdsignal:core-embed/crowdsignal

• Dailymotion:core-embed/dailymotion

• Hallo:core-embed/hulu

• Bild:core-embed/imgur

• Ausgabe:core-embed/issuu

• Kickstarter:core-embed/kickstarter

• Meetup.com:core-embed/meetup-com

• Mixcloud:core-embed/mixcloud

• Reddit:core-embed/reddit

• ReverbNation:core-embed/reverbnation

• Screencast:core-embed/screencast

• Geschrieben:core-embed/scribd

• Slideshare:core-embed/slideshare

• SelbstgefälligMug:core-embed/smugmug

• Lautsprecherdeck:core-embed/speaker

• TE:core-embed/ted

• Tumblr:core-embed/tumblr

• VideoPress:core-embed/videopress

• wordpress.tv:core-embed/wordpress-tv

• Amazon Kindle:core-embed/amazon-kindle

Codebeispiel: Holen Sie sich den ersten Absatz eines Beitrags als Auszug

Ein gut verfasster Beitrag sollte mit einem Absatz beginnen, der vorstellt, worum es in dem Beitrag geht, und die Leute dazu verleitet, weiterzulesen. Diese eignen sich perfekt als Auszüge, anstatt sich auf die automatische Auszugsfunktion in WordPress zu verlassen!

Dies ist eine Funktion, die Sie Ihrem Thema hinzufügen können, um functions.phpden ersten Absatz eines Beitrags zurückzugeben. Wenn kein Post bereitgestellt wurde, wird auf das globale Post-Objekt verwiesen. Es berücksichtigt auch Nicht-Gutenberg-Beiträge, indem es den eigentlichen WordPress-Auszug für diese zurückgibt.

Nach dem parse_blocks()Aufruf der Funktion prüfen wir, ob der Beitrag ungültige Blockdaten enthält (der Beitrag wurde vor Gutenberg erstellt) und geben gegebenenfalls einen Beitragsauszug zurück. Andernfalls durchlaufen wir die Blöcke des Beitrags, finden den ersten Absatzblock und geben seine zurück innerHTML. Ganz am Ende geben wir einen String mit (dies ist optional) einem <div>drumherum zurück.

Um diese Funktion zu nutzen, müssen Sie nur aufrufen:

echo awp_get_excerpt();

Angenommen, der Funktionsaufruf wird irgendwo platziert, wo es ein globales $postObjekt gibt, zum Beispiel in einer Schleife. Wenn Sie einen Beitrag angeben möchten, geben Sie das Beitragsobjekt als Parameter für den Funktionsaufruf an:

$post_id = 1;
$post = get_post($post_id);
echo awp_get_excerpt($post);

Beispiel: Erstellen Sie ein Inhaltsverzeichnis aus den Überschriften eines Beitrags

Sie können basierend auf den Überschriftenblöcken eines Beitrags automatisch und dynamisch ein Inhaltsverzeichnis erstellen. Der Prozess ist einfach genug; Analysieren Sie die Blöcke des Beitrags und finden Sie alle Blöcke vom Typ core/heading. Aber wir können noch einen Schritt weiter gehen und Ebenen einbeziehen; zB h3als Unterüberschrift unter setzen h2und so weiter.

Ein Kopfzeilenblock enthält Informationen über seine Ebene im Attribut-Array-Element (Schlüssel ‘ attrs‘). Innerhalb des attrsArrays wäre es ein Array-Element mit dem Schlüssel ‘ level‘ und einer Ganzzahl, die die Ebene angibt. A h3hätte ‘ level‘ den Wert von 3, a h4hätte ‘ level‘ von 4und so weiter.

Beachten Sie jedoch, dass attrsÜberschriftblöcke leer sein können! Dies geschieht, wenn der Autor den Überschriftentyp nicht von den Standardeinstellungen in den Blockeinstellungen geändert hat. Um dies zu umgehen, müssen wir einige Annahmen treffen. Als Standardüberschriften werden verwendet h2(es sei denn, Sie haben dies in Ihrem Design geändert). Wir können also davon ausgehen, dass es sich bei einem Überschriftenblock, der kein Ebenenattribut hat, um eine h2. Ansonsten erhalten wir die Levelinformationen aus den Attributen.

Wenn Sie der Herausforderung wirklich gewachsen sind, lade ich Sie ein, den folgenden Code zu verbessern. Das Problem beim Generieren einer richtig strukturierten olListe ist, dass wir nicht kontrollieren können, wie der Autor seine Titel strukturiert. Sie könnten sehr gut verrückt werden und mit einer h4Überschrift beginnen und gleich danach direkt zu einer h2Überschrift springen. Und plötzlich mischen sie sich h1mittendrin. Meine Lösung besteht daher darin, eine flache olListe zu generieren und die Ebeneninformationen in den Klassen des Listenelements bereitzustellen. Dann können Sie mit etwas cleverem CSS die Listenelemente mit etwas linkem Padding entsprechend einrücken.

Der Code

Hier ist die Inhaltsverzeichnis-Funktion:

Die Funktion beginnt mit der Behandlung des Beitrags und dem Analysieren seiner Blöcke. Bei line #9berücksichtigen wir Nicht-Gutenberg-Posts. Die Funktion fährt fort, alle Blöcke zu durchlaufen, und wann immer sie einen Überschriftenblock findet, wird er unserem $headingsArray hinzugefügt. Wir verwenden [wp_strip_all_tags](https://developer.wordpress.org/reference/functions/wp_strip_all_tags/)(), um die HTML-Tags von den Titeln zu entfernen. Wir fügen auch die Ebeneninformationen zu unserem Array hinzu, wobei der Standardwert lautet, 2wenn Attribute leer sind.

Nach der Block-Schleife $headingssollte das Array alle Überschriften des Beitrags der Reihe nach enthalten. Wir können dann einfach einen HTML-String generieren und dessen Inhalt ausgeben. Wie bereits erwähnt, generiere ich für jedes Element einen Klassennamen mit Informationen über die Ebene der Überschrift, damit wir mit CSS die Illusion einer strukturierten Liste erzeugen können.

Wie bei der obigen Auszugsfunktion können wir diese Funktion so aufrufen, wenn wir uns innerhalb der Schleife befinden:

echo awp_table_of_contents();

Oder wenn wir außerhalb der Schleife sind oder einen Beitrag angeben möchten;

$post_id = 1;
$post = get_post($post_id);
echo awp_table_of_contents($post);

Dadurch wird eine Liste generiert, die in etwa so aussieht:

Fazit

Wie wir bei strukturierten Rich-Post-Inhalten gesehen haben, die mit Gutenberg möglich gemacht wurden, können wir bestimmte Teile des Inhalts von Posts sehr einfach finden und extrahieren. Verweisen Sie auf die Liste der Beispiele, die ich am Anfang des Beitrags erwähnt habe. Als Theme-Entwickler sind Ihnen keine Grenzen gesetzt. Es hängt nur davon ab, was Ihr Thema oder Ihre WordPress-Site benötigt (oder was einfach nur cool wäre).