# registerFormatType : ajouter un format personnalisé à la barre RichText

> Surlignage, abréviation, info-bulle : voici comment créer un format inline utilisable dans n'importe quel champ RichText, avec toggleFormat et RichTextToolbarButton.

- Auteur : Clément Hadrot
- Publié le : 2020-08-03
- Mis à jour le : 2020-08-03
- Catégorie : Blocs Gutenberg
- URL : https://wpmoderne.dev.wordpress-developpement.fr/blocs/registerformattype-format-personnalise-richtext/

## L’essentiel

- Un format inline s'applique à une sélection de texte, pas au bloc entier
- toggleFormat bascule le format sans casser la sélection
- Le format survit dans le HTML sauvegardé via une balise ou un attribut

« Pourquoi je ne peux pas juste surligner un mot dans mon paragraphe ? » — c'est la question qui revient le plus souvent de clients habitués à un traitement de texte classique. Gutenberg gère nativement le gras, l'italique et le lien, mais rien n'empêche d'ajouter d'autres formats inline : surlignage, abréviation avec info-bulle, texte barré avec une couleur spécifique. La fonction `registerFormatType`, du paquet `@wordpress/rich-text`, sert exactement à ça.

## La différence entre un format et un bloc

Un format s'applique à une portion de texte sélectionnée à l'intérieur d'un champ `RichText`, pas au bloc dans son ensemble. Techniquement, il correspond à une balise HTML inline (ou à un attribut sur une balise existante) insérée autour de la sélection, un peu comme le fait `<strong>` pour le gras. Une fois enregistré, un format devient disponible dans tous les champs `RichText` du site, y compris ceux de blocs tiers, ce qui en fait un outil transversal plutôt qu'une fonctionnalité propre à un seul bloc.

## Recette : un format de surlignage

```
import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';

const name = 'mon-projet/surlignage';

registerFormatType( name, {
	title: 'Surlignage',
	tagName: 'mark',
	className: null,
	edit( { isActive, value, onChange } ) {
		return (
			<RichTextToolbarButton
				icon="admin-customizer"
				title="Surlignage"
				onClick={ () => {
					onChange( toggleFormat( value, { type: name } ) );
				} }
				isActive={ isActive }
			/>
		);
	},
} );
```

La balise `<mark>` est native en HTML5 pour le surlignage : pas besoin d'inventer une classe CSS pour ce cas précis. `toggleFormat` applique ou retire le format sur la sélection courante, en préservant la position du curseur — c'est ce comportement qui rend l'expérience naturelle pour l'utilisateur.

## Variante : une abréviation avec info-bulle

> L'essentiel à retenir : Un format inline s'applique à une sélection de texte, pas au bloc entier ; toggleFormat bascule le format sans casser la sélection ; Le format survit dans le HTML sauvegardé via une balise ou un attribut

Pour un format qui porte un attribut supplémentaire, comme un titre d'info-bulle sur une abréviation, la déclaration se complète d'un objet `attributes` :

```
registerFormatType( 'mon-projet/abreviation', {
	title: 'Abréviation',
	tagName: 'abbr',
	className: null,
	attributes: {
		title: 'title',
	},
	edit( { isActive, value, onChange } ) {
		return (
			<RichTextToolbarButton
				icon="editor-help"
				title="Abréviation"
				onClick={ () => {
					const titre = window.prompt( 'Signification :' );
					if ( ! titre ) return;
					onChange(
						toggleFormat( value, {
							type: 'mon-projet/abreviation',
							attributes: { title: titre },
						} )
					);
				} }
				isActive={ isActive }
			/>
		);
	},
} );
```

L'objet `attributes` mappe un nom d'attribut logique (`title`) vers l'attribut HTML réellement écrit sur la balise `<abbr>`. Un `window.prompt` reste rudimentaire pour la démonstration ; en production, une petite popover avec un champ texte offre une meilleure expérience.

## Ce que ça ne couvre pas

Un format personnalisé reste limité à une portion de texte inline. Dès que le besoin dépasse ce cadre — insérer un élément avec sa propre structure, gérer plusieurs lignes, ou stocker une donnée complexe non réductible à un attribut de balise — c'est un bloc complet qu'il faut créer, pas un format supplémentaire.

- Un format ne peut pas contenir d'autres blocs.
- Il ne dispose pas de son propre panneau latéral d'inspecteur.
- Il doit rester réversible : le retirer ne doit laisser aucune trace dans le contenu.

## Retirer proprement un format en cours de projet

Si un format cesse d'être utile, `unregisterFormatType( name )` le retire de la barre d'outils, mais le HTML déjà écrit dans les articles existants garde la balise correspondante. Il faut alors migrer le contenu existant, par exemple avec une recherche-remplacement ciblée, sous peine de laisser des balises orphelines dans les articles publiés.

> Sur nos projets, un format qui n'a pas d'icône Dashicons adaptée mérite un SVG personnalisé plutôt qu'une icône approximative : l'utilisateur associe l'icône au résultat visuel, une icône mal choisie crée de la confusion durable.

## En résumé

`registerFormatType` reste sous-utilisé alors qu'il répond précisément aux demandes de mise en forme fine que les blocs seuls ne couvrent pas. Une poignée de lignes de JavaScript suffit à doter tout le site d'un format cohérent, disponible partout où un champ `RichText` existe.