ACF-Blöcke: Gebrauchsanweisung

Mit ACF Blocks, der leistungsstarken Funktion des Advanced Custom Fields Plugins, können Sie die Funktionalität Ihrer Website durch das Hinzufügen einzigartiger Inhaltsblöcke erweitern, die auf Ihre speziellen Bedürfnisse zugeschnitten sind.

Es ist wichtig zu erwähnen, dass die Blöcke ein Teil der ACF Pro Version sind, also nur für Benutzer von ACF Pro verfügbar sind.

Der Block-Ansatz in WordPress bietet mehrere wichtige Vorteile gegenüber traditionellen Methoden wie Meta-Feldern und Page Buildern. Lassen Sie uns die wichtigsten Vorteile der Verwendung von Blöcken untersuchen:

• Wiederverwendbar und flexibel
  Einer der herausragenden Vorteile ist die Wiederverwendbarkeit. Blöcke können problemlos seitenübergreifend oder sogar auf derselben Seite verwendet werden. Diese Flexibilität ermöglicht es Ihnen, konsistente Inhaltselemente zu erstellen, die auf Ihrer gesamten Website das gleiche Design und die gleiche Funktionalität aufweisen. Das spart Zeit und sorgt für ein reibungsloses Nutzererlebnis für Ihre Besucher.
• Verbesserte Leistung
  Blöcke bieten eine effizientere Möglichkeit zur Verwaltung von Assets und Ressourcen. Im Gegensatz zu traditionellen Ansätzen, bei denen alle Ressourcen global geladen werden, werden Block-Assets nur dort geladen, wo der Block verwendet wird. Dieser optimierte Lademechanismus führt zu schnelleren Seitenladezeiten und reduziert unnötige Ressourcenüberlastungen. Infolgedessen wird Ihre Website reaktionsschneller, vor allem für mobile Nutzer, und schneidet in den Suchmaschinenrankings besser ab.
• Fehlende Stilkonflikte
  In der Vergangenheit waren Stilkonflikte ein häufiges Problem bei der Arbeit mit benutzerdefinierten Metafeldern und Themenvorlagen. Durch die modulare Natur des Blocks wird das Risiko von Stilkonflikten erheblich reduziert. Jeder Block verfügt über einen eigenen Satz von Stilen und Skripten, wodurch die Möglichkeit von Konflikten mit anderen Elementen auf der Seite minimiert wird. Diese Isolierung sorgt für ein stabileres und vorhersehbareres Layout und verbessert die allgemeine Entwicklungserfahrung.

Der Ansatz des Blocks in WordPress bietet also eine moderne und leistungsstarke Möglichkeit zur Gestaltung und Verwaltung von Inhalten. Aufgrund der Wiederverwendbarkeit, der verbesserten Leistung und der Beseitigung von Konflikten sind Blöcke für viele WordPress-Benutzer und -Entwickler zur bevorzugten Methode geworden.

Bevor wir uns mit den ACF-Blöcken befassen, wollen wir auch kurz auf die nativen Gutenberg-Blöcke eingehen.

Gutenberg ist der standardmäßige WordPress-Block-Editor, der eine Reihe grundlegender Blöcke wie Absätze, Überschriften, Bilder und mehr bietet. Diese integrierten Blöcke sind zwar nützlich, haben aber einige Einschränkungen, wenn es um die Anpassung des Layouts und das Hinzufügen erweiterter Funktionen geht.

Nachteile der nativen Blöcke:

• Begrenzte Anpassungsmöglichkeiten
• Unmöglichkeit, komplexe Blocklayouts zu erstellen
• Keine intuitive Möglichkeit, benutzerdefinierte Felder für komplexere Inhalte einzubinden

Es ist wichtig zu beachten, dass es möglich ist, benutzerdefinierte Gutenberg-Blöcke ohne zusätzliche Plugins zu erstellen. Allerdings erfordert dieser Prozess ein gutes Verständnis von React, der JavaScript-Bibliothek, die Gutenberg unterstützt. Es erfordert auch eine beträchtliche Investition von Zeit und Mühe, um benutzerdefinierte Blöcke zu entwickeln.

Herausforderungen bei der Erstellung benutzerdefinierter Gutenberg-Blöcke:

• Erforderliche React-Kenntnisse
  Die Entwicklung von benutzerdefinierten Gutenberg-Blöcken beinhaltet die Arbeit mit React-Komponenten, was ein gewisses Maß an Fachwissen in JavaScript und React-Entwicklung erfordert.
• Zeitaufwändig
  Die Erstellung von benutzerdefinierten Blöcken von Grund auf kann zeitaufwändig sein, besonders für diejenigen, die neu in der React- oder WordPress-Entwicklung sind.
• Komplexität
  Die Entwicklung von benutzerdefinierten Blöcken beinhaltet oft die Verwaltung von Zuständen und den Umgang mit dynamischen Inhalten.
