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 5 replies, has 2 voices.

Last updated by Andreas W. 2 months ago.

Assigned support staff: Andreas W..

Author Posts
August 13, 2019 at 12:15 pm #4387873

gaborN-2

Hi,
I am trying to: create custom beaver builder modules with translatable content fields.

Link to a page where the issue can be seen: local

I expected to see: Fields to translate in wpml editor

Instead, I got: Only the fields of the built is modules are showing up for translation.

I've read through many issues about this, I've tried a few of them, but no luck.
The module is called Card grid (with the class MQCardGrid), and when I check the $module variable, I see 'type' => 'mq-card-grid'.

This is my module's class file:

<?php
class MQCardGrid extends FLBuilderModule {

	public function __construct() {
		parent::__construct(
			array(
				'name'        => __( 'Card grid', 'mq_bb' ),
				'description' => __( 'Choose card grid', 'mq_bb' ),
				'category'    => MQBB_MODULE_CATEGORY,
				'dir'         => MQBB_MODULE_DIR . 'modules/card-grid/',
				'url'         => MQBB_MODULE_URL . 'modules/card-grid/',
			)
		);
		add_filter( 'wpml_beaver_builder_modules_to_translate', array( $this, 'wpml_modules_to_translate_filter' ) );
	}

	public function wpml_modules_to_translate_filter( $modules ) {
		$modules['mq-card-grid'] = array(
			'conditions' => array( 'type' => 'mq-card-grid' ),
			'fields'     => array(
				array(
					'field'       => 'item_title',
					'type'        => 'text',
					'editor_type' => 'LINE',
				),
			),
		);
		return $modules;
	}
}

require_once MQBB_MODULE_DIR . 'modules/card-grid/register.php';

August 13, 2019 at 11:42 pm #4391119

Andreas W.
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

Hello,

Thank you for contacting the WPML Support Forum.

In cases where Beaver Builder Modules are not showing up inside of the WPML Translation Editor we can trigger the strings using a custom XML config for the repective page builder module´s shortcode.

hidden link

To know the shortcode you will need to investigate the page in classic more, search for the repective content and use the shortcode that is wrapping those strings.

Then add a custom XML config at WPML -> Settings -> Custom XML Config while using the markup found inside of the following documentation:

Only make sure to wrap the markup into <wpml-config>...</wpml-config>

https://wpml.org/documentation/support/language-configuration-files/#page-builder-content

Let me know if you need further assistance.

Kind regards
Andreas

August 14, 2019 at 9:26 am #4393711

gaborN-2

What you suggest is interesting to me, because it takes a very different approach than the other ones I saw.

https://wpml.org/documentation/plugins-compatibility/elementor/how-to-add-wpml-support-to-custom-elementor-widgets/

https://wpml.org/forums/topic/translating-custom-modules-for-beaver-builder/

https://wpml.org/forums/topic/beaver-builder-custom-module-translation/

https://wpml.org/forums/topic/beaver-builder-posts-module-doesnt-show-up-in-translation-management/

and there is more. So, is there a way, to make it work like these? Or is this the "new way to do it"?

August 14, 2019 at 6:44 pm #4397071

Andreas W.
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

Hello,

I am sorry about the confusion but I consulted our developers and the custom XML solution for calling shortcodes does sadly not apply here in order to register the module for WPML.

Please have a look at the following documentations:

https://wpml.org/documentation/support/translating-beaver-builder-plugin/

hidden link

Could you please add this code to your functions.php file in order to register the module:

add_filter( 'wpml_beaver_builder_modules_to_translate', 'add_my_beaver_builder_modules' );
function add_my_beaver_builder_modules( $modules ) {
    $modules['mq-card-grid'] = array(
        'conditions' => array('type' => 'mq-card-grid'),
        'fields'     => array(
                array(
                    'field'       => 'item_title',
                    'type'        => __( 'text', 'mqcardgrid' ),
                    'editor_type' => 'LINE'
                ),
            ),
);

  return $modules;
}

I hope this will solve the issue. Register further modules in similar way starting at $modules['mq-card-grid'] = array...

Make sure to not use the samne module name various times.

You might recognize that I made a small adjustment at the array for the item_title field. I have added the domain 'mqcardgrid' to the 'type' object and added a GetTextCall.

