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

> Une équipe qui répète toujours la même action dans l'éditeur gagne à s'offrir un raccourci clavier maison, enregistré via l'API dédiée de Gutenberg.

- Auteur : Clément Hadrot
- Publié le : 2024-08-03
- Mis à jour le : 2024-08-03
- Catégorie : Tips
- URL : https://wpmoderne.dev.wordpress-developpement.fr/tips/raccourci-clavier-personnalise-editeur-keyboardshortcuts/

## L’essentiel

- Le module @wordpress/keyboard-shortcuts gère les combinaisons
- registerShortcut évite les collisions avec les raccourcis natifs
- useShortcut relie la combinaison à une action réelle

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'essentiel à retenir : Le module @wordpress/keyboard-shortcuts gère les combinaisons ; registerShortcut évite les collisions avec les raccourcis natifs ; useShortcut relie la combinaison à 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.