Créer vos propres blocs dans Gutenberg avec ACF

Faire ses propres blocs est l’une des fonctionnalités intéressantes du nouvel éditeur WordPress Gutenberg qui a été introduit fin 2018. Vous pouvez voir un exemple en direct de ce qu’il fait ici : https://wordpress.org/gutenberg/

L’éditeur Gutenberg a remplacé l’ancien éditeur de contenu WordPress (maintenant appelé éditeur classique) qui était un éditeur textarea TinyMCE classique avec des boutons ajoutés pour formater le contenu, un peu comme dans MS Word.

Gutenberg introduit un nouveau concept de construction de page, le champ de contenu de chaque page ou message est en fait une collection de blocs individuels qui peuvent être organisés comme le rédacteur de contenu le souhaite. C’est beaucoup plus simple que la plupart des constructeurs de pages, ces blocs sont des en-têtes, paragraphes, listes, images, citations, etc. Le nombre de blocs pré-construits est limité et c’est une bonne chose car nous espérons qu’il vous permet également de créer des blocs de contenu personnalisés.

Il y a différentes façons de créer vos propres blocs, notre technique préférée chez Outsourcify est d’utiliser le plugin ACF. Attention cependant, vous devez installer ACF Pro pour prendre en charge les blocs Gutenberg.

Créer un bloc est un peu comme créer un plugin et tout le code ci-dessous pour tous les blocs personnalisés utilisés par un site Web pourrait en fait être inclus dans un plugin personnalisé.uld actually be included in a custom plugin. Cela peut aussi se faire directement dans le thème, la magie s’exerçant surtout dans le fichier functions.php. C’est relativement simple, vous devez enregistrer le bloc, créer un groupe de champs avec tous les blocs qui sont nécessaires ( comme par exemple l’auteur ou une citation), et ensuite créer le fichier modèle PHP pour créer le bloc.

Ici, pour les besoins de l’exemple, nous allons créer un bloc très simple qui affiche un texte dans une boîte bleue arrondie.

Enregistrer un bloc

La fonction acf_register_block() est utilisée pour créer le bloc. Vous pouvez utiliser cette fonction pour personnaliser les détails du bloc, y compris un nom, un titre, une description, une icône ou plus.

Function.php:

add_action('acf/init', 'my_acf_init');
function my_acf_init() {
    // check function exists
    if( function_exists('acf_register_block') ) {
    	// register a testimonial block
    	acf_register_block(array(
            'name'              => 'content-theme',
            'title'             => __('Content with theme color'),
            'description'       => __('A custom content with theme color block.'),
            'render_callback'   => 'my_acf_block_render_callback',
            'category'          => 'formatting',
            'icon'              => 'format-aside',
            'Keywords'          => array( 'content-theme', 'theme'),
       ));
    }
}

Créer un groupe de champs

Après avoir enregistré le bloc, vous pouvez maintenant le voir dans la page du plugin ACF et créer tous les champs que vous voulez.

Vous devez sélectionner « Bloquer » dans les règles de placement et choisir le bloc que vous avez enregistré. Ces champs personnalisés sont maintenant associés au bloc.

Rendu du bloc

Enfin, vous devrez faire appel à votre modèle pour la création du bloc, puis créer votre modèle avec HTML et PHP.

Function.php:

function my_acf_block_render_callback( $block ) {
// convert name ("acf/content-theme") into path friendly slug ("content-theme")
 $slug = str_replace('acf/', '', $block['name']);
//Add template path of template(.php file) on your folder.
   if( file_exists(
get_theme_file_path("/templates/blocks/block-{$slug}.php") ) ) {
include( get_theme_file_path("/templates/blocks/block-{$slug}.php") );
    }
}

Block-content-theme.php

<?php
/**
* Block Name: Content with theme color
*
* This is the template that displays the content theme block.
*/

?>
<div class="content-theme">
<div class="title">
  <?php the_field('theme_title'); ?>
</div>
<div class="content">
  <?php the_field('theme_desc'); ?>
</div>
</div>

Adding the block in the editor

C’est tout, vous pouvez maintenant utiliser votre bloc dans l’éditeur.

Vous avez 2 modes différents : le mode éditeur et le mode prévisualisation. Le mode de prévisualisation nécessite que vous importiez le fichier CSS de front-end afin d’afficher le bloc comme vous l’avez prévu.

Mode éditeur

Mode aperçu

Cette fonction est utilisée pour importer votre thème CSS. Il affichera le thème css depuis le front-end dans le back-end pour prévisualiser le contenu.

Function.php:

function acf_block_style() {
    wp_enqueue_style('admin-blocks', get_template_directory_uri() .'/css/main.min.css');
}
add_action( 'admin_enqueue_scripts', 'acf_block_style' );

Main.min.css:

.content-theme .content-theme__title {
 font-size: 40px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-weight: bold; }

.content-theme .content-theme__desc {
 margin-top: 20px;
 padding: 30px;
 border: 3px solid #1CAAF5;
 color: #2F077B;
 border-radius: 15px; }

Maintenant, le bloc ici ressemble à ce qu’il devrait être :

Et il devrait en être de même sur le front-end du site Web.

')}