Comment créer son propre Guide de bienvenue Gutenberg • Capitaine WP

Vous l’avez peut-être déjà vu depuis quelques mois (décembre 2019) si vous utilisez l’extension Gutenberg (disponible depuis la 7.1), ou depuis quelques jours si vous avez mis à jour votre site vers WordPress 5.4.

Et oui, je parle bien du tout nouveau guide de bienvenue, initiation nécessaire pour ceux qui rencontreraient l’éditeur de blocs pour la première fois.

On apprend donc les basiques de l’éditeur, qu’est-ce qu’un bloc, quelle est son utilité, quels types de bloc sont disponible, etc.

Ce composant a tout de suite attiré ma curiosité, et je me suis demandé si il était possible de le modifier ou de créer son propre guide de bienvenue.

Après plusieurs jours de recherche et de tests, je me suis rendu compte que son édition n’était pas possible, j’ai donc continué à creuser le sujet, et j’ai compris comment créer son propre guide.

Tout d’abord, vous devez chargez vos fichiers JS et CSS avec le bon hook.

PHP

functions.php

<?php 
add_action( 'enqueue_block_editor_assets', function () {
	$plugin_js_path = '/dist/plugins-editor.js';

	wp_enqueue_script(
		'custom-plugins-editor',
		get_template_directory_uri() . $plugin_js_path,
		array( 'wp-i18n', 'wp-blocks', 'wp-edit-post', 'wp-element', 'wp-editor', 'wp-components', 'wp-data', 'wp-plugins', 'wp-edit-post' ),
		filemtime( get_template_directory() . $plugin_js_path ),
		true
	);

	$plugins_style_path = '/dist/plugins.css';

	wp_enqueue_style(
		"custom-plugins-editor-css",
		get_template_directory_uri() . $plugins_style_path,
		[],
		filemtime( get_template_directory() . $plugins_style_path )
	);

} );

Ensuite, place au plugin JS qui se chargera uniquement en présence de l’éditeur de bloc.

Ce plugin ajoute le composant PluginMoreMenuItem qui créer un nouvel élément au sein du menu (situé tout en haut à droite de l’éditeur).

On créer un nouveau flag customWelcomeGuide qu’on peut utiliser grâce à la fonction isFeatureActive et ainsi on affiche le composant CustomWelcomeGuide (code plus bad) uniquement si ce flag est actif.

Référez-vous à la formation Gutenberg pour savoir comment compiler le code JSX.

JSX

/**
 * Internal dependencies
 */
import CustomWelcomeGuide from './components/CustomWelcomeGuide';

/**
 * WordPress dependencies
 */
import { useDispatch, useSelect } from '@wordpress/data';
import { registerPlugin } from '@wordpress/plugins';
import { Fragment } from '@wordpress/element';
import { PluginMoreMenuItem } from '@wordpress/edit-post';

const CustomWelcomeGuidePlugin = () => {
	const { toggleFeature } = useDispatch( 'core/edit-post' );
	const isActive = useSelect( ( select ) => select( 'core/edit-post' ).isFeatureActive( 'customWelcomeGuide' ), [] );

	return (
		<Fragment>
			<PluginMoreMenuItem
				icon="admin-site-alt2"
				onClick={ () => {
					toggleFeature( 'customWelcomeGuide' );
				} }
			>
				Custom Welcome Guide
			</PluginMoreMenuItem>

			{ isActive && (
				<CustomWelcomeGuide />
			) }
		</Fragment>
	);
};

registerPlugin( 'custom-edit-post', {
	render: CustomWelcomeGuidePlugin,
} );

Puis dernière étape, on créer notre guide de bienvenue à proprement parler à l’aide des différents components disponibles. On peut bien sûr s’inspirer en grande partie du WelcomeGuide de base.

JSX

/**
 * WordPress dependencies
 */
import { Guide, GuidePage } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';

export default function CustomWelcomeGuide() {
	const { toggleFeature } = useDispatch( 'core/edit-post' );

	return (
		<Guide
			className="edit-post-custom-guide"
			contentLabel={ __( 'Welcome to the Custom Guide' ) }
			finishButtonText={ __( 'Get started' ) }
			onFinish={ () => {
				toggleFeature( 'customWelcomeGuide' );
			} }
		>

			<GuidePage className="edit-post-welcome-guide__page">
				<h1 className="edit-post-welcome-guide__heading">
					{ __( 'Welcome to my custom Guide folks' ) }
				</h1>
				<p className="edit-post-welcome-guide__text">
					{ __( 'In the WordPress editor, each paragraph, image, or video is presented as a distinct “block” of content.' ) }
				</p>
				<p className="edit-post-welcome-guide__text">
					{ __( 'Each block comes with its own set of controls for changing things like color, width, and alignment. These will show and hide automatically when you have a block selected.' ) }
				</p>
			</GuidePage>

		</Guide>
	);
}

Chaque GuidePage représente une page du guide, donc vous pouvez en ajouter autant que vous voulez.

Cet article met en lumière le fait qu’avec React, on est capable de facilement réutiliser un composant dans notre projet, et éviter de réinventer à chaque fois la roue.

En espérant que vous puissiez créer de superbes guide de bienvenue !

L'auteur : Florian TIAR

https://wpstrategie.fr/ • @

Développeur WordPress, j'ai écrit plusieurs articles autour du CMS. J'ai notamment contribué au coeur sur plusieurs versions majeures et publié quelques extensions sur le dépôt officiel.