This way the strings that get entered on backend will be made availabel for translation and the domain will make it possible to locate the strings further on our String Translation Module.

Let me know if it worked out. Further, please install Beaver Builder and add your custom module onto the following test-site for further testing and in oder to escalate the issue to our developers.

One Click Login: hidden link

Leave me a short notification once the site is ready for testing.

Kind regards
Andreas

I would like to request temporary access (wp-admin and FTP) to your site to take a better look at the issue. It would be better to a testing site where the issue is replicated.

You will find the needed fields for this below the comment area when you log in to leave your next reply. The information you will enter is private which means only you and I can see and have access to it.

Maybe I'll need to replicate your site locally. For this, I’ll need to temporarily install a plugin called “Duplicator” on your site. This will allow me to create a copy of your site and your content. Once the problem is resolved I will delete the local site. Let me know if this is ok with you.

IMPORTANT

Please make a backup of site files and database before providing us access.
If you do not see the wp-admin/FTP fields this means your post & website login details will be made PUBLIC. DO NOT post your website details unless you see the required wp-admin/FTP fields. If you do not, please ask me to enable the private box. The private box looks like this:
hidden link

Kind regards
Andreas

August 15, 2019 at 5:39 am #4399157

gaborN-2

Hi,
thank you for looking into this more.
The code you provided did not work for me.
The test site is ready.

August 16, 2019 at 12:22 am #4403849

Andreas W.
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

Hello,

First, please take note that we are dealing here with custom coding solution which are by default not covered by our support policy but I would like to guide you about how to solve the issue.

I have created a test site and added the Card Grid module. The page was translated and created a copy of the Card Grid which then was able to be edited manually on the WordPress Editor for each language. The Plugin Options were able to translate on String Translation after scanning the Plugin for new Strings at WPML -> Theme and Plugin Localization.

In order to make the strings available on the WPML Translation Editor the module has been registered using the theme´s functions.php file.

This example code will only work for the Card Grid module. Each module will only be available by adding the module object (Example: ['Card']) and the array for each module before returning the function $modules;.

In fact you should be able to adjust the arrays in order to adjust what should be translated and what not. I did not sort out the array in this example.

