Catégories

Deprecated: category_link est obsolÚte depuis la version 2.5.0 ! Utilisez term_link à la place. in /home/jeanbaptr/www/2019/wp-includes/functions.php on line 5091

Deprecated: category_link est obsolÚte depuis la version 2.5.0 ! Utilisez term_link à la place. in /home/jeanbaptr/www/2019/wp-includes/functions.php on line 5091

Deprecated: category_link est obsolÚte depuis la version 2.5.0 ! Utilisez term_link à la place. in /home/jeanbaptr/www/2019/wp-includes/functions.php on line 5091
Conférences Extensions WordPress

📱Gutenberg & les blocs rĂ©utilisables. Exploiter une fonctionnalitĂ© puissante de l’Ă©diteur

SynthÚse de ma conférence
au WordCamp Marseille 2019

Le 29 novembre dernier, j’ai eu le plaisir de donner une confĂ©rence au WordCamp Marseille 2019.

J’en profite pour fĂ©liciter Long Hai et l’ensemble de l’Ă©quipe d’organisation et les bĂ©nĂ©voles pour la rĂ©ussite de cet Ă©vĂšnement. Bravo car c’est un sacrĂ© dĂ©fi d’organiser un WordCamp, et c’est un Ă©vĂšnement toujours trĂšs attendu.

Cette fois-ci, j’ai proposĂ© une confĂ©rence traitant Ă  part Ă©gale la technique et l’Ă©ditorial, intitulĂ©e :

Blocs réutilisables
Exploiter un des principes clés de Gutenberg

Le titre annoncĂ© Ă©tait un peu diffĂ©rent et un poil plus provocateur, en parlant des blocs rĂ©utilisables comme l’une des killer features de Gutenberg
 mais il s’agit bien pour moi d’une fonctionnalitĂ© hyper puissante.

Petit apartĂ© Ă  propos de cette confĂ©rence : j’ai choisi de monter ma prĂ©sentation en utilisant Slide & Presentations, une extension disponible sur le rĂ©pertoire WordPress.org (voir ci-contre). DĂ©veloppĂ©e par Ella van Durpe et utilisĂ©e pour la premiĂšre fois par Matt Mullenweg il y a quelques semaines au WordCamp US 2019, l’idĂ©e, c’est qu’elle permet de construire l’ensemble de sa prĂ©sentation en utilisant directement l’Ă©diteur Gutenberg !
Parfait pour mon sujet du jour 😊

đŸŽ„ Les slides de ma prĂ©sentation

Les slides de la prĂ©sentation, fiĂšrement propulsĂ©es par Gutenberg :

Note : si vous souhaitez insĂ©rer cette visionneuse de slides de ma confĂ©rence sur votre site, copiez-collez le code suivant :

<iframe src="https://jeanbaptisteaudras.com/presentation/presentation/wordcamp-marseille-2019/#/" style="width:100%;height:600px;border:20px solid #d7cfab;" class="alignwide"></iframe>

La vidéo de la conférence est également disponible sur WordPress.tv :

👉 SynthĂšse de la confĂ©rence

Pour celles et ceux qui n’Ă©taient pas lĂ  ou qui Ă©taient en train de voir l’excellente confĂ©rence de FrĂ©dĂ©rique Battel dans la salle d’Ă  cĂŽtĂ©, voici une petite synthĂšse. Vous comprendrez mieux pourquoi j’aime tant cette fonctionnalitĂ© de Gutenberg !

❓Pourquoi parler des blocs rĂ©utilisables ? Qu’ont-ils de si spĂ©cial ?

Ah ça ! Les blocs rĂ©utilisables et moi c’est une grande histoire d’amour ! 💖

L’idĂ©e du bloc rĂ©utilisable, c’est d’ajouter au sein de l’Ă©diteur la possibilitĂ© d’enregistrer un bloc – ou un ensemble de blocs – pour pouvoir le rĂ©utiliser en dehors du contexte dans lequel il a Ă©tĂ© construit. Une fois enregistrĂ©, on le retrouve dans l’outil d’insertion soit en allant dans la section « blocs rĂ©utilisables Â», soit en le recherchant par le nom que vous lui avez donnĂ©.

