Erstellung von Gutenberg-Blöcken mit Advanced Custom Fields (ACF) und LazyBlocks: Ein Vergleichsleitfaden

Gutenberg, der Block-Editor von WordPress, hat die Art und Weise, wie wir Inhalte in WordPress erstellen und gestalten, revolutioniert. Advanced Custom Fields (ACF) und LazyBlocks sind zwei beliebte Plugins, die die Funktionalität von Gutenberg erweitern, indem sie Benutzern die Erstellung benutzerdefinierter Blöcke ermöglichen. In diesem Artikel besprechen wir den Prozess der Erstellung von Gutenberg-Blöcken mit beiden Plugins und analysieren ihre Vor- und Nachteile.

1.- Advanced Custom Fields (ACF)

ACF ist ein beliebtes WordPress-Plugin, mit dem Benutzer benutzerdefinierte Felder zu ihren Beiträgen, Seiten und benutzerdefinierten Beitragstypen hinzufügen können. Es unterstützt auch die Erstellung benutzerdefinierter Gutenberg-Blöcke über eine benutzerfreundliche Oberfläche.

Erstellung von Blöcken mit ACF:

Installieren und aktivieren Sie das ACF-Plugin.
Fügen Sie die Callback-Funktion my_acf_block_render_callback() zur Datei functions.php Ihres Themes hinzu:

/**
 * Callback, um den Block-Namen einer Vorlage zuzuordnen.
 * @param $block
 * @return void
 */
function my_acf_block_render_callback( $block ) {

    // Konvertiert den Namen ("acf/slider") in einen pfadfreundlichen Slug ("slider")
    $slug = str_replace('acf/', '', $block['name']);

    // Bindet einen Vorlagenteil aus dem Ordner "template-parts/block" ein
    if ( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
        include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
    }
}

Registrieren Sie den Block in der Datei functions.php Ihres Themes mit acf_register_block_type().

/**
 * Beispiel für die Registrierung eines ACF-Blocks.
 */
function my_acf_block_init() {
    // Prüft, ob die Funktion existiert, um Fehler zu vermeiden.
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name'              => 'my-nice-block-name',
            'title'             => __('Dies ist mein erster Block'),
            'description'       => __('Dies ist ein benutzerdefinierter Block, der mit ACF erstellt wurde.'),
            'render_template'   => 'path/to/your/block/template.php',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array('nice', 'block', 'name'),
        ));
    }
}
add_action('acf/init', 'my_acf_block_init');

Navigieren Sie im WordPress-Dashboard zu Benutzerdefinierte Felder > Neu hinzufügen.
Erstellen Sie eine neue Feldgruppe und fügen Sie die für den Block benötigten Felder hinzu und konfigurieren Sie deren Einstellungen.
Wählen Sie in den Einstellungen der Feldgruppe unter „Standort“ für die Regel „Block“ und setzen Sie sie auf „ist gleich“ dem Titel Ihres Blocks (z. B. „Dies ist mein erster Block“).
Erstellen Sie eine neue PHP-Datei im Verzeichnis template-parts/block Ihres Themes, die als Vorlagendatei für Ihren benutzerdefinierten Block dient. Verwenden Sie die Namenskonvention content-{slug}.php, wobei {slug} der pfadfreundliche Slug ist, der vom Namen des Blocks abgeleitet ist. Wenn der Name Ihres Blocks beispielsweise „acf/your-block-name“ lautet, erstellen Sie eine Vorlagendatei namens content-your-block-name.php.
Schreiben Sie in der neu erstellten Vorlagendatei den PHP- und HTML-Code, der den Block rendert. Beginnen Sie mit dem öffnenden PHP-Tag und verwenden Sie die ACF-Funktionen get_field() oder the_field(), um die Werte der benutzerdefinierten Felder abzurufen und anzuzeigen, die Sie dem Block hinzugefügt haben. Diese Funktionen ermöglichen Ihnen den Zugriff auf die in Ihren benutzerdefinierten Feldern gespeicherten Daten und deren Ausgabe in der Vorlage Ihres Blocks.

/**
 * Beispiel für eine Blockvorlage.
 */
<?php
// Ruft benutzerdefinierte Feldwerte ab
$heading = get_field('heading');
$content = get_field('content');
?>

<!-- Gibt die HTML-Struktur des Blocks aus -->
<div class="my-custom-block">
    <h2><?php echo esc_html($heading); ?></h2>
    <p><?php echo esc_html($content); ?></p>
</div>

Vorteile von ACF:

Benutzerfreundliche Oberfläche.
Eine große Auswahl an Feldtypen.
Integriert sich in andere WordPress-Funktionen wie benutzerdefinierte Beitragstypen und Taxonomien.
Umfangreiche Dokumentation und eine große Benutzergemeinschaft.

Nachteile von ACF:

Kann für Benutzer mit begrenzter Programmiererfahrung schwierig sein.
Benötigt eine PRO-Version für einige erweiterte Funktionen.
Bei einer hohen Anzahl benutzerdefinierter Felder können Leistungsprobleme auftreten.

2.- LazyBlocks

LazyBlocks ist ein visueller Konstruktor für Gutenberg-Blöcke, mit dem Sie benutzerdefinierte Gutenberg-Blöcke über eine einfache Drag-and-Drop-Oberfläche erstellen können.

Erstellung von Blöcken mit LazyBlocks:

Installieren und aktivieren Sie das LazyBlocks-Plugin.
Navigieren Sie im WordPress-Dashboard zu LazyBlocks > Neu hinzufügen.
Geben Sie den Blocknamen und den Slug ein und beginnen Sie dann mit dem Hinzufügen von Steuerelementen (Feldern) über die Drag-and-Drop-Oberfläche.
Konfigurieren Sie die Blockausgabe, indem Sie zwischen einer PHP-, HTML- oder Handlebars-Vorlage wählen.
Fügen Sie den Blockausgabecode in den bereitgestellten Editor ein oder erstellen Sie eine separate Vorlagendatei in Ihrem Theme. Nachfolgend sind die Vorteile für jede Option aufgeführt:
- PHP: Bietet volle Flexibilität und Kontrolle über die Ausgabe Ihres Blocks und ermöglicht Ihnen die Verwendung beliebiger PHP-Funktionen zur Anpassung des Erscheinungsbilds und Verhaltens Ihres Blocks.
- HTML: Bietet eine einfache und unkomplizierte Möglichkeit, die Ausgabe Ihres Blocks zu definieren, ohne sich mit PHP-Code befassen zu müssen. Ideal für Benutzer, die es vorziehen, nur mit HTML und CSS zu arbeiten.
- Handlebars-Vorlage: Kombiniert die Einfachheit der HTML-Ausgabe mit der Leistung von bedingter Logik und Schleifen, was es zu einer vielseitigen Option für Benutzer macht, die mehr Kontrolle über die Ausgabe ihres Blocks benötigen, ohne PHP schreiben zu müssen.
Speichern Sie den Block, und er wird im Gutenberg-Editor verfügbar sein.

Vorteile von LazyBlocks:

Intuitive Drag-and-Drop-Oberfläche.
Keine Programmierung für einfache Blöcke erforderlich.
Funktioniert mit benutzerdefinierten Beitragstypen und benutzerdefinierten Taxonomien.
Eine anständige Anzahl verfügbarer Feldtypen.

Nachteile von LazyBlocks:

Weniger umfassende Dokumentation im Vergleich zu ACF.
Begrenzte Feldtypen im Vergleich zu ACF.
Weniger Funktionen und Optionen im Vergleich zu ACF.