• Wartung
  Wenn sich der WordPress-Kern weiterentwickelt, müssen benutzerdefinierte Blöcke möglicherweise aktualisiert und angepasst werden, um kompatibel zu bleiben, was den Wartungsaufwand erhöht.

Im Gegensatz dazu bieten ACF-Blöcke eine einfachere und benutzerfreundlichere Möglichkeit, benutzerdefinierte Blöcke zu erstellen, ohne sich in die komplexe React-Entwicklung vertiefen zu müssen. ACF bietet eine intuitive Schnittstelle für das Hinzufügen von Feldern und die Definition von Layouts, so dass Benutzer aller Kenntnisstufen schnell und effizient fortgeschrittene Blöcke erstellen können.

Mit der ACF-Blockfunktion können wir Blöcke erstellen und ihnen beliebige Gruppen von Feldern zuordnen. ACF kümmert sich dann um alles, stellt die Felder in der Verwaltungsoberfläche dar und speichert sie. So können wir mehrere Felder verschiedener Typen in unserem Block haben, einschließlich komplexer Felder, wie Galerie und Repeater, ohne umfangreiche Codierung.

Für Entwickler ist es jedoch wichtig, nicht nur zu wissen, wie man die ACF-Blöcke erstellt, sondern auch, wie die Funktion hinter den Kulissen funktioniert. Werfen wir einen Blick hinter den Vorhang, um zu verstehen, wie diese vielseitigen Blöcke funktionieren und wie sie sich nahtlos in den nativen Gutenberg-Editor integrieren.

Die gute Nachricht ist, dass ACF-Blöcke im Inneren genauso funktionieren und sich verhalten wie andere native Gutenberg-Blöcke, z. B. Absätze. Wenn Sie jemals den Code der Gutenberg-Blöcke gesehen haben, werden Sie feststellen, dass sie in einfaches HTML gerendert und im post_content Feld gespeichert werden. Das zentrale Absatzfeld sieht zum Beispiel so aus:

<!-- wp:paragraph -->
<p>Your text</p>
<!-- /wp:paragraph -->

Und der Überschriftenblock sieht wie folgt aus:

<!-- wp:heading -->
<h2 class="wp-block-heading">Your heading</h2>
<!-- /wp:heading -->

Wie Sie sehen, handelt es sich um einfaches HTML, das durch WP-Kommentare erweitert wird. Dies ermöglicht es Entwicklern, Blöcke später zu parsen.

ACF folgt also diesem Ansatz und erstellt ähnliche Blöcke. Der Hauptunterschied besteht darin, dass die Felder als JSON im HTML-Kommentar gespeichert werden und der Block nicht den HTML-Code selbst enthält.

<!-- wp:acf/org-wplake-website-blocks-codesnippet-theme-classic-codesnippetthemeclassic 
{"name":"acf/org-wplake-website-blocks-codesnippet-theme-classic-codesnippetthemeclassic",
"data":{"local_code-snippet__code-snippet":"\u003c?php\r\necho 'hello world';",
"local_code-snippet__language":"php"},"mode":"edit"} /-->

Es ist wichtig, dieses Prinzip zu verstehen, aber Sie sollten sich nicht um die Umsetzung kümmern. ACF kümmert sich darum ganz von selbst.

Tipp: Das Speichern von Blockfeldern als json im post_content ist viel besser für die Performance, verglichen mit dem Ansatz der Metafelder. Das bedeutet, dass Seiten, die mit ACF-Blöcken erstellt wurden, manchmal schneller geladen werden als die Seite, die einfache Vorlagen und Metafelder verwendet.

Im Kapitel "Hinter den Kulissen" haben wir gezeigt, wie die ACF-Blöcke funktionieren. Aber was ist mit Stilen und Skripten? Sollten Sie sie global hinzufügen, wie Sie es normalerweise tun würden? Das können Sie, aber glücklicherweise gibt es eine bessere Lösung.

ACF Block behandelt Stile und Skripte auf modulare und effiziente Weise. Jeder Block hat sein eigenes CSS und JavaScript, die nur geladen werden, wenn der jeweilige Block auf einer Seite erscheint. Dieser Ansatz verbessert die Leistung, indem er das unnötige Laden von Ressourcen vermeidet, was zu kürzeren Ladezeiten der Seite und einem reibungsloseren Benutzererlebnis führt.

Tipp: Wenn Sie mit der BEM-Methode vertraut sind, haben Sie vielleicht die Vorstellung, dass ACF Blocks ein hervorragender Ort ist, um die Methode anzuwenden, und damit liegen Sie zu hundert Prozent richtig. Die Verwendung der BEM-Methode mit ACF Blocks organisiert Ihr CSS und Ihr Markup und sorgt für eine bessere Wiederverwendbarkeit und Wartbarkeit des Codes.