Les principes-clĂ©s :

  • SimplicitĂ© : une interface claire et accessible quel que soit votre niveau technique
  • UniversalitĂ© : les blocs de contenus sont rĂ©utilisables de partout sur le site de façon transversale
  • Synchronisation : le contenu de chaque bloc rĂ©utilisable est synchronisĂ©, donc si je le modifie Ă  un endroit, le contenu sera mis Ă  jour de partout
  • DĂ©synchronisation : la synchronisation peut ĂȘtre coupĂ©e en un clic, en utilisant l’option « convertir en bloc normal ». Son contenu est alors modifiable sans altĂ©rer les autres contenus utilisant le mĂȘme bloc rĂ©utilisable

Lorsque l’on utilise le menu de l’Ă©diteur (les trois points verticaux), il est possible de cliquer sur le menu « GĂ©rer tous les blocs rĂ©utilisables Â».

Cela vous amĂšnera sur une interface dĂ©diĂ©e de l’administration de WordPress permettant de gĂ©rer tous vos blocs rĂ©utilisables comme vous le feriez pour vos articles ou vos pages.

En outre, cette page de listing nous propose des boutons d’import et d’export de blocs rĂ©utilisables. Ainsi, vous pouvez carrĂ©ment crĂ©er des blocs rĂ©utilisables sur un site puis les importer sur un autre. IntĂ©ressant 😉

Si vous ouvrez un bloc existant ou si vous en crĂ©ez un nouveau, vous allez pouvoir ĂȘtre Ă  mĂȘme de crĂ©er/modifier un bloc rĂ©utilisable en dehors du contexte de la publication dans laquelle il sera utilisĂ©.

🎓Quelques exemples bien concrets d’usage des blocs rĂ©utilisables

Bloc auteur

Un collection de blocs contenant la biographie des auteurs de vos articles rĂ©alisĂ©e avec un bloc Groupe avec Ă  l’intĂ©rieur un bloc MĂ©dia + Texte ? Rien de plus simple ! Et ensuite, il ne vous reste plus qu’Ă  choisir parmi votre collection de blocs « Auteur bio Â» pour ajouter la fiche correspondante !

(voir exemple ci-contre sur Twenty Nineteen)

Disclaimer licence / CGV

Vous avez des CGV ou des informations concernant la licence d’exploitation de vos contenus/produits que vous souhaitez afficher un peu partout sur votre site, y compris au sein de vos contenus ?

Ne cherchez plus : un bloc rĂ©utilisable avec un paragraphe prĂ©-rĂ©digĂ© et c’est fait ! ✅

Retrouvez-moi sur


Vous ĂȘtes du genre sociable et vous aimez rappeler Ă  tout le monde que vous ĂȘtes prĂ©sents sur tous les rĂ©seaux sociaux ? Un bloc avec le picto + lien vers chaque rĂ©seau social et Ă  vous les followers ! 😁

Call to Action

Vous n’ĂȘtes pas lĂ  pour faire mumuse. Votre objectif est la conversion de vos visiteurs en clients potentiels ? CrĂ©ez-donc trois ou quatre call to action Ă  l’aide du bloc banniĂšre avec un beau bouton bien seyant et attirez Ă  vos formulaires de devis tous ces prospects potentiels ! đŸ’¶ 😂

HTML personnalisé

Vous avez besoin d’ajouter rĂ©guliĂšrement une iframe ou tout autre type de contenu HTML personnalisĂ© au grĂ© de vos contenus ? Genre
 des pubs ? 😬

Tant pis pour vos visiteurs mais tant mieux pour vous : un bon vieux bloc rĂ©utilisable contenant votre script de pub prĂ©fĂ©rĂ© (sĂ©rieux vous avez vraiment un script de pub prĂ©fĂ©rĂ© ?) et vous voilĂ  prĂȘt Ă  rentabiliser votre talent publi-rĂ©dactionnel 💰 😆

Et mĂȘme du pseudo templating ?

Titre, sous-titre, chapeau, media+texte puis texte+media
 Vous utilisez constamment la mĂȘme trame pour rĂ©diger vos articles ?

Et si vous composiez deux ou trois agencements de bloc ? Vous pourriez alors les utiliser comme des gabarits de contenus que vous n’auriez alors plus qu’Ă  insĂ©rer dans votre nouvel article, le dĂ©synchroniser puis remplir de contenu !

