How to Add span tag to text in wordpress?

  • Greetings to all friends of WordPress and Code ??,

    How can one add a span tag to a text in WordPress in one click?

    What I am intending to achieve is the addition of a button to the Gutenberg editor toolbar. This button, once clicked, should surround the selected text with a <span data-no-translation=””></span> tag. I have tried various approaches using the WordPress block API, but the resulting outcome is not what I expected. All I manage to achieve is the visibility of the ‘no translate’ button.

    After several attempts, the button does not function as anticipated. Either it does nothing at all, or it simply adds the <span> tag without the selected content, or I have something better: <span class=”no-translation”>test</span>

    However, what I want is: <span data-no-translation=””>test</span>

    Below is the JavaScript code that I utilized for my customized button:

    
( 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 );

    this code in my functions.php file

    
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' );

    I am sure it is a minor error in my code or a configuration issue, but I am unable to find the solution. If anyone could lend me a hand in resolving this issue, I would be immensely grateful.

    I use this attribute to avoid translating certain links or texts, for instance for my page

    I am using the TranslatePress plugin which automatically changes/translates the URLs if it is an internal URL https://translatepress.com/

    I added a link to my homepage (https://wikihhc.com/) in the content of my page: https://wikihhc.com/guide/hhc/ and if I don’t add <span data-no-translation=””> by going through “edit in HTML”, the link is no longer on the homepage but on

    https://wikihhc.com/es/

    for the page translated into Spanish, for instance:

    https://wikihhc.com/es/guia/hhc/

    In most cases this is what I want but in this particular example, no.)

    Thank you in advance for your assistance and kindness as I am a beginner!

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi there,

    Your code is almost correct, you just need to change the way you define your format type.

    The main mistake is in the className field. This field only allows to add classes to your element, not arbitrary attributes. To add data-no-translation attribute to the span tag, you have to use attributes field correctly.

    I think this code would do it:

    ( 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: null, // no class required
            attributes: { // add your data attribute here
                'data-no-translation': 'value' 
            },
            edit: MyCustomButton,
        }
    );
} )( window.wp );

    This should result in creating <span data-no-translation="value">Your Selected Text</span> around your selected text in Gutenberg editor.

    Best regards,

    Christopher Amirian

    Thread Starter Lucas Lopez

    (@lucaslopez)

    Thank a lot for your help!
    I just updated with your code and it’s works different,)

    non i just the span around the text for instance :

    <p>Thanks Monsieur <span>Christopher</span></p>

    is like :

    <span data-no-translation="">

    don’t appear!

    Hi there,

    I did not understand exactly what you meant.

    If the span is working now, then please check the data attribute in the front end of the website.

    I think the Gutenberg editor might not render the data- attributes in the editor itself, but they should appear on the front end when you publish or preview the post.

    Best regards,

    Christopher Amirian

    Thank again for your reply,
    sorry for my english is bad and my coding skill worst jaja!
    i got this <span>example</span>

    and not <span data-no-translation="">example</span>

    like i want in the back end and neither in front end.



    Hi there,

    Thank you for providing the feedback. It seems like the attribute data-no-translation is not getting added properly.

    One possible solution is to utilize the apply function to customize how the formatting gets applied. We can extend the MyCustomButton component to include the attributes when the format is applied.

    Here is an updated version of the code:

    ( 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,
            }
        );
    };

    var withAttributes = {
        attributes: {
            'data-no-translation': 'value'
        },
        apply: function( value, { isActive } ) {
            var newValue = wp.richText.toggleFormat(value, { type: 'my-plugin/my-custom-button' });
            newValue.formats = newValue.formats.map( ( formats, i ) => {
                return formats.map( format => {
                    if ( format && format.type === 'my-plugin/my-custom-button' ) {
                        format.attributes = { 'data-no-translation': '' };
                    }
                    return format;
                } );
            } );
            return newValue;
        }
    };

    wp.richText.registerFormatType(
        'my-plugin/my-custom-button', {
            title: 'No Translate',
            tagName: 'span',
            className: null,
            attributes: {
                'data-no-translation': 'value'
            },
            edit: MyCustomButton,
            ...withAttributes
        }
    );
} )( window.wp );

    This updated code adds an apply function that will map through the formats and add the data-no-translation attribute to the span tag.

    I did not test that myself on my installation so I’d appreciate it if you could check and see if it works.

    Bets regards,

    Christopher Amirian

    Hi Chris!
    Thank again for your help unfortulety it still don’t work…
    have a great day!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to Add span tag to text in wordpress?’ is closed to new replies.