Incompatibility with React

  • Resolved Matthias Günter

    (@mguenter)


    3 years ago

    Hey TranslatePress-Team!

    More and more plugins are using modern development approaches and frameworks / libraries like React to develop components to their frontend. So, we do also for our plugin “Real Cookie Banner”. Unfortunately, the translation editor of TranslatePress is not fully compatible with React (or the MutationObserver).

    How to reproduce?

    1. Create a new Gutenberg page
    2. Create a “Custom HTML” block
    3. Insert the following code into the custom HTML block: https://gist.github.com/matzeeable/5ee88ffbb052720b3f35ea6ac3befc49#file-gutenberg-custom-html-block-html
    4. If needed and a console error like React is undefined comes up, wp_enqueue_script('react') React within your functions.php so React and React DOM gets loaded on your frontend

    Afterwards, open the translation editor, and you will see, that you cannot change the text of the React component: https://i.imgur.com/Kb6FLZo.png

    Potential solutions

    1. Make the MutationObserver work for React components
    2. Provide a React component, so we can wrap our texts in translatable strings:

    <TranslatePressText>{text}</TranslatePressText>

    What do you think?

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

    (@sdenis)

    Hello Matthias,

    Thank you for reaching us!

    I forwarded this to the development and after their investigation, the conclusion is that MutationObserver does not seem to detect changes made by React as implemented now.
    However, we have noted your request and will implement it in the future when we have time.

    Thank you for your understanding.

    Have a great day ahead!
    Cheers,

    Thread Starter Matthias Günter

    (@mguenter)

    Hi again @sdenis !

    This sounds a bit dismissive ??

    Is there any alternative we can implement? The translations are all coming from our backend, can we somehow register them to the translation editor and afterwards listen to changes, so we can get it into the live preview?

    Thread Starter Matthias Günter

    (@mguenter)

    Hi @sdenis !

    More and more users of our plugin are running into this issue. Isn’t there an alternative so e.g. we can register a string, and it shows up in the translation editor? This would at least allow our users to create translations. ??

    Plugin Author Razvan Mocanu

    (@razvanmo-1)

    Hi,

    Are you are looking towards implementing your own way to replace the original strings with the translation? Do you just need our help to show those strings in TP Translation Editor and later use a server-side TP function to retrieve them?
    If so, I can assist you.

    Like @sdenis said, live detection in the front-end is just not possible for now if you are using React to output them. But if you want to translate your strings on server-side and prepare the translations to be used in front-end, then there is a workaround.

    I assume you need translation for user-inputted strings, not for localized (gettext) strings. 

    /* This code is used to register a string that will be visible in the TP Translation Editor sidebar in the dropdown.
   Can be placed anywhere inside the <body> tag, such as on the wp_footer hook. 
   Automatic translation will pick them up too, but only if Translation Editor was opened as least once so that these 
   strings got a chance to be registered. */
if ( isset( $_GET['trp-edit-translation'] ) && $_GET['trp-edit-translation'] == 'preview' ){
    //$custom_content_1, $custom_content_2 are strings containing just text, no html
    echo '<span style="display:none">' . $custom_content_1 .'</span>';
    echo '<span style="display:none">' . $custom_content_2 .'</span>';
}

/* ------------------------------------- */

/* This code needs to be executed on the server-side, when preparing the content to be displayed to the user on the front-end. */
$trp = TRP_Translate_Press::get_trp_instance();
$trp_render = $trp->get_component( 'translation_render' );

// retrieves the translation of any original text in the currently displayed language.
$translated_custom_content_1 = $trp_render->translate_page( $custom_content_1 );
$translated_custom_content_2 = $trp_render->translate_page( $custom_content_2 );

    I hope this code can get you started on creating a solution. If you have further questions, perhaps it would be better to write us an email.

    Thread Starter Matthias Günter

    (@mguenter)

    Hi @razvanmo-1 !

    Yeah, your coding could work. But I think about something else: Can I somehow listen to changes in the preview frame of a given translation “ID” so I can refresh the page automatically? I want to provide a “minimal” live preview to our customers?

    Have you thought about a native implementation / hook for React? React is coming more and more to WordPress ??

    Regards,
    Matthew ??

    Thread Starter Matthias Günter

    (@mguenter)

    Hi again @razvanmo-1 !

    Do you have a workaround for my issue from the previous post with the live preview? ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Incompatibility with React’ is closed to new replies.