Sunday, January 12, 2020

Wordpress DIVI Theme internationalization - evaluation and issues

Website localization is better done when websites are internationalized. Wordpress uses the GNU Translation Project gettext utility for internationalization (i18n) and at the time of this writing most professional plugins and themes use gettext .po files to define localization (l10n) strings (AKA localizable text) in plain text and .mo files that are a machine representation of the .po files to aid gettext with the optimal replacement of the strings.

The main issue with current plugins and themes is that they fail to localize all their pieces driving most developers to look for alternatives that would instead push them to duplicate websites. But we, as software engineers, know that most of the time reusability is king and to achieve it we need to get back to the roots: be simple (use gettext) and precise (help the theme or plugin author to internationalize).

Here is what I patched this weekend in the Divi plugin. I hope the Divi team will read this and incorporate these fixes (or alike). There are so many people looking for answers to these problems and at the end the solution is not simple for them (as they have to go out there and purchase yet another plugin) neither precise (as no patch is offered to work with these themes and plugins as they are without the need to add a Wordpress translation plugin).

I am all for the use of translation plugins but one size does not fit all and being able to control your own destiny is sometimes (arguably all times) very important.

For those Wordpress Divi users that want to control their own destiny here are the patches needed to make some of the most common Wordpress Divi modules fully localized:
  1. Divi Tabs module: The tab title is not internationalized. To fix it file includes/builder/module/Tabs.php needs to use esc_html__ on each value of each $tab_title array inside function get_tabs_nav()
    ...
     public function get_tabs_nav() {
      global $et_pb_tab_titles;
      global $et_pb_tab_classes;
    
      $tabs = '';
    
      $i = 0;
      if ( ! empty( $et_pb_tab_titles ) ) {
       foreach ( $et_pb_tab_titles as $tab_title ){
                    // The below block is necessary to internationalize the tab titles
                    foreach ($tab_title as $key=>&$value){
                      $value = esc_html__($value, 'et_builder');
                    }
                    // End of tab titles internationalization block
                    unset($value);
    ...
    
  2. Divi Button Module: The button title is not internationalized. To fix it, file includes/builder/module/Button.php, function render() should assign to button_text the i18n value using the esc_html__() function:
    ...
      // Render Button
      $button = $this->render_button( array(
       'button_id'           => $this->module_id( false ),
       'button_classname'    => explode( ' ', $this->module_classname( $render_slug ) ),
       'button_custom'       => $button_custom,
       'button_rel'          => $button_rel,
       'button_text'         => esc_html__( $button_text, 'et_builder' ), // button i18n
    ...
    
  3. Divi Blurb module: The Blurb title is not internationalized. To fix it, file includes/builder/module/Blurb.php, function render() should assign to the blurb title the i18n value using the esc_html__() function (and others because for this case the actual plain text title is a protected member of an object):
    ...  
      if ( '' !== $title ) {
       $title = sprintf(
        '<%1$s class="et_pb_module_header">%2$s',
        et_pb_process_header_level( $header_level, 'h4' ),
        et_core_esc_previously( $title )
       );
                            // starts blurb i18n patch
                            $plain_source_title = strip_tags( $title );
                            $plain_target_title = esc_html__($plain_source_title, 'et_builder');
                            $title = str_replace ($plain_source_title, $plain_target_title, $title);
                            // ends blurb i18n patch
      }
    ...
    
  4. Divi Post Title module: The Post Title title is not internationalized. To fix it, file includes/builder/module/PortTitle.php, function render() should assign to $post_title the i18n value using the esc_html__() function:
    ...
      if ( $multi_view->has_value( 'title', 'on' ) ) {
       if ( is_et_pb_preview() && isset( $_POST['post_title'] ) && wp_verify_nonce( $_POST['et_pb_preview_nonce'], 'et_pb_preview_nonce' ) ) {
        $post_title = sanitize_text_field( wp_unslash( $_POST['post_title'] ) );
       } else {
        $post_title = esc_html( et_builder_get_current_title() );
       }
                    $post_title = esc_html__($post_title, 'et_builder'); // post title i18n fix
    ...
    
    BTW if you are looking to translate your website, internationalized or not, and do not have the workforce to do it (engineers, linguists etc) I strongly recommend Protranslating. Not only you will get full support from very talented people, but you will be in very good hands from a security and privacy standpoint.

    Full Disclosure: I work for Protranslating but the opinions expressed in all of my posts are not necessarily those of my employer.

Followers