MĂȘme sans ĂȘtre dĂ©veloppeur pour un sou, vous ĂȘtes ainsi en mesure de crĂ©er vous mĂȘmes vos propres gabarits de contenu, sans l’aide de quiconque ! đŸ’Ș 😏




Mais revenons Ă  nos moutons, et parlons un peu technique. Si la technique n’est pas votre fort, ne partez pas : tout le monde y trouvera son compte vous allez voir 🙂

đŸ”©Blocs rĂ©utilisables : il y a quoi sous le capot ?

Les blocs rĂ©utilisables sont en fait stockĂ©s dans un type de publication – un CPT pour Custom Post Type – qui est donc transversal Ă  l’ensemble du site.

Les blocs réutilisables sont
des contenus transversaux au site, enregistrĂ©s au sein d’un type de publication natif ‘wp_block’

Donc que ce soit Ă  partir de l’Ă©diteur d’un article ou d’une page ou Ă  partir de l’interface de gestion des blocs rĂ©utilisables, Ă  partir du moment oĂč un bloc est enregistrĂ© comme Ă©tant rĂ©utilisable, son contenu n’appartient plus aux publications dans lesquelles il apparaĂźt mais il devient indĂ©pendant.

Ce type de publication spécifique porte le doux nom de wp_block.

D’ailleurs, il est possible d’accĂ©der Ă  la page d’administration listant tous les blocs rĂ©utilisables en utilisant l’URL suivante :

https://example.com/wp-admin/edit.php?post_type=wp_block

je suppose que vous aurez compris qu’il faut remplacer example.com par le nom de domaine de votre site mais je le prĂ©cise en tout petit au cas oĂč

Du coup qui dit type de publication indépendant


đŸ˜±Un bloc rĂ©utilisable peut ĂȘtre appelĂ© en dehors du contexte d’un article ou d’une page

Quand j’ai compris ça lors de la phase de dĂ©veloppement de Gutenberg, je n’ai pas compris tout de suite ce que cela impliquerait plus tard lors de la mise en production de Gutenberg sur 100% des sites web sur lesquels j’interviendrai (oui Ă  l’agence Whodunit, Gutenberg n’est pas une option, je pense que vous l’aurez compris 😂).

Ce que ça implique c’est que nous nous retrouvons avec des blocs de contenus crĂ©es avec toute la richesse de mise en page Ă©ditoriale que permet Gutenberg, et qui sont en fait tout bonnement des types de publications dotĂ©s d’un identifiant, d’une date de publication, d’un titre et d’un contenu (le contenu du bloc rĂ©utilisable lui-mĂȘme).

C’est merveilleux non ?

♻RĂ©cupĂ©ration d’un bloc rĂ©utilisable pour l’utiliser en dehors du contexte d’un article

Pour cela il suffit de connaĂźtre l’identifiant de l’article en question. Pour l’instant, vous pouvez le faire en vous rendant sur l’Ă©dition du bloc rĂ©utilisable et en rĂ©cupĂ©rant son ID dans l’URL de l’Ă©dition du bloc :

À partir du moment oĂč l’on connaĂźt l’ID d’un Ă©lĂ©ment, il est trĂšs simple de rĂ©cupĂ©rer son contenu. Le bout de code suivant va nous permettre de rĂ©cupĂ©rer le champ correspondant au contenu de l’article 57 (ID de mon bloc rĂ©utilisable), puis d’appliquer le filtre the_content au contenu rĂ©cupĂ©rer pour le formatter comme il faut pour un affichage en front.

$post_id = '57';
$post_content = get_post_field( 'post_content', $post_id );
echo apply_filters( 'the_content', $post_content );

Vous pouvez voir le rĂ©sultat ci-dessous (capture d’Ă©cran de la dĂ©monstration faite pendant la confĂ©rence) :

Chouette, ça fonctionne parfaitement bien 😎

♻CrĂ©er une fonction PHP permettant d’appeler un bloc rĂ©utilisable n’importe oĂč

Nous pouvons ensuite rationaliser ça en plaçant ce bout de code dans une fonction, que nous ajouterons dans le fichier functions.php de notre thĂšme enfant (le cas Ă©chĂ©ant) :

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

