Instantly share code, notes, and snippets.

Embed
What would you like to do?
Création d'un bloc Gutenberg avec ACF 5.8
/*
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;
}
<?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';
<?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 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') )
return;
// Enregistrement du bloc
acf_register_block(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',
'category' => 'formatting',
'icon' => 'admin-users',
'mode' => 'edit',
'post_types' => array('page'),
'keywords' => array('profile', 'user', 'author')
));
}
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();
}
<?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>
<!-- wp:acf/relationship {"id":"block_5bc8c2924b0ed","data":{"field_5bc8a916e996a":["59","1655"]},"name":"acf/relationship"} /-->
<?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;
// Enregistrement du bloc
acf_register_block(array(
'name' => 'membre-equipe',
'title' => 'Membres de l\'équipe',
'render_callback' => 'acf_bloc_gutenberg_equipe_callback',
'category' => 'formatting',
'icon' => 'admin-users',
'mode' => 'edit',
'post_types' => array('page'),
'keywords' => array('profile', 'user', 'author')
));
}
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();
}
<!-- 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 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment