Technisch blog
Leestijd: +- 2.5 min

Gutenberg. De pagebuilder die sinds WordPress 5.0 (uitgebracht op 6 december 2018) in de WP Core zit ingebouwd. Het was één van de belangrijkste updates van WordPress in jaren. Een fundamentele verandering in de manier waarop we webpagina’s bouwen, namelijk: met blocks!

In eerste instantie leverde Gutenberg, op z’n zachts gezegd, behoorlijk wat weerstand op in ‘developersland’. Binnen de WordPress Community ontstonden twee kampen: ‘team voor’ vs. ‘team tegen’. Waar wij op dat moment stonden? Dat zochten we uit met een dikke testsessie:

Vijf developers. Eén complete vrijdag. Gezamenlijk 40 uur. Onderzoek of we zelf al Gutenberg blocks konden bouwen (want: als Amazing zijnde creëren we graag unieke websites, zonder gebruik te maken van ‘standaard’ blocks. We doen het graag net even anders). In de praktijk bleek dit nog té bewerkelijk en instabiel.

Onze conclusie destijds? Wij zagen de potentie, maar wisten ook dat de Gutenberg editor in de kinderschoenen stond en nog niet gereed was om in productie te gebruiken. We besloten om de ‘klassieke editor’ plug-in van WordPress nog een tijdje aan te houden, maar de ontwikkelingen rondom Gutenberg volop te volgen, wetende dat dit op den duur de standaard binnen WordPress zou gaan worden. Het was alleen even wachten op het moment van… volwassenheid!


all grown up!

Nu, bijna 1.5 jaar later is het moment daar! De Gutenberg Editor = totally grown up. Bovendien heeft Advanced Custom Fields (ACF) het zelf ontwikkelen van Gutenberg Blocks zo veel eenvoudiger gemaakt: een plug-in waarmee je aangepaste velden aan een site kunt toevoegen of mee kunt beheren. Reden genoeg voor ons om de Gutenberg editor standaard in te gaan zetten voor het bouwen van nieuwe WordPress sites. En, stelletje knutselaars als wij zijn, bouwen we er ook gelijk lekker op los. Wat dat betreft liepen we al snel tegen een volgend issue aan: bij het zelf ontwikkelen van blocks dien je ze stuk voor stuk handmatig met een stuk code van 15 regels te registreren bij WordPress. Niet zo efficiënt toch? Kon beter, vonden wij. En daar verzonnen we wat op.

Kon beter, vonden wij.


this is where the magic happens

We ontwikkelden een methode om het proces van aanmelden van nieuwe blocks bij WordPress een stuk makkelijker te maken – en daarmee ook het hele ontwikkelproces van een ‘eigen’ Gutenberg block. Hoe? Door ervoor te zorgen dat het ACF Gutenberg block zichzelf registreert bij WordPress in plaats van dit voor elk nieuw block zelf handmatig te moeten doen. We maken daarbij gebruik van de slimme techniek van WordPress om uit een PHP comment data te kunnen halen. En daar hebben we een code voor gemaakt. Cool he?

 

stappenplan

We zullen je door dit proces heen loodsen met een stappenplan (yes, dat is onze giveaway), zodat ook jij tijd gaat besparen. Hier komt-ie:

1. Neem de volgende code in de functions.php op:

/*
 * ACF Blocks
 */