add_filter( 'wpml_beaver_builder_modules_to_translate', 'add_my_beaver_builder_modules' );
function add_my_beaver_builder_modules( $modules ) {
    $modules['Card'] = array(
        	'title'  => __( 'Card', 'memoq_bb' ),
	'fields' => array(
		'card_padding'    => array(
			'type'        => 'dimension',
			'label'       => __( 'Card padding', 'memoq_bb' ),
			'description' => 'px',
			'unit'        => 'px',
			'responsive'  => true,
			'default'     => '32',
		),
		'card_background' => array(
			'type'    => 'select',
			'label'   => __( 'Card background', 'memoq_bb' ),
			'default' => '1',
			'options' => array(
				'0' => __( 'No', 'memoq_bb' ),
				'1' => __( 'Yes', 'memoq_bb' ),
			),
		),
	),
);
$photo       = array(
	'title'  => __( 'Image', 'memoq_bb' ),
	'fields' => array(
		'photo_background'  => array(
			'type'    => 'select',
			'label'   => __( 'Image background', 'memoq_bb' ),
			'default' => '1',
			'options' => array(
				'0' => __( 'No', 'memoq_bb' ),
				'1' => __( 'Yes', 'memoq_bb' ),
			),
		),
		'photo_size'        => array(
			'type'    => 'select',
			'label'   => __( 'Image size (px)', 'memoq_bb' ),
			'default' => '48',
			'options' => array(
				'128' => __( '128', 'memoq_bb' ),
				'96'  => __( '96', 'memoq_bb' ),
				'64'  => __( '64', 'memoq_bb' ),
				'48'  => __( '48', 'memoq_bb' ),
				'24'  => __( '24', 'memoq_bb' ),
			),
		),
		'space_under_photo' => array(
			'type'        => 'unit',
			'label'       => __( 'Space under Image', 'memoq_bb' ),
			'description' => 'px',
			'responsive'  => array(
				'default' => array(
					'default'    => '48',
					'medium'     => '32',
					'responsive' => '24',
				),
			),
		),
	),
);
$title       = array(
	'title'  => __( 'Title', 'memoq_bb' ),
	'fields' => array(
		'title_font_size'   => array(
			'type'        => 'unit',
			'label'       => 'Font Size',
			'description' => 'px',
			'responsive'  => array(
				'default' => array(
					'default'    => 24,
					'medium'     => 20,
					'responsive' => 16,
				),
			),
		),
		'title_line_height' => array(
			'type'        => 'unit',
			'label'       => 'Line Height',
			'description' => 'px',
			'responsive'  => array(
				'default' => array(
					'default'    => 32,
					'medium'     => 28,
					'responsive' => 24,
				),
			),
		),
	),
);
$description = array(
	'title'  => __( 'Description', 'memoq_bb' ),
	'fields' => array(
		'space_above_description' => array(
			'type'        => 'unit',
			'label'       => __( 'Space above Description', 'memoq_bb' ),
			'description' => 'px',
			'responsive'  => array(
				'default' => array(
					'default'    => '24',
					'medium'     => '16',
					'responsive' => '8',
				),
			),
		),
		'description_font_size'   => array(
			'type'        => 'unit',
			'label'       => 'Font Size',
			'description' => 'px',
			'responsive'  => array(
				'default' => array(
					'default'    => '16',
					'medium'     => '16',
					'responsive' => '14',
				),
			),
		),
		'description_line_height' => array(
			'type'        => 'unit',
			'label'       => 'Line Height',
			'description' => 'px',
			'responsive'  => array(
				'default' => array(
					'default'    => '24',
					'medium'     => '24',
					'responsive' => '24',
				),
			),
		),
	),
);
$information = array(
	'title'  => __( 'Information', 'memoq_bb' ),
	'fields' => array(
		'space_above_information' => array(
			'type'        => 'unit',
			'label'       => __( 'Space above Information', 'memoq_bb' ),
			'description' => 'px',
			'responsive'  => array(
				'default' => array(
					'default'    => '8',
					'medium'     => '8',
					'responsive' => '8',
				),
			),
		),
		'information_font_size'   => array(
			'type'        => 'unit',
			'label'       => 'Font Size',
			'description' => 'px',
			'responsive'  => array(
				'default' => array(
					'default'    => '16',
					'medium'     => '16',
					'responsive' => '14',
				),
			),
		),
		'information_line_height' => array(
			'type'        => 'unit',
			'label'       => 'Line Height',
			'description' => 'px',
			'responsive'  => array(
				'default' => array(
					'default'    => '24',
					'medium'     => '24',
					'responsive' => '24',
				),
			),
		),
	),
);
$link        = array(
	'title'  => __( 'Link', 'memoq_bb' ),
	'fields' => array(
		'space_above_link' => array(
			'type'        => 'unit',
			'label'       => __( 'Space above Link', 'memoq_bb' ),
			'description' => 'px',
			'responsive'  => array(
				'default' => array(
					'default'    => '24',
					'medium'     => '24',
					'responsive' => '24',
				),
			),
		),
		'link_font_size'   => array(
			'type'        => 'unit',
			'label'       => 'Font Size',
			'description' => 'px',
			'responsive'  => array(
				'default' => array(
					'default'    => '16',
					'medium'     => '16',
					'responsive' => '14',
				),
			),
		),
		'link_line_height' => array(
			'type'        => 'unit',
			'label'       => 'Line Height',
			'description' => 'px',
			'responsive'  => array(
				'default' => array(
					'default'    => '24',
					'medium'     => '20',
					'responsive' => '16',
				),
			),
		),
	),
);

$customization = array(
	'title'    => __( 'Customization', 'memoq_bb' ),
	'sections' => array(
		'card'        => $card,
		'photo'       => $photo,
		'title'       => $title,
		'description' => $description,
		'information' => $information,
		'link'        => $link,
	),
);
 
  return $modules;
}

As you see the module registration starts at $modules['Card'] until the last closing bracket and semicolon before we return the function $modules;. Make sure to add all modules before returning the function.

Now, if you see on the test site the created test page shows all available fields on the WPML Translation Editor.
In order to make the fields available on the WPML Translation Editor go to the page editor and scroll to the Multilingual Content Setup. Here click "show system fields" and enable _fl_builder_draft for translation.

The Plugin options can further be translated on String Translation.

I hope this clarified your request.

Kind regards
Andreas