Ensuite, nous pourrons appeler cette fonction PHP oĂč nous voulons dans notre thĂšme pour afficher n’importe quel bloc rĂ©utilisable :

// Affiche le contenu du bloc réutilisable
// portant l'ID '57'
echo get_reusable_block( 57 );

Sympa !

⚙CrĂ©er un shortcode permettant d’appeler des blocs rĂ©utilisables

MĂȘme si les codes courts / shortcodes sont de moins en moins utiles aujourd’hui et que leur utilisation est un peu archaĂŻque, cela reste un bon moyen d’insĂ©rer des Ă©lĂ©ments dans des endroits de l’interface oĂč l’Ă©diteur de blocs n’est (pour l’instant) pas prĂ©sent : widget texte, message de confirmation d’un formulaire Gravity Forms, champ WYSIWYG d’Advanced Custom Fields (ACF)


Voici un bout de code pour crĂ©er votre shortcode, Ă  placer dans votre fichier functions.php :

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

Ensuite pour l’utiliser, c’est trĂšs simple :

[reusable id="57"]

Cela vous permet de bĂ©nĂ©ficier de l’Ă©diteur de blocs Gutenberg pour crĂ©er vos contenus, et d’afficher ensuite ces contenus n’importe oĂč sur votre installation WordPress ! đŸ€©

đŸ“șAfficher l’Ă©cran Blocs RĂ©utilisables dans le menu de l’administration

Par dĂ©faut, le seul moyen d’aller sur l’Ă©cran de gestion des blocs rĂ©utilisables, c’est de passer par le menu de l’Ă©cran d’Ă©dition d’une publication (pas trĂšs rapide) ou de saisir son adresse dans la barre d’URL du navigateur (pas trĂšs pratique).

Si vous utilisez beaucoup les blocs rĂ©utilisables, je vous conseille d’ajouter cet Ă©cran dans le menu de l’administration WP, comme on le ferait pour n’importe quel type de publication personnnalisĂ© (CPT). Dans votre fichier functions.php, ajoutez le bout de code suivant :

function reusable_menu_display( $type, $args ) {
	if ( 'wp_block' !== $type ) { return; }
	$args->show_in_menu = true;
	$args->_builtin = false;
	// Pour changer l'intitulé du menu, c'est ci-dessous
	// Remplacez 'Blocs réutilisables' par esc_html__( 'Reusable blocks', 'textdomain' ) 
	// en remplaçant "textdomain" par le Text Domain de votre thÚme si votre thÚme est internationalisé
	// et que vous souhaitez traduire cet élément de menu pour un site multilingue
	$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 );

RĂ©sultat :

🚀Aller plus loin avec les blocs rĂ©utilisables : l’extension Reusable Blocks Extended

Il y a quelques mois, j’ai publiĂ© une extension sur le rĂ©pertoire WordPress.org destinĂ©e Ă  donner accĂšs Ă  toutes ces fonctionnalitĂ©s sans avoir Ă  utiliser le moindre bout de code. Cette extension s’appelle Reusable Blocks Extended.

🍭AmĂ©lioration de l’Ă©cran de gestion des blocs rĂ©utilisables

La premiĂšre chose que va faire cette extension, c’est Ă©videmment ajouter un accĂšs aux blocs rĂ©utilisables dans le menu de l’administration WordPress.

Cet Ă©cran de listing des blocs rĂ©utilisables va Ă©galement ĂȘtre largement amĂ©liorĂ©, et on commence par ajouter une colonne dans la liste, qui permettra de lister les occurrences de chaque bloc rĂ©utilisable.

Cela permet de savoir dans combien de publications le bloc est utilisé et de savoir trÚs exactement lesquelles.

🔹Utilitaires prĂȘts Ă  l’emploi : shortcode et fonction PHP

Pour chaque bloc rĂ©utilisable, l’extension gĂ©nĂšre un code court et une fonction PHP prĂȘts Ă  l’emploi, permettant d’insĂ©rer un bloc n’importe oĂč sur votre site. Que vous vouliez insĂ©rer votre bloc dans les fichiers de template de votre thĂšme ou dans les contenus de votre site, vous n’avez qu’Ă  copier le code fourni.

