I've used the Custom XML Configuation to configure wpml-config code to add translation support for Custom Attributes of Elementor Button links and Elementor Heading links, but I've been unsuccessfuly adding xml to translate icon Links URLs and Custom Attributes of the Elementor Social Icons widget.
I'm using up to date WordPress, WPML, Elementor, and Elementor Pro plugins. And I've tried adding Social Icons to totally new pages and the links and custom attributes still do not show up in the ATE.
You XML looks fine as per the structure and tags, however, can you try with removing the "conditions" part and see if it helps? Remember to make a little change in the content (page or post where it is used) and save before updating the translation in ATE.
Please let me know if this helps or I'll try my best to further help you on the matter.
I attempted to remove all of my conditions, saved, then added a new Social Icons widget to the page with link and attributes, saved, and then went into the ATE to update translation and it's still not showing for Social Icons. Works fine for new buttons and headings.
This is my full wpml-config on the Custom XML Configuation screen including the heading and button overrides:
Can you please create a minimal setup on the following Sandbox site?
hidden link
It is a fresh installation with WPML plugins uploaded (not installed or active). You can upload your theme and plugins here and setup as needed.
A minimal setup to reproduce the issue is necessary.
Please take your time and reply when the site is ready. Once you are able to reproduce the issue, please write down detailed steps about how one can reproduce the issue on another fresh installation.
I then created a new Page and click Edit With Elementor.
- Add a Social Icons widget to the page.
- Removed 2 icons to only leave the one Facebook icon for simplicity.
- Edit that icon by clicking on it
- Enter a Link: hidden link
- Click on the gear icon next to the link url.
- Enter a Custom Attribute: aria-label|Just testing
- Publish the page.
I then Exit Elementor and while still editing the page with WordPress, I click on the + icon to Translate into French, with WPML Translation Editor selected.
Only the page Title is available for translation. No option for the Social Icon Link URL or Custom Attributes as I had defined in the wpml-config.
This is the same as yours, but with usage of "key_of" attribute with the fields.
But this has a problem, that it only takes last field into account. Means this 'll show only URLs for translation in ATE. If you change order of the fields, then it 'll only show custom attributes in ATE.
I've escalated the matter to our 2nd tier for a detailed investigation. And 'll update you accordingly.
On the other hand, there are a few other points to be noted regarding registering these widgets:
Interesting! Well for the time being, using the key_of attribute will work for my purpose because it's only the custom_attributes that I really need to translate for aria-label accessibility. But I hope that WPML 2nd tier support will be able to fully resolve the issue. Thanks for your help!
- Remove the XML config and any code you added.
- Add the below PHP code in theme's functions.php
- Update the page with Elementor and translate again.
add_action('init', function () {
add_filter('wpml_elementor_widgets_to_translate', function ($widgets) {
$widgets['social-icons'] = [
'conditions' => ['widgetType' => 'social-icons'],
'fields' => [],
'integration-class' => 'elementorSocialIcons'
];
return $widgets;
});
/**
* Class to translate the Elementor social-icons widget.
*
* @see wpmltriage-481
*/
class elementorSocialIcons extends WPML_Elementor_Module_With_Items {
/**
* @return string
*/
public function get_items_field() {
return 'social_icon_list';
}
/**
* @return array
*/
public function get_fields() {
return [
'link' => [
'url',
'custom_attributes'
]
];
}
/**
* @param string $field
*
* @return string
*/
protected function get_title($field) {
switch ($field) {
case 'url':
return esc_html__('Social Icon: URL', 'elementor');
case 'custom_attributes':
return esc_html__('Social Icon: Custom Attributes', 'elementor');
default:
return '';
}
}
/**
* @param string $field
*
* @return string
*/
protected function get_editor_type($field) {
switch ($field) {
case 'custom_attributes':
return 'LINE';
case 'url':
return 'LINK';
default:
return '';
}
}
}
});
I've tried this in the sandbox and it seems to work perfectly fine (see attached).
