Création d'un bloc Gutenberg avec ACF 5.8

acf-bloc-membre-css-grid.css

/*
la classe .grille-equipe est ajoutée dans la balise body avec l'extension
Custom Body Class
https://fr.wordpress.org/plugins/wp-custom-body-class/
*/

/* Suppression des speudo éléments :before et :after qui sont comptés dans la grille */
.grille-equipe .entry-content:before,
.grille-equipe .entry-content:after {
  display: none;
}

/* Création de la grille responsive sans media query */
.grille-equipe .entry-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(39rem, 1fr));
  grid-gap: 4rem;
}

/* Imposer la pleine largeur sur certains éléments */
.grille-equipe .post-edit-link {
  grid-column: 1 / -1;
}

acf-bloc-page-block-category.php

<?php 
/** 
  * Catégorie de block sur mesure
  * 
  * Attention à la version de WordPress
  * @link https://developer.wordpress.org/reference/hooks/block_categories_all/
  * @author Grégoire Noyelle
  */
 function acf_bloc_gutenberg_categorie_projet( $block_categories, $block_editor_context ) {
	return array_merge(
		$block_categories,
        array(
            array(
                'slug'  => 'category-slug',
		'title' => __( 'Category Name', 'acf-gutenberg-blocs' ),
                'icon'  => 'wordpress',  // Optionnel             
            )
        )
	);
}
// Activation du hook en fonction de la version de WordPress
if ( version_compare( $GLOBALS['wp_version'], '5.8', '<' ) ) {
    add_filter( 'block_categories', 'acf_bloc_gutenberg_categorie_projet', 10, 2 );
} else {
    add_filter( 'block_categories_all', 'acf_bloc_gutenberg_categorie_projet', 10, 2 );
}

acf-bloc-page-extension.php

<?php
/*
Plugin Name: ACF Blocs Membre pour l'éditeur moderne
Plugin URI: https://wwww.gregoirenoyelle.com
Description: Exemple d'extension avec ACF pour l'éditeur moderne (Gutenberg).
Version: 1.0
Author: Grégoire Noyelle
Author URI: http://wwww.gregoirenoyelle.com
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Domain Path: /languages
Text Domain: acf-bloc-membres
*/


//* If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
    die;
}


/***
* LIENS FICHIER PHP
*/

// Fichier de functions pour ACF
include_once plugin_dir_path( __FILE__ ) . 'inc/function-acf.php';

acf-bloc-register-theme.php

<?php
/***
 * Fichier pour la création de blocs Gutenberg avec ACF
 *
 */

// Ajouter un bloc pour les pages
// https://www.advancedcustomfields.com/resources/acf_register_block_type/
function gn_bloc_gutenberg_page() {
	
	// vérifie si la bonne version ACF. Dans le cas contraire tout s'arrête
	if ( ! function_exists('acf_register_block_type') )
		return;
	// Déclaration de l'icone
	// @link: https://www.svgrepo.com/
	$icon = '$svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" stroke="#277c32" stroke-width="3"><path d="M44 0c-2.4 0-4.9.6-7 1.6-4.3-2.1-9.7-2.1-14 0C20.8.5 18.4 0 16 0 7.2 0 0 7.2 0 16c0 7.5 5 14 12 15.8V59c0 .6.4 1 1 1h34c.6 0 1-.4 1-1V31.8C55 30 60 23.5 60 16c0-8.8-7.2-16-16-16zM14.1 58v-4H46v4H14.1zm32.7-28c-.5.1-.8.5-.8 1v21H14.1V32H32v-2H13.3C6.9 28.7 2.1 22.7 2.1 16c0-7.7 6.3-14 14-14 2.3 0 4.5.6 6.5 1.6.3.2.6.2.9 0 4-2.1 9.1-2.1 13.1 0 .3.2.6.2.9 0C39.4 2.5 41.7 2 44 2c7.7 0 14 6.3 14 14 0 6.7-4.8 12.7-11.2 14z"/><path d="M17 48h2v2h-2zM21 48h2v2h-2zM25 48h2v2h-2zM29 48h2v2h-2zM33 48h2v2h-2zM37 48h2v2h-2zM41 48h2v2h-2z"/></svg>';
	
	// Enregistrement du bloc
	acf_register_block_type(array(
		'name' => 'membre-equipe',
		'title' => 'Membres de l\'équipe',
		// 'render_template' => get_stylesheet_directory() .'/template/votre-fichier.php',
		'render_callback' => 'gn_bloc_gutenberg_page_callback',
		'enqueue_style'   => get_stylesheet_directory() . '/css/block-equipe.css',
		'enqueue_script'   => get_stylesheet_directory() . '/js/block-equipe.js',	
		'category' => 'formatting',
		'icon' => $icon,
		'mode' => 'edit',
		'post_types' => array('page'),
		'keywords' => array('profile', 'user', 'author'),
		'supports' => array(
			'align' => false,
			'align_content' => false,
			'jsx' => false,
			'customClassName' => true,
			'mode' => false, // true par défaut
			'multiple' => true 			
		)	
	));
}
add_action('acf/init', 'gn_bloc_gutenberg_page');


// Affichage du bloc
function gn_bloc_gutenberg_page_callback() {

	// Variables
	$prenom = get_field('blocequipe_prenom');
	$nom = get_field('blocequipe_nom');
	$bio = get_field('blocequipe_bio');
	$img_id = (int) get_field('blocequipe_photo');
	$img = wp_get_attachment_image( $img_id, 'thumbnail' );
	$email = get_field('blocequipe_email');
	$site = get_field('blocequipe_site');
	$back_color = get_field('blocequipe_arriere_plan');
	$padding = get_field('blocequipe_marge_interne');

	// Appel du fichier d'affichage
	ob_start();
	include get_stylesheet_directory() . '/view/view-bloc-equipe.php';
	echo ob_get_clean();

}