ACF macht uns das Leben leichter, indem es sich um das Rendern und Speichern der Felder kümmert. Aber diese Funktion erfordert immer noch etwas Kodierung. Deshalb bieten wir Ihnen im Folgenden 2 Möglichkeiten, die ACF-Blöcke in Ihre Gutenberg-Bibliothek einzubinden: mit einem Plugin (kostenpflichtig, aber ohne Kodierung) oder manuell, mit Kodierung.

Wie auch immer Sie sich entschieden haben, zunächst müssen wir eine Feldgruppe für den Block erstellen. Das machen wir jetzt gleich. In unserem Beispiel erstellen wir einen "Banner"-Block, also geben wir der Gruppe den gleichen Namen.

ACF ist berühmt für seine Add-ons. In diesem Fall werden wir einen von ihnen verwenden. ACF Views ist ein Plugin, mit dem Sie ausgewählte ACF-Felder oder Beiträge überall mit Hilfe von Shortcodes anzeigen können. Das HTML-Markup wird automatisch vom Plugin erstellt. Mehr über die Vorteile des Plugins gegenüber der Programmierung können Sie hier lesen.

Das Plugin hat viele Funktionen in der Basisversion, aber die Funktion, mit der Sie ACF-Blöcke ohne Kodierung erstellen können, ist Teil der Pro-Version.

Um mitzumachen, müssen Sie die Pro-Version des Plugins kaufen und installieren.

Bevor wir mit der Erstellung von ACF-Blöcken beginnen, müssen Sie den Begriff ACF-Views kennen, den wir verwenden werden.
Der Begriff "View" ist die Bezeichnung für den speziellen Beitragstyp, den das Plugin bereitstellt. Jede Ansicht ist eine Liste von ACF-Feldern, die angezeigt werden sollen, so dass Sie viele verschiedene Ansichten haben können, um verschiedene Felder (oder Gruppen von Feldern) für verschiedene Beiträge/Seiten anzuzeigen.

So, jetzt sind wir bereit, unseren ersten Block zu erstellen. Unten haben wir ein Video-Tutorial angehängt, das Sie dabei unterstützen wird. Vergessen Sie nicht, den Vollbildmodus zu aktivieren, um alles im Detail zu sehen.

Zusammenfassend müssen Sie die folgenden Schritte wiederholen:

1. Eine ACF-Gruppe erstellen und Zielfelder hinzufügen
2. Erstellen Sie eine Ansicht, wählen Sie die Zielfelder aus dem ersten Schritt aus, und veröffentlichen Sie die Ansicht.
3. Aktivieren Sie in den Einstellungen der Ansicht das Kontrollkästchen "Mit Gutenberg-Block".
4. Klicken Sie auf 'Aktualisieren', um Ihre Ansicht zu speichern.
5. Bearbeiten Sie Ihren Beitrag, Ihre Seite oder Ihr CPT-Element mit dem Gutenberg-Editor.
   Hinweis: Es ist wichtig, den Gutenberg-Editor und nicht den klassischen Editor oder das Page-Builder-Element zu verwenden, da der generierte Block nur in der Gutenberg-Blockbibliothek verfügbar ist.
6. Fügen Sie einen neuen Block ein, indem Sie den Block Ihrer Ansicht aus der Liste auswählen. Als Blockname wird der Name Ihrer Ansicht verwendet.
7. Füllen Sie die Felder in dem soeben eingefügten Block aus.
8. Klicken Sie auf 'Veröffentlichen', um Ihren Beitrag, Ihre Seite oder Ihr CPT-Element zu speichern.
9. Besuchen Sie die Seite, um das Ergebnis zu sehen.

ACF Views generiert automatisch das Markup, so dass Sie sich keine Gedanken über Feldtypen und deren Rückgabeformate machen müssen. Nun können Sie die Ausgabe durch Hinzufügen einiger CSS-Regeln gestalten. Sie können sie ganz einfach über die Registerkarte 'Erweitert' Ihrer Ansicht hinzufügen.

Dieser Ansatz bietet mehr Flexibilität im Vergleich zum Plugin, erfordert aber mehr Aufwand.

Hinweis: Nachstehend finden Sie den aktuellen Leitfaden für ACF v6+. Wir zeigen die neue und empfohlene Art, Blöcke hinzuzufügen (unter Verwendung von JSON). Die alte Methode, mit einer php-Funktion wurde mit der Veröffentlichung von v6 veraltet.

Sie müssen für jeden Block eine JSON-Deklaration erstellen. Die Deklaration ist eine einfache .json Datei, die die notwendigen Informationen über den Block enthält. Sie können diese Datei an einem beliebigen Ort in Ihrem Theme oder Plugin platzieren.

