This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic contains 12 replies, has 2 voices.

Last updated by Lauren 2 months, 4 weeks ago.

Assigned support staff: Lauren.

Author Posts
July 8, 2019 at 6:20 pm #4164965

usahello

I am trying to add line breaks in some of the core WordPress blocks (e.g. paragraphs, bullet lists, and headings) and I find that they work as expected in the original language, but are not rendering properly for translated pages. We use the classic translation editor and the only way I've found that line breaks will work properly is if I manually add a <br> tag using text mode in the WYSIWYG translation editors.

You can see this in the attached screenshots or using the following links:
The original language page (hidden link)
The translated page (hidden link)

I decided to create a new ticket because this was something I reported for custom blocks created via ACF, but I thought the issue was specific to custom blocks.

July 8, 2019 at 7:04 pm #4165213

Lauren
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

I figured out why the editor was displaying differently, it is because I did not have String Translation activated on the test site. I have now activated and updated the content. You can see the blocks showing separately on the backend now, but the content displays correctly on the front end.

Can you please try to recreate the issue on this test site? If you are not able, then we can request a duplicator package for your site. Thanks!

July 8, 2019 at 7:20 pm #4165321

usahello

I am also seeing the content rendering properly on the front-end. I activated the other WPML plugins that I have active on our site, but couldn't add ACF Pro and the ACFML plugin to see if they made a difference. Otherwise, could there be some WPML settings that we're using on our site that might be the culprit?

July 8, 2019 at 7:41 pm #4165493

Lauren
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

I have activated ACF Multilingual, so you can now install your copy of ACF Pro and test that out. I don't think that would make any difference unless the issue was only happening in ACF fields, but it's certainly worth trying.

There are no options in WPML to strip html tags. Is there any change you are copying and pasting the content from somewhere else first? I have seen issues in past with content being pasted.

Also, if you view the block content in WPML -> String Translation, do you see the html content there?

July 8, 2019 at 8:03 pm #4165557

usahello

I actually think that ACF plugin might have something to do with it. I just went back in, added a new paragraph block with a line break, re-translated, and when I viewed the front-end and the line breaks aren't working anymore.

July 8, 2019 at 8:10 pm #4165565

usahello

Actually, I just disabled the ACFML plugin on your demo site and the issue is still happening.

July 9, 2019 at 4:59 pm #4173327

Lauren
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

I'm not sure what we are doing differently, but I just added a new paragraph and it displays correctly. Here are my steps:

1. In the original page, click the "+" to add a new paragraph. Type some text and then hit "Shift + return" to create break. Type some more text.
2. Add another new paragraph block. This time, type some text. Then select "edit with HTML" and type in a line break.

<br/>

.
3. Open the translation editor. I see both new paragraphs with the line break.
4. Open the front end of the translated page and I see the line breaks.

Can you please walk me through step by step what you are doing differently so I can try to reproduce it? The page I am testing is this one: hidden link

July 9, 2019 at 5:09 pm #4173355

usahello

I am doing everything the same way as you, but where I think we deviate is that in the translation editor I'm using the Visual mode and not Text mode. Just now, upon first clicking to translate the Sample Page, it loaded in Text mode and I saw the <br> tag in the text, but after I clicked to show Visual mode it disappears even though it seems to still exist based on how the text appears in the visual editor.

I made some new paragraphs after this first test and the translation editor opened with Visual mode being the default setting this time and none of the newly created paragraph blocks with line breaks rendered properly. To me, it seems like something is happening with the visual mode in the translation editors.

July 10, 2019 at 4:32 pm #4182653

Lauren
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

I have found that as long as you set the WPML Editor to text mode, the line breaks will copy over correctly. This is because we are copying it to the text field, which keeps the HTML. The visual editor is stripping the HTML, which is why the line breaks are not copying over to the translation.

So, to resolve the issue, when you edit the translation, click the "text" tab of the fields. Then, when you add new content from the original page, the HTML will be copied over.

Please let me know if you need any further assistance and I will be happy to help.

July 10, 2019 at 4:39 pm #4182685

usahello

I noticed the same thing. Maybe I'm misunderstanding, but it seems like you're suggesting that we just always have to use text mode to get the line breaks to work. If that's true then I'd said that isn't a great experience for our staff and translators. Forcing us to use text mode, reveals HTML tags to non-technical staff, thus increasing the potential for translators to get confused about what those tags are, how to edit/add them, and even accidentally deleting them (or part of a tag).

Why does the visual editor strip the tags?

July 10, 2019 at 7:48 pm #4184227

Lauren
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Here is a bit of a breakdown about why the Visual Editor strips the HTML tags. This is not something that WPML does, but rather something that WordPress does. This snippet is from https://wordpress.org/support/topic/how-do-you-prevent-the-wordpress-editor-from-stripping-out-certain-html-tags/:

"The Visual Editor is not intended for cases where you want a specific set of HTML. It is intended to be visual, for users that don’t know HTML. It will indeed “mess up” your custom HTML, because that’s it’s purpose: To write the HTML for you. It has a set way of doing things, and it will force any content to conform to its ways.

In other words, your goals here are in conflict with the purpose of the Visual editor to start out with. WordPress is primarily a tool for publishing “content”. Content is not the same as “custom HTML”.

If you want to write custom HTML, then use the HTML editor. If you want it to handle this for you, then use the visual editor and don’t worry about the HTML.

There is no case where the Visual editor will “preserve” your HTML, because it is designed specifically to create HTML without you seeing it or having to deal with HTML in any way."

With this being said, there are a few options on how to handle this with WPML. I have tested this on the clean install.

1. If you create a paragraph block and use the return key to add line breaks, and then use the Classic Translation Editor (CTE) to translate, the content will appear in a plain text field with separate fields for the text that was separated by the return key. This ensures that the layout is the same for both languages, and you can translate the text without seeing any html tags.

2. If you want to force the visual editor in the CTE, Instead of using a paragraph block, use the custom HTML block type. Here, you can add your html markup. Then, when I edit the translation, I can see that there is a visual field editor for this content. Even with the WYSIWYG tab active (Visual instead of Text), when I save the translation, the content is formatted correctly. Furthermore, if I DO click the Text tab to activate that instead of the WYSIWYG editor, I can see the tags that I manually added.

3. Another option is to use the Classic Editor plugin, which removes the gutenberg blocks and allows you to use the old standard WordPress editor. This will allow you to edit the content all in the body field.

4. Lastly, if you want to remove the option for the translators to see the Text tab, and thus disabling the option of them accessing the HTML tags, you can activate the Advanced Translation Editor (ATE) for your translators. You would still need to use Custom HTML blocks, but this removes the option to click on "Text" to see the code. There is an option there to view the source, but it does not open by default.

Please let me know if you need any further assistance and I will be happy to help.

July 16, 2019 at 6:20 pm #4223209

usahello

Thank you for the detailed reply. I understand what you're saying that toggling between visual and text modes of the visual editor will strip out HTML, I'm still left wondering why hitting "enter/return" while using the visual mode doesn't make result in a line break showing up on the front-end. The other HTML buttons work properly (e.g. making text bold, or adding an ordered list), but you can't actually get a new line of text.

As stated before, we don't want to rely on a solution where we're asking our staff and translators to add their own HTML markup, so using the "Custom HTML" block isn't the right approach for us. We also want to keep using the Gutenberg editor so we can build our pages using blocks, which rules out the Classic Editor plugin for us as well. We stopped using the ATE because we want to be able to translate more than one sentence at a time, which isn't possible using that interface.

July 17, 2019 at 12:18 pm #4229837

Lauren
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

"I'm still left wondering why hitting "enter/return" while using the visual mode doesn't make result in a line break showing up on the front-end. "

This is due to the way that WordPress handles the code in the visual editor. It's independent of WPML. When you use the Custom HTML block, the translation is shown in the visual editor, so your translators don't need to add their own HTML. The HTML only needs to be added in the original post.

You may also try searching Google for ways to prevent WordPress from stripping the HTML from the visual editor, I have seen some other plugins or code snippets available, but they have not been tested with WPML, which is why I can't recommend a specific solution this way.