acf-bloc-register-view.php

<?php
// Affichage bloc equipes
// Chargé depuis le fichier fonctions-acf.php
?>
<section class="membre-equipe" style="background-color:<?php echo esc_html($back_color); ?>; padding:<?php echo esc_html($padding); ?>rem;">
	<h2><?php echo esc_html($prenom); ?> <?php echo esc_html($nom); ?></h2>
	<div class="photo"><?php echo $img ?></div>
	<div class="membre-bio">
		<?php echo wp_kses_post($bio) ?>
	</div>
	<div class="membre-meta">
		<h3>Références supplémentaires</h3>
		<ul>
			<li><a href="<?php echo esc_url( $site ); ?>">Visiter le site internet</a></li>
			<li><a href="mailto:<?php echo esc_html( antispambot($email) ); ?>">Envoyer un message</a></li>
		</ul>
	</div>
</section>

acf-gutenberg-bloc-affichage-html.hml

<!-- wp:acf/relationship {"id":"block_5bc8c2924b0ed","data":{"field_5bc8a916e996a":["59","1655"]},"name":"acf/relationship"} /-->

acf-register-bloc-plugin.php

<?php
/***
 * Fichier pour la création de blocs Gutenberg avec ACF
 *
 */

// Ajouter un bloc pour les pages
// https://www.advancedcustomfields.com/resources/acf_register_block/
function acf_bloc_gutenberg_equipe() {
	// vérifie si c'est la bonne version ACF ou si ACF est actif. Dans le cas contraire tout s'arrête. 
	if ( ! function_exists('acf_register_block') )
		return;
	// Déclaration de l'icone
	// @link: https://www.svgrepo.com/
	$icon = '$svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" stroke="#277c32" stroke-width="3"><path d="M44 0c-2.4 0-4.9.6-7 1.6-4.3-2.1-9.7-2.1-14 0C20.8.5 18.4 0 16 0 7.2 0 0 7.2 0 16c0 7.5 5 14 12 15.8V59c0 .6.4 1 1 1h34c.6 0 1-.4 1-1V31.8C55 30 60 23.5 60 16c0-8.8-7.2-16-16-16zM14.1 58v-4H46v4H14.1zm32.7-28c-.5.1-.8.5-.8 1v21H14.1V32H32v-2H13.3C6.9 28.7 2.1 22.7 2.1 16c0-7.7 6.3-14 14-14 2.3 0 4.5.6 6.5 1.6.3.2.6.2.9 0 4-2.1 9.1-2.1 13.1 0 .3.2.6.2.9 0C39.4 2.5 41.7 2 44 2c7.7 0 14 6.3 14 14 0 6.7-4.8 12.7-11.2 14z"/><path d="M17 48h2v2h-2zM21 48h2v2h-2zM25 48h2v2h-2zM29 48h2v2h-2zM33 48h2v2h-2zM37 48h2v2h-2zM41 48h2v2h-2z"/></svg>';

	// Enregistrement du bloc
	acf_register_block_type(array(
		'name' => 'membre-equipe',
		'title' => 'Membres de l\'équipe',
		'render_callback' => 'acf_bloc_gutenberg_equipe_callback',
		'enqueue_style'   => plugin_dir_url(__DIR__ ) . 'css/block-equipe.css',
		'enqueue_script'   => plugin_dir_url( __DIR__ ) . 'js/block-equipe.js',
		'category' => 'formatting',
		'icon' => $icon,
		'mode' => 'edit',
		'post_types' => array('page'),
		'keywords' => array('profile', 'user', 'author'),
		'supports' => array(
			'align' => false,
			'align_content' => false,
			'jsx' => false,
			'customClassName' => true,
			'mode' => false, // true par défaut
			'multiple' => true 			
		)			
	));
}
add_action('acf/init', 'acf_bloc_gutenberg_equipe');


// Affichage du bloc
function acf_bloc_gutenberg_equipe_callback() {

	// Variables
	$prenom = get_field('blocequipe_prenom');
	$nom = get_field('blocequipe_nom');
	$bio = get_field('blocequipe_bio');
	$img_id = (int) get_field('blocequipe_photo');
	$img = wp_get_attachment_image( $img_id, 'thumbnail' );
	$email = get_field('blocequipe_email');
	$site = get_field('blocequipe_site');
	$back_color = get_field('blocequipe_arriere_plan');
	$padding = get_field('blocequipe_marge_interne');

	// Appel du fichier d'affichage
	ob_start();
	include plugin_dir_path(__DIR__) . 'view/view-bloc-equipe.php';
	// Affichage et nettoyage de la mémoire tampon
	echo ob_get_clean();

}

gutenberg-bloc-affichage-html.html

<!-- wp:paragraph -->
<p>WordPress a toujours sauvegardé les contenus de l'éditeur classique dans la table<code>wp_post</code></p>
<p>Les champs personnalisé (utilisé par ACF) dans la table<code>wp_postmeta</code>.</p>
<p>Et ceci n'a pas changé avec l'éditeur moderne (Gutenberg). Voici en direct comment est sauvegardé le contenu dans la base.</p>
<p>Les commentaires autorisent de passer de l'éditeur classique à l'éditeur moderne (Gutenberg) sans rien casser.<br>
Quelle nouveauté !</p>
<!-- /wp:paragraph -->