←Terug naar het blog

Gutenberg-blokken maken met Advanced Custom Fields (ACF) en LazyBlocks: Een vergelijkende gids

2023-04-02‱4 min leestijd

Gutenberg, de block-editor van WordPress, heeft de manier waarop we content in WordPress maken en ontwerpen gerevolutioneerd. Advanced Custom Fields (ACF) en LazyBlocks zijn twee populaire plugins die de functionaliteit van Gutenberg uitbreiden door gebruikers aangepaste blocks te laten maken. In dit artikel bespreken we het proces van het maken van Gutenberg-blocks met beide plugins en analyseren we hun voor- en nadelen.

1.- Advanced Custom Fields (ACF)

ACF is een populaire WordPress-plugin waarmee gebruikers aangepaste velden kunnen toevoegen aan hun berichten, pagina's en aangepaste berichttypen. Het ondersteunt ook het maken van aangepaste Gutenberg-blocks via een gebruiksvriendelijke interface.

Blocks maken met ACF:

  1. Installeer en activeer de ACF-plugin.
  2. Voeg de callback-functie my_acf_block_render_callback() toe aan het functions.php-bestand van je thema:
/**
 * Callback om de blocknaam te koppelen aan een template.
 * @param $block
 * @return void
 */
function my_acf_block_render_callback( $block ) {

    // converteer naam ("acf/slider") naar een padvriendelijke slug ("slider")
    $slug = str_replace('acf/', '', $block['name']);

    // inclusief een template-part uit de "template-parts/block" map
    if ( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
        include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
    }
}
  1. Registreer het block in het functions.php-bestand van je thema met acf_register_block_type().
/**
 * Voorbeeld om een ACF-block te registreren.
 */
function my_acf_block_init() {
    // Controleer of de functie bestaat om fouten te voorkomen.
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name'              => 'my-nice-block-name',
            'title'             => __('Dit is mijn eerste Block'),
            'description'       => __('Dit is een aangepast block gemaakt met ACF.'),
            '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');
  1. Navigeer in het WordPress-dashboard naar Custom Fields > Add New.
  2. Maak een nieuwe veldgroep en voeg de velden toe die je nodig hebt voor het block en configureer hun instellingen.
  3. Kies in de instellingen van de veldgroep onder "Location" voor "Block" als regel en stel deze in op "is equal to" jouw blocktitel (bijv. "Dit is mijn eerste Block").
  4. Maak een nieuw PHP-bestand aan in de template-parts/block-directory van je thema als templatebestand voor je aangepaste block. Gebruik de naamgevingsconventie content-{slug}.php, waarbij {slug} de padvriendelijke slug is die is afgeleid van de naam van het block. Als de naam van je block bijvoorbeeld "acf/your-block-name" is, maak dan een templatebestand genaamd content-your-block-name.php.
  5. Schrijf in het nieuw aangemaakte templatebestand de PHP- en HTML-code die het block rendert. Begin met de openings PHP-tag en gebruik de get_field()- of the_field()-functies van ACF om de waarden van de aangepaste velden die je aan het block hebt toegevoegd op te halen en weer te geven. Met deze functies kun je toegang krijgen tot de gegevens die in je aangepaste velden zijn opgeslagen en deze in de template van je block uitvoeren.
/**
 * Voorbeeld van een block template.
 */
<?php
// Haal aangepaste veldwaarden op
$heading = get_field('heading');
$content = get_field('content');
?>

<!-- Toon de HTML-structuur van het block -->
<div class="my-custom-block">
    <h2><?php echo esc_html($heading); ?></h2>
    <p><?php echo esc_html($content); ?></p>
</div>

Voordelen van ACF:

  • Gebruiksvriendelijke interface.
  • Een breed scala aan veldtypen om uit te kiezen.
  • Integreert met andere WordPress-functies zoals aangepaste berichttypen en taxonomieĂ«n.
  • Uitgebreide documentatie en een grote gebruikersgemeenschap.

Nadelen van ACF:

  • Het kan uitdagend zijn voor gebruikers met beperkte codeerervaring.
  • Vereist een PRO-versie voor sommige geavanceerde functies.
  • Prestatieproblemen kunnen optreden bij een groot aantal aangepaste velden.

2.- LazyBlocks

LazyBlocks is een visuele constructor voor Gutenberg-blocks waarmee je aangepaste Gutenberg-blocks kunt maken met een eenvoudige drag-and-drop interface.

Blocks maken met LazyBlocks:

  1. Installeer en activeer de LazyBlocks-plugin.
  2. Navigeer in het WordPress-dashboard naar LazyBlocks > Add New.
  3. Voer de blocknaam en slug in en begin met het toevoegen van controls (velden) met behulp van de drag-and-drop interface.
  4. Configureer de block-output door te kiezen tussen een PHP-, HTML- of Handlebars-template.
  5. Voeg de block-outputcode toe in de meegeleverde editor of maak een apart templatebestand in je thema. Hieronder staan de voordelen voor elke optie:
    • PHP: Biedt volledige flexibiliteit en controle over de output van je block, en stelt je in staat om elke PHP-functionaliteit te gebruiken om het uiterlijk en gedrag van je block aan te passen.
    • HTML: Biedt een eenvoudige en directe manier om de output van je block te definiĂ«ren zonder met PHP-code te werken. Ideaal voor gebruikers die liever alleen met HTML en CSS werken.
    • Handlebars-template: Combineert de eenvoud van HTML-output met de kracht van conditionele logica en loops, waardoor het een veelzijdige optie is voor gebruikers die meer controle over hun block-output nodig hebben zonder PHP te schrijven.
  6. Sla het block op en het zal beschikbaar zijn in de Gutenberg-editor.

Voordelen van LazyBlocks:

  • IntuĂŻtieve drag-and-drop interface.
  • Geen code vereist voor basisblocks.
  • Werkt met Custom Post Types en Custom Taxonomies.
  • Een redelijk aantal beschikbare veldtypen.

Nadelen van LazyBlocks:

  • Minder uitgebreide documentatie vergeleken met ACF.
  • Beperkte veldtypen vergeleken met ACF.
  • Minder functies en opties vergeleken met ACF.

Categorieën:

WordPressGutenberg