đŸ–„PrĂ©visualiser vos blocs rĂ©utilisables directement depuis l’Ă©cran de gestion !

C’est une fonctionnalitĂ© expĂ©rimentale, mais elle fonctionne plutĂŽt bien pour les blocs de contenus. Un bouton vous permet d’ouvrir un aperçu du bloc directement depuis l’Ă©cran de gestion des blocs rĂ©utilisables.

📌Ajout d’un widget d’insertion de bloc rĂ©utilisable

En plus du code court et de la fonction PHP, l’extension Reusable Blocs Extended ajoute Ă©galement un widget supplĂ©mentaire aux widgets natifs de WordPress. Ce widget permet de choisir un bloc dans la liste de vos blocs rĂ©utilisables pour l’afficher sur l’un des emplacements de widgets de votre thĂšme.

đŸ„‡Le challenge : utiliser Gutenberg sur un site avec Gutenberg dĂ©sactivĂ© partout !

Ça c’Ă©tait la dĂ©mo-challenge de cette confĂ©rence !

L’idĂ©e c’est de partir d’un site sur lequel Gutenberg est complĂštement dĂ©sactivĂ© et d’arriver Ă  tout de mĂȘme y utiliser des blocs faits avec Gutenberg ! 😂

Bon, le challenge Ă©tait sĂ»rement plus rigolo Ă  suivre en live pendant la confĂ©rence, mais en gros voici les Ă©tapes de la dĂ©monstration :

  1. Sur une installation WordPress basique, installer l’extension Classic Editor et dĂ©sactiver totalement Gutenberg. Tous les types de publication doivent ĂȘtre paramĂ©trĂ©s pour ne proposer que l’ancien Ă©diteur.
  2. Installer l’extension Reusable Blocks Extended et l’activer sur le site.
  3. Aller dans le menu « Blocs rĂ©utilisables Â» dans l’administration de votre site WordPress.
  4. Créer un nouveau bloc réutilisable.
    Magie : Gutenberg est disponible pour ce type de publication (et uniquement celui-ci) âœš
  5. Revenir sur l’Ă©cran de gestion des blocs rĂ©utilisables.
  6. Récupérer le shortcode de votre bloc réutilisable.
  7. Créer un nouvel article ou modifier un article existant.
  8. Collez-y le shortcode, enregistrez l’article.
  9. Allez en front-office

  10. TADAAA !! Votre bloc rĂ©utilisable s’affiche, avec tous les styles prĂ©vus dans l’Ă©diteur !

Il est donc possible d’utiliser des blocs Gutenberg sur un site qui n’utilise pas du tout Gutenberg ! đŸ€©

C’est utile dans plein de cas concrets :

  • Vous avez dĂ©sactivĂ© Gutenberg car vous prĂ©fĂ©rez l’ancien Ă©diteur, mais vous avez un besoin ponctuel de mise en page avancĂ©e.
  • Vous avez dĂ©sactivĂ© Gutenberg car vous avez peur de casser vos contenus existants (pourtant, pas d’inquiĂ©tude Ă  avoir de ce cĂŽtĂ©-lĂ , les blocs existants sont automatiquement migrĂ©s vers le bloc « Classique Â» une fois Gutenberg activĂ©).
  • Vous avez dĂ©sactivĂ© Gutenberg car vous utilisez un autre constructeur de page / page builder, mais vous aimeriez bien pouvoir ponctuellement utiliser un bloc Gutenberg spĂ©cifique qui n’existe pas dans votre page builder.
  • Vous avez dĂ©sactivĂ© Gutenberg car votre site utilise Advanced Custom Fields de partout pour la gestion des contenus, mais vous avez ponctuellement un besoin de msie en page plus libre : insĂ©rez un bloc rĂ©utilisable que vous pourrez modifier avec Gutenberg !

Et sĂ»rement plein plein d’autres cas de figure que je n’ai pas prĂ©vu
 😊


Pour rappel, l’extension Reusable Blocks Extended est disponible gratuitement sur le rĂ©pertoire WordPress officiel :

Que vous ayez assistĂ© ou pas Ă  la confĂ©rence au WordCamp, n’hĂ©sitez pas Ă  commenter cet article pour poser vos questions ou pour apporter des prĂ©cisions, remarques, critiques ou autre ! 💬💚

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *