Translating CET from ALB Window

Translating CET requires Translation Management. It is currently not intended to be used with classic editor translations ( - Use WPML's Translation Editor checkbox off).

Open an ALB page/post
Create your elements via button "Add New Custom Element"
Click "Edit Custom Elements" button
Edit your CET's if needed
When hovering over a shortcode button you find an icon on left top (tooltip Translate custom element) - click it
A new tab opens where you can translate the element as known by pages/posts
When option "'All subitems use the same custom element template'" is selected a button "Translate Subitem" is added to translate the subitem (opens an own window again for the subitem)
Subitems can also be translated out of ALB window (( You must select to show subitems from the dropdown left of the "End Edit Custom Elements" button, only visible when 'Individually select subitem custom element templates' is choosen.
It is also possible to translate CET's from the Translation Management Dashboard

For normal users

Update button, other buttons and some other action links and info is hidden - user should edit CET only from ALB window. Reason is, that option 'All subitems use the same custom element template' is only supported from ALB window and not from CPT screen editing.

Advanced users

add_theme_support( 'avia-custom-elements-cpt-screen' );

This adds a selectbox to theme options where you can decide to activate the CPT screen links. This also enables all buttons and links you know from normal CPT screens and also allows to update CET's.

@amElnagdy @strategio

Problem: When editing a CET from ALB window I need to tell WPML that post content is invalid so it allows to translate the new content.

How to reproduce:

Open an ALB page
Create a new CET Button
- As label use: "A new click"
Click the translate icon
Translate to e.g. "German" - the label text to translate is "A new click"
Save translation
Close CPT translation window
From ALB edit this button
- Change the label to e.g. "A changed click"
Click the translate icon again
- in the debug window for shortcode you see the changed label text
Open Translate to "German"
- the label text to translate is still "A new click" and not "A changed click"

When changing and saving a CET from CPT screen with the "Update" button the changing for the translation is recognised. But I did not find where to hook and what to set to invalidate the post.

Filter wpml_pb_shortcode_content_for_translation

In this filter we return '' for locked attributes.

Is there a way to know the context the filter is called?

If the filter is called when editing a CET subitem (e.g. button row item) the attributes of the "outer shortcode" (e.g. button row) must not be shown for translation as they are never needed - only needed for internal use to identify the shortcode as a subitem shortcode
If the filter is called when editing a CET modal group element (e.g. Button Row) it might be necessary to hide the subitem attributes, if they are not needed
in all other cases (pages, posts) everything has to be checked for translation

@InoPlugs I'll ask @strategio to look into this but I have some comments on the translation icon for CTEs

It is not needed as this encourages manual translation and it works very well via the Translation Management dashboard by sending the CET to either a professional translation or even a local translator and he still will be able to use the usual translation editor.
Even with the current workflow, by clicking the translation icon, translation management still be needed.
The icon for translation can be changed. It took me some time to recognize that is the icon for translation.

Hi @InoPlugs

Problem: When editing a CET from ALB window I need to tell WPML that post content is invalid so it allows to translate the new content.

I am not sure to follow your workflow.

When you translate an ALB post, you should not translate the locked fields of the included CET. The CET should be translated separately (for the locked fields) through the WPML > Translation Management dashboard (because the CET post type should not be directly accessible).

Anyway, I agree with @amElnagdy that we should not open a separate translation workflow for CET (i.e. editing via WP native CPT UI).

Filter wpml_pb_shortcode_content_for_translation

This filter has 2 parameters:

The original post content (expected to be made of shortcodes)
The post ID

Maybe you could use the post ID to check which element you are currently filtering? The post ID should refer either to an ALB or a CET.

Note: I wanted to re-test your latest dev version (10) today, but I didn't manage to unzip the archive (even with the password). Could you please check if you manage to unzip it?

Hi @strategio @amElnagdy

Filter wpml_pb_shortcode_content_for_translation

Rechecking, I think post ID should help.

Problem: When editing a CET from ALB window I need to tell WPML that post content is invalid so it allows to translate the new content.

Let me try to explain the problem simplyfied.

Lets say you want to create a website and you want to design a button "Contact Me" that you can reuse on several pages.

As a first step you start to design a page "My First".

Start with "Add New Page"
Click ALB button

As first step design the CET button:

Select the "Custom Elements" tab
Click Button "Add New Custom Element"
In Modal Popup select "Buttom", Name = "Contact Button", add some tooltip -> Click "Create Element" button
In next Button Modal Popup:
- Label: Contact Me and lock it
- Display Icon right and lock it
- Button Size: medium and lock it
- Save
In Custom Element tab you now have the shortcode button "Contact Button"
Drag this on page where needed
Click to open modal popup and edit and adjust what you need for this button, e.g. select an icon
Save the page

Now you can translate the CET "Contact Button":

Open Translation Management Dashboard and search this CET
You see that translation is incomplete
Click "translate" below title
In CPT Screen you can now translate the CET to all languages

Translating the pages where the button is used:

Locked options cannot be translated (in this case only label, as the others are only styling options)

After some time you want to change the button - e.g. label and icon position:

Open the previously created page "My First", but you can also open any other ALB page
Click "Custom Element" Tab and button "Edit Custom Elements"
Click the edit icon on shortcode button "Contact Button", this opens the modal window
Modify
- label to "Contact Us Now"
- Display Icon left
- Save

If you now visit a page in the base language with the button the changes will be visible without editing the page.

Of course, you must translate the CET:

Open Translation Management Dashboard and search this CET
You still see that translation is complete - wrong, because element had been changed
Click translate, CPT screen opens
Click translate to a language in sidebar
The text to translate is still "Contact Me" and not "Contact Us Now"
And we also need to translate the CET if we only change a styling attribute to have the correct value in the translated page.

If this would work and you visit a page in the other languages with the button the changes will be visible without editing the pages.

As you prefer to use Translation Management Dashboard I removed the "translate icon" from ALB shortcode button when editing custom element and added a theme option if user wants to have it.

BTW: When "Do not allow access to the screens" is selected (= default) update button and some other stuff is hidden with CSS, when "Add links to open the CPT screens" is selected all is visible so developpers can update the CET for testing.

Hi @InoPlugs,

Thanks for the detailed steps, it helps!

My tests are passing (following your steps).

I think there's a misunderstanding with the translation jobs: Once an original post (or CET in our case) is modified, the translation job must be refreshed because it's not valid anymore (the original strings have changed).

So after editing a CET that was already translated, you need to go to WPML > Translation Management (i.e. "translation dashboard") and re-send the CET to translation. Once you have a created a new translation job, you can go to WPML > Translations (i.e. "translations queue") and complete the new translation job.

I managed to test your latest version because @amElnagdy shared another ZIP archive. Not sure why I can't properly extract yours, maybe because I use Linux.

I also notices several notices and warnings when I switch the language in the backend:

( ! ) Notice: Undefined variable: main_color in /shared/httpd/wpml/htdocs/wp-content/themes/enfold/css/dynamic-css.php on line 35
Call Stack
#   Time    Memory  Function    Location
1   0.0008  393880  {main}( )   .../admin.php:0
2   0.0009  394520  require_once( '/shared/httpd/wpml/htdocs/wp-load.php )  .../admin.php:34
3   0.0009  394960  require_once( '/shared/httpd/wpml/htdocs/wp-config.php )    .../wp-load.php:37
4   0.0010  399696  require_once( '/shared/httpd/wpml/htdocs/wp-settings.php )  .../wp-config.php:93
5   0.5721  12447376    do_action( $tag = 'init' )  .../wp-settings.php:557
6   0.5721  12447752    WP_Hook->do_action( $args = [0 => ''] ) .../plugin.php:484
7   0.5721  12447752    WP_Hook->apply_filters( $value = '', $args = [0 => ''] )    .../class-wp-hook.php:311
8   1.3255  21942760    avia_custom_styles( '' )    .../class-wp-hook.php:287
9   1.3255  21942760    avia_prepare_dynamic_styles( $options = ??? )   .../functions.php:730
10  1.3263  21945368    require( '/shared/httpd/wpml/htdocs/wp-content/themes/enfold/css/dynamic-css.php )  .../register-dynamic-styles.php:159

Or:

( ! ) Notice: Undefined variable: colors in /shared/httpd/wpml/htdocs/wp-content/themes/enfold/config-woocommerce/class-avia-wc-block-editor.php on line 345
--
1 | 0.0008 | 393880 | {main}( ) | .../admin.php:0
2 | 1.4521 | 22571816 | do_action( $tag = 'admin_init' ) | .../admin.php:175
3 | 1.4521 | 22572192 | WP_Hook->do_action( $args = [0 => ''] ) | .../plugin.php:484
4 | 1.4521 | 22572192 | WP_Hook->apply_filters( $value = '', $args = [0 => ''] ) | .../class-wp-hook.php:311
5 | 1.4742 | 22774216 | avia_custom_styles( '' ) | .../class-wp-hook.php:287
6 | 1.4742 | 22774216 | avia_prepare_dynamic_styles( $options = ??? ) | .../functions.php:730
7 | 1.4750 | 22775200 | require( '/shared/httpd/wpml/htdocs/wp-content/themes/enfold/css/dynamic-css.php ) | .../register-dynamic-styles.php:159
8 | 1.4754 | 22775520 | apply_filters( $tag = 'avia_dynamic_css_output', $value = '\r\n\r\n::-moz-selection{\r\nbackground-color: ;\r\ncolor: transparent;\r\n}\r\n\r\n::selection{\r\nbackground-color: ;\r\ncolor: transparent;\r\n}\r\n\r\n\r\n\r\nhtml.html_boxed {background: transparent top left no-repeat fixed;}\r\n\r\n', [] ) | .../dynamic-css.php:963
9 | 1.4754 | 22775928 | WP_Hook->apply_filters( $value = '\r\n\r\n::-moz-selection{\r\nbackground-color: ;\r\ncolor: transparent;\r\n}\r\n\r\n::selection{\r\nbackground-color: ;\r\ncolor: transparent;\r\n}\r\n\r\n\r\n\r\nhtml.html_boxed {background: transparent top left no-repeat fixed;}\r\n\r\n', $args = [0 => '\r\n\r\n::-moz-selection{\r\nbackground-color: ;\r\ncolor: transparent;\r\n}\r\n\r\n::selection{\r\nbackground-color: ;\r\ncolor: transparent;\r\n}\r\n\r\n\r\n\r\nhtml.html_boxed {background: transparent top left no-repeat fixed;}\r\n\r\n', 1 => []] ) | .../plugin.php:212
10 | 1.4755 | 22776680 | Avia_WC_Block_Editor->handler_avia_dynamic_css_output( $output = '\r\n\r\n::-moz-selection{\r\nbackground-color: ;\r\ncolor: transparent;\r\n}\r\n\r\n::selection{\r\nbackground-color: ;\r\ncolor: transparent;\r\n}\r\n\r\n\r\n\r\nhtml.html_boxed {background: transparent top left no-repeat fixed;}\r\n\r\n', $color_set = [] ) | .../class-wp-hook.php:287

Could this be related to the settings not properly defined in the secondary language?

@InoPlugs, we managed to reproduce the issue when we don't save the current post (ALB screen) after updating the CET (I was wrong).

I found the reason why: -> We already have a filter on wpml_pb_shortcode_content_for_translation to get the post content from the _aviaLayoutBuilderCleanData custom field (see \WPML_Compatibility_Theme_Enfold::get_content_from_custom_field). -> The problem is that when we compute the translation status (a hash with different pieces of content) on post save action, we also apply this wpml_pb_shortcode_content_for_translation filter hook on the post content and we receive the previous content instead (because the custom field is not updated yet). If we update twice the CET, we can see its translation status changing.

I can suggest a small change in your code to workaround that (in \avia_WPML::handler_wpml_pb_shortcode_content_for_translation):

if( isset( $_REQUEST['action'] ) && in_array( $_REQUEST['action'], array( 'avia_alb_element_template_cpt_actions', 'avia_alb_element_template_update_content' ) ) )
{
    $post = $unfiltered_post_content = get_post($post_id);
    $post_content = $post ? $post->post_content : $post_content;
    $update = true;
}

Let me know if it works for you.

Hi @strategio @amElnagdy

Cool, thank you. A first check this seems to fix the problem.

I will do some more testing tomorrow and will let you know. I also will add some more adjustments and send you a new release for checking.

The notices sound like missing settings in the options array. In the next release I added a check that all settings keys from main language are also set in the other languages when switching langs in theme option page in backend.

KriesiMedia / Enfold-and-WPML