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!**
[ad_2]