[Résolu] Comment ajouter une balise span à un texte dans WordPress avec la toolbar? (Créer un compte)

/*------- Import WordPress Components -----*/

// déstructuration de wp.richText.registerFormatType
// déstructuration de wp.richText.toggleFormat
// etc..
const { registerFormatType, toggleFormat,} = wp.richText;

// déstructuration de wp.blockEditor.RichTextToolbarButton
const { RichTextToolbarButton } = wp.blockEditor;

// déstructuration de wp.element.useSelect
const { useSelect } = wp.data;


// Creation du bouton pour appliquer le format: data-no-translation/span 
// Ce bouton apparaitra dans le menu format de la barre d'outils
// du bloc paragraphe
const DataNoTranslationButton = ( { isActive, onChange, value} ) => {

	const DataNoTranslationAllowedBlocks = ['core/paragraph',];

    // renvoi le bloc sélectionné
    const selectedBlock = useSelect( ( select ) => {
        return select( 'core/block-editor' ).getSelectedBlock();
    }, [] );

    
    // on sort si le bloc sélectionné n'est pas le bloc paragraphe
    if ( selectedBlock && ! DataNoTranslationAllowedBlocks.includes( selectedBlock.name ) ) {
        return null;
    }


	//Fonction onToggle
	const onToggle = () => {

		onChange(

			// toggleFormat permet d'appliquer ou supprimer un format a un composant Rich Text
			// et donc a notre texte sélectionné
			// avec type: on passe le nom du Format appliqué
			// avec attributes: on applique notre attribut:data-no-translation
			// mais on aurait aussi pu appliquer une règle CSS avec la proriété style
			//ex attributes: {style: `text-decoration: underline;`},
			toggleFormat( value, {
				type: 'data-no-translation/span',
				attributes: { 
					'data-no-translation': 'true' 
				} ,
			} ) 

		);

	};


	return (

		// <></>. ces balises servent de balise <Fragment>
		<>

			{/* Balise du composant pour accéder au menu format de la barre d'outils du bloc*/}
			<RichTextToolbarButton
				icon="editor-code"
				isActive={ isActive }
				title="No Translate"
				// a l'évènement click du bouton on papelle la fonction onToggle
				onClick={ onToggle }
			/>
			
			
		  
		</>

	);
};



/**
 * on enregistre le format en ajoutant le nom du format ( data-no-translation/span) 
 * et on transmet un objet avec les propriétés suivantes: 
 * className: Le nom de classe qui sera ajouté à la balise span qui entoure le texte.
 * edit: Le bouton que nous avons précédemment enregistré.
 * tagName: Le type de balise qui sera appliqué au texte sélectionné Dans ce cas, nous utilisons <span> 
 * title: Le titre du format.
 */
 
 registerFormatType(
	'data-no-translation/span', {
		className: 'no-translation',
		edit: DataNoTranslationButton,
		tagName: 'span',
		title: 'No Translate', 
	}
);

array( 'wp-blocks', 'wp-dom', 'wp-dom-ready', 'wp-edit-post','wp-element','wp-plugins','wp-data','wp-components')