{
    "name": "acf/banner",
    "title": "Banner",
    "description": "A custom banner block.",
    "style": [ "file:./banner.css" ],
    "category": "formatting",
    "icon": "admin-comments",
    "keywords": ["banner"],
    "acf": {
        "mode": "preview",
        "renderTemplate": "banner.php"
    }
}

Jetzt müssen wir WordPress über den Block informieren, indem wir das folgende Snippet verwenden:

<?php
add_action( 'init',function (){
    // fixme your path here to the folder with the JSON file
    register_block_type( __DIR__ . '/blocks/testimonial' );
} );

In diesem Schritt ist der Block bereits registriert, und wir müssen unsere ACF-Gruppe mit dem Block verbinden. Öffnen Sie die Gruppe, die wir zu Beginn erstellt haben, und wählen Sie die Option Block in den Standortregeln aus. Wählen Sie dann Ihren Block in der Dropdown-Liste aus und aktualisieren Sie die Gruppe.

Tipp: Wenn Sie den Namen Ihres Blocks nicht in der Auswahl sehen, stellen Sie sicher, dass Sie den PHP-Code aus Schritt 2 hinzugefügt und die Datei hochgeladen haben.

Jetzt ist alles bereit, um die Vorlage für den Block zu erstellen. Die PHP-Vorlage gibt das HTML-Markup des Blocks auf der Grundlage der Feldwerte zurück. Sie müssen Ihre Feldnamen, Typen und Rückgabeformate in der ACF-Gruppe überprüfen, um den richtigen Code zu erstellen.

Nachfolgend finden Sie den Vorlagencode für unseren Banner-Block. Sie müssen ihn in die PHP-Datei einfügen, die Sie im Abschnitt renderTemplate in der JSON-Deklaration im ersten Schritt angegeben haben.

<?php
/**
 * Banner Block Template.
 *
 * @param array $block The block settings and attributes.
 * @param string $content The block inner HTML (empty).
 * @param bool $is_preview True during backend preview render.
 * @param int $post_id The post ID the block is rendering content against.
 *          This is either the post ID currently being displayed inside a query loop,
 *          or the post ID of the post hosting this block.
 * @param array $context The context provided to the block by the post or it's parent block.
 */


$title = get_field('title') ?: '';
$description = get_field('description') ?: '';
$image = get_field('image') ?: 0;
$linkData = get_field('link');
$link = '';

$image = $image ?
    wp_get_attachment_image($image, 'full', false, [
        'class' => 'banner__image',
    ]) :
    '';

if ($linkData) {
    // if the 'target' is presented, it's a bool. We've to convert it into the HTML format
    $target = isset($linkData['target']) && $linkData['target'] ?
        '_blank' :
        '_self';
    // Each %s in the string will be replaced with the related argument
    $link = sprintf(
        "<a class='banner__link' href='%s' target='%s'>%s</a>",
        esc_url($linkData['url']),
        esc_html($target),
        esc_attr($linkData['title'])
    );
}

?>
<div class="banner">
    <p class="banner__title"><?php
        echo esc_html($title); ?></p>

    <?php
    echo $image; ?>

    <div class="banner__description"><?php
        echo esc_html($description); ?></div>
    
    <?php
    echo $link ?>
</div>

Dies war der letzte Schritt, jetzt können Sie den Gutenberg-Editor öffnen, den neuen Block in Ihrer Bibliothek finden und ihn an der Zielstelle hinzufügen. Füllen Sie dann die Felder aus und klicken Sie auf die Schaltfläche "Aktualisieren", um die Seite zu speichern.

Besuchen Sie die Seite, um das Ergebnis zu sehen.

Weitere Informationen finden Sie im folgenden Video und im offiziellen ACF-Artikel.

ACF-Blöcke, Teil des Advanced Custom Fields-Plugins, ermöglichen es Ihnen, die Funktionalität Ihrer WordPress-Website durch die Erstellung benutzerdefinierter Inhaltsblöcke zu erweitern, die auf Ihre Bedürfnisse zugeschnitten sind. Sie bieten Flexibilität und Benutzerfreundlichkeit und eliminieren die Komplexität der React-Entwicklung.

Für Entwickler ist es wichtig zu verstehen, wie ACF-Blöcke hinter den Kulissen funktionieren, da sie Daten innerhalb des post_content speichern, was zu schnelleren Ladezeiten der Seite führt. Mit dem Plugin ACF Views können Sie ACF-Blöcke mühelos und ohne umfangreiche Programmierung erstellen oder den manuellen Code-Ansatz verwenden.

Egal, ob Sie ein professioneller Entwickler oder ein WordPress-Enthusiast sind, ACF Blocks verbessern Ihre Inhaltserstellung und sorgen für ein ansprechendes Website-Erlebnis. Schöpfen Sie das volle Potenzial Ihrer WordPress-Website mit ACF Blocks noch heute aus!