How to Add Span tag to text in Wordpress?

[LucasLopez420]

Greetings to all friends of WordPress and Code ❤️,
This i my first post here so i hope i do it in a good way,)

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 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 tag without the selected content, or I have something better: test

However, what I want is: test

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 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!

[mrfoxtalbot]

Welcome and thank you for opening your first issue, @LucasLopez420!

GitHub might not be the idea forum for this, can I suggest you try opening a support forum thread instead?

https://wordpress.org/support/forum/wp-advanced/
https://wordpress.org/support/plugin/gutenberg/

[LucasLopez420]

Welcome and thank you for opening your first issue, @LucasLopez420!

GitHub might not be the idea forum for this, can I suggest you try opening a support forum thread instead?

https://wordpress.org/support/forum/wp-advanced/ https://wordpress.org/support/plugin/gutenberg/

I tried already but i didn't really get anwer,)
So i was thinking who is for me the elite of IT!

[t-hamano]

I think this is not a problem with the Gutenberg project, so let's move this topic to Discussions.

[LucasLopez420]

Thank mister Hamano,
for your help!
And sorry again i am still a beginner in github and coding so i am never sure how and where to post good;)

[t-hamano]

Hi, @LucasLopez420,

The following code should work. Compare it with the code you described in your first comment. There are two differences.

( 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',
                            attributes: {
                                'data-no-translation': 'true'
                            }
                        }
                    ) );
                },
                isActive: props.isActive,
            }
        );
    }
    wp.richText.registerFormatType(
        'my-plugin/my-custom-button', {
            title: 'No Translate',
            tagName: 'span',
            className: 'no-translation',
            attributes: {
		            translation: 'data-no-translation',
            },
            edit: MyCustomButton,
        }
    );
} )( window.wp );

162549e62d220e272c399361fbdd90bb.mp4