// - Replace 'your-blocks-category' for your blocks category slug
// - Replace 'Your blocks category name' for your blocks category name
// - Replace 'rgb(0, 127, 183)' for your block icon color
if (class_exists('acf')) {
   function yourtheme_block_categories($categories, $post)
   {
       return array_merge(
           $categories,
           array(
               array(
                   'slug' => 'your-blocks-category',
                   'title' => 'Your blocks category name'
               ),
           )
       );
   }

   add_filter('block_categories', 'yourtheme_block_categories', 10, 2);


   function yourtheme_acf_blok_init()
   {
       // check function exists
       if (function_exists('acf_register_block')) {
           $blocksFolder = get_stylesheet_directory() . '/template-parts/blocks/';

           $blockFiles = scandir($blocksFolder);

           foreach ($blockFiles as $blockFile) {
               if (substr($blockFile, 0, 1) == '.') {
                   continue;
               }

               $blockData = get_file_data($blocksFolder . $blockFile, [
                   'Title' => 'Title',
                   'Description' => 'Description',
                   'Icon' => 'Icon'
               ]);

               $cleanBlockName = str_replace('.php', '', $blockFile);

               // Register block
               acf_register_block_type(array(
                   'name' => $cleanBlockName,
                   'title' => $blockData['Title'],
                   'description' => $blockData['Description'],
                   'render_callback' => 'yourtheme_acf_block_render_callback',
                   'mode' => 'edit',
                   'category' => 'your-blocks-category',
                   'icon' => [
                       'foreground' => 'rgb(0,0,0)',
                       'src' => $blockData['Icon']
                   ]
               ));
           }
       }
   }

   add_action('acf/init', 'yourtheme_acf_blok_init');

   function yourtheme_acf_block_render_callback($block)
   {
       // convert name ("acf/testimonial") into path friendly slug ("testimonial")
       $slug = str_replace('acf/', '', $block['name']);

       // include a template part from within the "template-parts/blocks" folder
       if (file_exists(get_theme_file_path("/template-parts/blocks/{$slug}.php"))) {
           include(get_theme_file_path("/template-parts/blocks/{$slug}.php"));
       }
   }
}

2. Na het plaatsen van deze code dien je een aantal delen te zoeken/vervangen in je code:

    • Vervang ‘your-blocks-category’ voor de gewenste categorie slug;
    • Vervang ‘your blocks category name’ voor de gewenste categorie naam;
    • Vervang ‘rgb(0,0,0)’ voor de gewenste iconenkleur.

3. Vervolgens zorg je ervoor dat je in je thema een map /template-parts/blocks/ hebt.
Zet hier een nieuw PHP bestand in met de volgende inhoud:

<?php
/*
* Title: Voorbeeld
* Description: Een aangepast voorbeeld blok.
* Icon: text
*/
?>
<h1>Voorbeeld</h1>

4. In dit bestand gaan we gebruikmaken van de slimme techniek van WordPress om uit een PHP comment data te kunnen halen.
Zoals te zien is in het voorbeeld, kun je gemakkelijk je Gutenberg block een titel, omschrijving en icoon geven.

    • Voor de iconen gebruiken we Dashicons, de standaard iconen van de WordPress beheeromgeving. Mocht je bijvoorbeeld het icoon dashicons-format-gallery willen tonen, dan vul je format-gallery in bij de ‘Icon:’ comment.

5. Je kunt nu via de Gutenberg Editor dit ‘voorbeeld’ gebruiken.
Dit levert nu nog een vaste tekst op, maar alle onderdelen in deze blocks zijn dynamisch te maken met ACF velden. Het ophalen van waardes van de ACF velden in het block werkt op dezelfde manier als bij het ophalen van waardes in een post of pagina, door de “get_field(‘veldnaam’)” en “the_field(‘veldnaam’)” functies (en anderen) te gebruiken. Je hoeft hier niet mee aan te geven om welke post, pagina of block het gaat, dit verzorgt ACF volledig voor je.

    • Maak in ACF een nieuwe groep aan;
    • Stel je velden in en koppel deze niet aan een ‘post type’ of ‘opties’ pagina, maar aan een ‘block’. Kies voor het block dat je hebt aangemaakt en voilà: je velden zullen in de Gutenberg editor getoond worden wanneer je jouw block toevoegt aan de pagina.

6. Wil je je Gutenberg opzet helemaal briljant maken? Dan hebben we nog een extra tip!
Je kunt namelijk de CSS van je website inladen in Gutenberg, zodat alle blocks die je in je editor ziet er exact zo uitzien als in de weergave van je website. Voeg hiervoor de volgende code toe aan je functions.php:

add_theme_support('editor-styles');

function yourtheme_editor_styles()
{
   // Add the editor style
   add_editor_style('style.css');
}

add_action('admin_init', 'yourtheme_editor_styles');

Klaar om de meest uitgebreide blocks te gaan bouwen in Gutenberg? #beamazing

Meer toffe ‘how to’s’ of goede verhalen? Check al onze blogs.