BLOCS

RÉUTILISABLES

Exploiter un principe clé de Gutenberg

Jb Audras – WordCamp Marseille – 29 novembre 2019

À PROPOS

Jb Audras

Directeur technique de l’agence Whodunit

WordPress Core Developer

WP 5.3 Release Focus Lead

WP Accessibility Team Representative

jeanbaptisteaudras.com – @audrasjb

Objectif de base de Gutenberg

LA COHÉRENCE

Shortcodes, widgets, menus, éditeur, champs personnalisés…

Trop de façons différentes de gérer du contenu sur WordPress

Le bloc réutilisable

Principes clés

  • Simplicité de l’interface : accessible et compréhensible par tous
  • Universalité : utilisable pour tout contenu du site
  • Synchronisation : contenu du bloc synchronisé à travers le site
  • Désynchronisation : contenu à nouveau indépendant

Exemples de blocs réutilisables

  • Bloc auteur
  • Disclaimer licence / CGV
  • Retrouvez-moi sur
  • Call to Action
  • HTML personnalisé
  • Et même du pseudo templating ?

Comment ça marche ?

  • Gestion en back-office :
    • Sélection/recherche de blocs réutilisables
    • Modification des blocs et synchronisation/désynchronisation
    • Écran de gestion dédié (un peu caché par défaut)
    • Création de blocs en dehors du contexte Post
    • Importer/exporter des blocs réutilisables
  • Un contenu transversal au site enregistré au sein d’un type de publication natif wp_block

Wait, un CPT NATIF ?

Genre un CPT qu’on peut requêter avec WP_Query ?

Dont le contenu est affichable via the_content ?

TEST

  • Récupération du contenu du bloc à partir de son ID
  • Affichage du contenu
$post_content = get_post_field( 'post_content', $post_id );
echo apply_filters( 'the_content', $post_content );

Une fonction PHP dédiée

Utilité : n’importe où dans le thème

functions.php

function get_reusable_block( $id ) {
	$content_post = get_post( $id );
	$content = apply_filters(
		'the_content',
		$content_post->post_content 
	);
	return $content;
}

Utilisation :

echo get_reusable_block( 57 );

Un code court

Utilité : éditeur classique, champ ACF, message Gravity Forms…

functions.php

function reusable_shortcode( $atts ) {
	extract( shortcode_atts( array(
		'id' => '',
	), $atts ) );
	$content = get_reusable_block( $id );
	return $content;
}
add_shortcode( 'reusable', 'reusable_shortcode' );

Utilisation :

[ reusable id="57" ]

POINT D’ÉTAPE

Nous savons maintenant insérer des blocs Gutenberg en dehors de l’éditeur !

Allons plus loin !

Reusable Blocks Extended

Une extension de démonstration des fonctionnalités potentielles
des blocs réutilisables, accessible à tout le monde.

Le back-office

  • Affichage de l’écran Blocs réutilisables
function reusable_menu_display( $type, $args ) {
	if ( 'wp_block' !== $type ) { return; }
	$args->show_in_menu = true;
	$args->_builtin = false;
	$args->labels->name = 'Blocs réutilisables';
	$args->labels->menu_name = 'Blocs réutilisables';
	$args->menu_icon = 'dashicons-screenoptions';
	$args->menu_position = 58;
}
add_action( 'registered_post_type', 'reusable_menu_display', 10, 2 );

Ajout d’un widget dédié

L’écran Blocs réutilisables

Ajout du nombre d’occurrences d’un bloc et d’un lien vers les contenus concernés

Ajout d’utilitaires avancés

  • Code court et fonction PHP prêts à l’emploi
  • Aperçu du bloc

CHALLENGE

Utiliser Gutenberg sur un site sans Gutenberg

😂

C’est parti pour la démo

CHALLENGE ACCEPTED

🙈

MERCI !

me connaissant, je suppose qu’il n’y a plus de temps pour les questions…
désolé… mais je suis disponible après la conf !

Liens divers :
– Présentation : jeanbaptisteaudras.com/marseille2019
– Reusable Blocks Extended : https://fr.wordpress.org/plugins/reusable-blocks-extended/