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

  • WordPress :6.2
  • Statut : résolu
13 sujets de 1 à 13 (sur un total de 13)
  • Auteur
    Messages
  • #2455563
    Lucas Lopez
    Participant
    Initié WordPress
    18 contributions

    Bonjour à tous amis de WordPress et du Code ❤️,

    <b>comment ajouter une balise span à un texte dans WordPress?</b>

    Ce que je souhaite faire est d’ajouter un bouton à la barre d’outils de l’éditeur Gutenberg qui entoure le texte sélectionné avec une balise <span data-no-translation=""></span>. J’ai essayé différentes approches en utilisant l’API de blocs de WordPress, mais le résultat obtenu n’est pas celui attendu.  J’arrive juste à voir le bouton no translate.

    Apres plusieurs essai le bouton ne fonctionne pas comme prévu. Soit il ne fait rien du tout, soit il ajoute simplement la balise <span> sans le contenu sélectionné soit j’ai ai mieux :
    <span class= »no-translation »>test</span>

    hors je veux :
    <span data-no-translation= » »>test</span>

    Voici le code JavaScript que j’ai utilisé pour mon bouton personnalisé :
    <div class= »bg-black rounded-md mb-4″>
    <div class= »p-4 overflow-y-auto »>

    ( function( wp ) {
    var MyCustomButton = function( props ) {
    return wp.element.createElement(
    wp.blockEditor.RichTextToolbarButton, {
    icon: 'editor-code',
    title: 'No Translate',
    onClick: function() {
    props.onChange( wp.richText.toggleFormat(
    props.value,
    { type: 'my-plugin/my-custom-button' }
    ) );
    },
    isActive: props.isActive,
    }
    );
    }
    wp.richText.registerFormatType(
    'my-plugin/my-custom-button', {
    title: 'No Translate',
    tagName: 'span',
    className: 'no-translation',
    attributes: {
    'data-no-translation': 'true'
    },
    edit: MyCustomButton,
    }
    );
    } )( window.wp );

    </div>
    </div>
    + ce code ds mon fichier functions.php

    function mon_plugin_gutenberg() {
    wp_enqueue_script(
    'mon-plugin-gutenberg',
    get_stylesheet_directory_uri() . '/mon-plugin-gutenberg.js',
    array( 'wp-blocks', 'wp-dom', 'wp-editor', 'wp-rich-text' ),
    filemtime( get_stylesheet_directory() . '/mon-plugin-gutenberg.js' )
    );
    }
    add_action( 'enqueue_block_editor_assets', 'mon_plugin_gutenberg' );

    Je suis sûr qu’il s’agit d’une petite erreur dans mon code ou d’un problème de configuration, mais je n’arrive pas à trouver la solution. Si quelqu’un pourrait me donner un coup de main pour résoudre ce problème, je vous en serais très reconnaissant.

    Je me sers de ma cette attribut pour ne pas traduire certains liens et ou textes,
    par exemple pour ma page

    Wiki HHC : le Wikipedia du HHC


    j’ai mis un lien vers ma home dans le contenu de ma page :

    HHC : Guide d’Achat des Fleurs, Résines, Vape, Huiles

    mais si je ne rajoute pas <span data-no-translation= » »> en passant par « modifier en HTML »
    le plugin TranslatePress change automatiquement l’url en
    https://wikihhc.com/es/ pour la page traduite en espagnol par exemple : https://wikihhc.com/es/guia/hhc/
    Dans la plupart des cas c’est ce que je désire mais dans cette exemple précis non,)

    Merci d’avance pour votre aide !

    Cordialement,

     

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2455566
    momofr@free.fr
    Modérateur
    Maître WordPress
    6880 contributions

    Salut, peut être que ce sujet sur le support WordPres va t’aider à trouver la solution, une histoire de JS… (moi ça me dépasse largement). 🙂

    #2455574
    Lucas Lopez
    Participant
    Initié WordPress
    18 contributions

    Merci beaucoup il y a tres clairement un élement de réponse dans ton lien,
    je suis en train d’essayer en modifiant le code mais pour le moment en vain.

    #2455576
    Rock4Temps
    Participant
    Maître WordPress
    980 contributions

    Bonjour,

    Voici votre code modifié qui ajoute un bouton dans le menu format
    de la barre d’outils du bloc paaragraphe pour encadrer
    le texte sélectionné avec une balise <span>  qui comporte  l’attribut: data-no-translation
    la classe:no-translation.
    voir photos ci-jointe

     

    /*------- 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',
    }
    );

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2455636
    Lucas Lopez
    Participant
    Initié WordPress
    18 contributions

    Merci INFINIMENT pour ta réponse Rock4temps,
    c’est vraiment adorable et précieux de ta part ton aide!

    Le bouton est top et en plus en premiere position,
    par contre il me transforme toujours en <span class= »no-translation »>
    alors que je vois de ton coté ca marche parfaitement…

    1h du mat, j’abandonne pour le moment!

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2455638
    Lucas Lopez
    Participant
    Initié WordPress
    18 contributions

    + Juste pour info :

    pour le function.php j’ai mis ce code :

    function custom_gutenberg_format_enqueue() {
    wp_enqueue_script(
    'custom-gutenberg-format',
    get_template_directory_uri() . '/js/custom-gutenberg-format.js',
    array( 'wp-rich-text', 'wp-editor', 'wp-element', 'wp-components', 'wp-data' ),
    '1.0',
    true
    );
    }
    add_action( 'enqueue_block_editor_assets', 'custom_gutenberg_format_enqueue' );

    #2455648
    Rock4Temps
    Participant
    Maître WordPress
    980 contributions

    Bonjour, Voici mes dépendances pour le chargement du chargement du script,

    <span class= »k »>array</span><span class= »p »>(</span> <span class= »s1″>’wp-blocks'</span><span class= »p »>,</span> <span class= »s1″>’wp-dom'</span><span class= »p »>,</span> <span class= »s1″>’wp-dom-ready'</span><span class= »p »>,</span> <span class= »s1″>’wp-edit-post'</span><span class= »p »>,</span><span class= »s1″>’wp-element'</span><span class= »p »>,</span><span class= »s1″>’wp-plugins'</span><span class= »p »>,</span><span class= »s1″>’wp-data'</span><span class= »p »>,</span><span class= »s1″>’wp-components'</span><span class= »p »>)</span>

    #2455649
    Rock4Temps
    Participant
    Maître WordPress
    980 contributions
    array( 'wp-blocks', 'wp-dom', 'wp-dom-ready', 'wp-edit-post','wp-element','wp-plugins','wp-data','wp-components')

    #2455656
    Lucas Lopez
    Participant
    Initié WordPress
    18 contributions

    Merci encore beaucoup!
    Tu vaux tous les lundis au Soleil,)

    Pour reprendre depuis le debut, j’ai ajouté dans mon fichier functions.php

    function enqueue_no_translate_script() {
    wp_enqueue_script(
    'no-translate',
    get_stylesheet_directory_uri() . '/no-translate.js',
    array( 'wp-blocks', 'wp-dom', 'wp-dom-ready', 'wp-edit-post', 'wp-element', 'wp-plugins', 'wp-data', 'wp-components' ),
    filemtime( get_stylesheet_directory() . '/no-translate.js' ),
    true
    );
    }
    add_action( 'enqueue_block_editor_assets', 'enqueue_no_translate_script' );

    et j’ai créer un fichier no-translate.js à la racine de mon theme ( dans le meme emplacement que mon functions.php)

    et j’obtiens :
    cette erreur : no-translate.js:60 Uncaught SyntaxError: Unexpected token ‘<‘

    Je suis sur que je suis à un détail de resoudre ce problème grace à toi mais je tourne en rond,)

    #2455657
    Rock4Temps
    Participant
    Maître WordPress
    980 contributions

    Peut être deux raisons à votre erreur:

    Le chemin d’accès à votre fichier js n’est pas conforme.

    Une erreur de Syntaxe dans votre fichier JS: manque ( ou } par exemple.

    Pour cela vérifier dans la console du navigateur Chrome.

    #2455658
    Lucas Lopez
    Participant
    Initié WordPress
    18 contributions

    Effectivement tu  as raison!
    j’avais uploader la console mais le fichier n’étais pas passé ca devrait bon là.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2455668
    Rock4Temps
    Participant
    Maître WordPress
    980 contributions

    De mon coté par acquis de conscience, comme j’était resté dans
    l’environnement de développement je viens de compiler
    en javascript standard et tout est OK.

    Si de votre coté, cela fonctione merci de mettre
    le problème comme résolu.

    Bonne soirée

    #2455681
    Lucas Lopez
    Participant
    Initié WordPress
    18 contributions

    Muchas gracias encore, pour ton aide!

    PS et HS: c’est fou car je viens de me rendre qu’il y a 10 j’ai appris des passes de Salsa avec tes videos,)

13 sujets de 1 à 13 (sur un total de 13)
  • Vous devez être connecté pour répondre à ce sujet.