Créer un raccourci clavier personnalisé dans l’éditeur avec keyboardShortcuts

Dans une rédaction spécialisée où chaque article se termine par un encart « À retenir » inséré manuellement à partir d’un motif enregistré, une journaliste m’a fait remarquer qu’elle cherchait ce motif dans l’inserteur de blocs à chaque article, souvent plusieurs dizaines de fois par semaine. Une combinaison de touches dédiée réglait le problème en supprimant totalement cette recherche répétée.

L’éditeur de blocs de WordPress expose justement une API pour ça : le module @wordpress/keyboard-shortcuts, qui gère l’enregistrement des combinaisons et évite les conflits avec les raccourcis déjà utilisés par l’interface (comme Ctrl+B pour le gras, déjà pris).

Enregistrer la combinaison

La première étape consiste à déclarer le raccourci auprès du store dédié, avec une combinaison qui n’entre pas en collision avec l’existant. Une combinaison impliquant Ctrl+Alt (ou Cmd+Alt sur Mac) laisse généralement de la marge :

// inc/js/raccourci-encart.js
wp.domReady( function () {
    wp.data.dispatch( 'core/keyboard-shortcuts' ).registerShortcut( {
        name: 'redaction/inserer-encart-a-retenir',
        category: 'block',
        description: 'Insérer l\'encart « À retenir » en fin d\'article',
        keyCombination: {
            modifier: 'primaryShift',
            character: 'r'
        }
    } );
} );

Le modificateur primaryShift correspond à Ctrl+Maj sous Windows et Linux, et Cmd+Maj sur macOS : l’API gère elle-même cette adaptation selon la plateforme, sans code conditionnel supplémentaire de notre côté.

Relier le raccourci à une action réelle

L’enregistrement seul ne fait qu’informer l’éditeur qu’une combinaison existe (elle apparaît d’ailleurs dans la liste des raccourcis accessible via Maj+Alt+H). Pour déclencher une action au moment de l’appui, il faut utiliser le hook useShortcut à l’intérieur d’un composant enregistré via registerPlugin :

const { registerPlugin } = wp.plugins;
const { useShortcut } = wp.keyboardShortcuts;
const { useDispatch } = wp.data;
const { createBlock } = wp.blocks;

function GestionnaireRaccourciEncart() {
    const { insertBlock } = useDispatch( 'core/block-editor' );

    useShortcut( 'redaction/inserer-encart-a-retenir', () => {
        const bloc = createBlock( 'core/group', { className: 'encart-a-retenir' }, [
            createBlock( 'core/heading', { level: 3, content: 'À retenir' } ),
            createBlock( 'core/paragraph', { content: '' } ),
        ] );

        insertBlock( bloc );
    } );

    return null;
}

registerPlugin( 'redaction-raccourci-encart', {
    render: GestionnaireRaccourciEncart,
} );

Le composant ne rend rien visuellement (return null) : son seul rôle est d’écouter la combinaison de touches et de déclencher l’insertion du bloc composé lorsqu’elle est détectée, où que se trouve le curseur dans l’éditeur.

Charger le script avec les bonnes dépendances

add_action( 'enqueue_block_editor_assets', function () {
    wp_enqueue_script(
        'redaction-raccourci-encart',
        get_theme_file_uri( 'inc/js/raccourci-encart.js' ),
        array( 'wp-plugins', 'wp-keyboard-shortcuts', 'wp-block-editor', 'wp-blocks', 'wp-data', 'wp-dom-ready' ),
        wp_get_theme()->get( 'Version' ),
        true
    );
} );

Oublier une seule dépendance dans ce tableau (notamment wp-keyboard-shortcuts, facile à manquer) provoque une erreur silencieuse dans la console, avec un raccourci qui ne se déclenche jamais sans message d’erreur visible côté interface.

Éviter les collisions avec l’existant

Avant de choisir une combinaison, il vaut mieux vérifier la liste des raccourcis déjà pris, accessible directement dans l’éditeur via l’icône d’aide puis « Raccourcis clavier ». Les combinaisons impliquant uniquement Ctrl ou Cmd sans touche supplémentaire sont presque toutes réservées par l’éditeur ou par le navigateur lui-même ; ajouter Maj ou Alt réduit fortement le risque de conflit.

• Documentez le raccourci choisi dans le guide interne de l’équipe éditoriale, il sera vite oublié sinon.
• Testez la combinaison sur Windows, macOS et Linux si l’équipe est mixte : certains navigateurs interceptent Alt différemment.
• Un seul plugin JavaScript peut gérer plusieurs raccourcis avec plusieurs appels à useShortcut dans le même composant.

Sur les rédactions qui produisent un volume élevé d’articles avec une structure récurrente, je recommande toujours de partir des blocs et motifs déjà enregistrés avant d’inventer un raccourci : le gain de temps vient de l’automatisation d’un geste répété, pas de la nouveauté du raccourci lui-même.

Et maintenant ?

Un raccourci clavier personnalisé reste une amélioration ciblée, pas une solution universelle : il ne vaut le coup que pour une action réellement répétée, dans un contexte d’équipe où tout le monde connaît son existence. Une fois ces deux conditions réunies, l’API @wordpress/keyboard-shortcuts permet de l’implémenter proprement, sans bricolage au niveau du DOM ni écoute brute d’événements clavier qui risquerait d’entrer en conflit avec l’éditeur.