Skip to content

Instantly share code, notes, and snippets.

@gregoirenoyelle
Last active September 21, 2021 13:31
Show Gist options
  • Save gregoirenoyelle/dd44250ea6f5ff02940f6aa35dcf5065 to your computer and use it in GitHub Desktop.
Save gregoirenoyelle/dd44250ea6f5ff02940f6aa35dcf5065 to your computer and use it in GitHub Desktop.
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
/**
* 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 );
}
<?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_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();
}
<?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;
// 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();
}
<!-- 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