Fix translatable style in ACF-QTX fields (#1246)

admin/qtx_admin.php

@@ -497,7 +497,7 @@ function qtranxf_add_admin_highlight_css() {
 }
 
 function qtranxf_get_admin_highlight_css( $highlight_mode ) {
-    $css = 'input.qtranxs-translatable, textarea.qtranxs-translatable, div.qtranxs-translatable {' . PHP_EOL;
+    $css = 'input.qtranxs-translatable, textarea.qtranxs-translatable, div.qtranxs-translatable, span.qtranxs-translatable {' . PHP_EOL;
     switch ( $highlight_mode ) {
         case QTX_HIGHLIGHT_MODE_BORDER_LEFT:
             $css .= 'border-left: 3px solid #UserColor2 !important;' . PHP_EOL;

modules/acf/js/register.js

@@ -112,14 +112,24 @@ const register_fields = () => {
                 // select2
                 this.select2 = [];
                 this.$('.acf-post-object select').each(function () {
-                    self.select2.push(acf.newSelect2($(this), {
+                    const $newSelect2 = acf.newSelect2($(this), {
                         field: self,
                         ajax: self.get('ajax'),
                         multiple: self.get('multiple'),
                         placeholder: self.get('placeholder'),
                         allowNull: self.get('allow_null'),
                         ajaxAction: ajaxAction,
-                    }));
+                    });
+                    self.select2.push($newSelect2);
+
+                    // UI design hack to set the "qtranxs-translatable" class to the proper UI element.
+                    // It can't be set properly in PHP because the select element doesn't exist yet.
+                    // It's set to the post-object div element but it doesn't look nice as it contains the field name.
+                    // So we move it down from div to the span field displaying the selected text.
+                    const $postObjectDiv = $newSelect2.$el.parents('.acf-post-object.qtranxs-translatable');
+                    $postObjectDiv.removeClass('qtranxs-translatable');
+                    const $selectionSpan = $postObjectDiv.find('span.select2-selection');
+                    $selectionSpan.addClass('qtranxs-translatable');
                 });
             }
         },

modules/acf/src/fields/file.php

@@ -95,7 +95,7 @@ function render_field( $field ) {
             $field['name'] = $field_name . '[' . $language . ']';
             $field['value']       = $values[ $language ];
             $div['data-language'] = $language;
-            $div['class']         = 'acf-file-uploader acf-cf';
+            $div['class']         = 'acf-file-uploader acf-cf qtranxs-translatable';
 
             if ( $field['value'] ) {
                 $file = get_post( $field['value'] );

modules/acf/src/fields/image.php

@@ -104,7 +104,7 @@ function render_field( $field ) {
             $field['value'] = $values[ $language ];
 
             $div['data-language'] = $language;
-            $div['class']         = 'acf-image-uploader acf-cf';
+            $div['class']         = 'acf-image-uploader acf-cf qtranxs-translatable';
 
             if ( $field['value'] ) {
                 $url = wp_get_attachment_image_src( $field['value'], $field['preview_size'] );

modules/acf/src/fields/post_object.php

@@ -68,7 +68,12 @@ function render_field( $field ) {
         }
 
         foreach ( $languages as $language ) {
-            $class          = ( $language === $currentLanguage ) ? 'acf-post-object current-language' : 'acf-post-object';
+            // See UI hack in JS registerFieldType PostObjectField
+            // Set the translatable class to the main div here and move it down to the selection span later.
+            $class = 'acf-post-object qtranxs-translatable';
+            if ( $language === $currentLanguage ) {
+                $class .= ' current-language';
+            }
             $field['id']    = $atts['id'] . "-$language";
             $field['name']  = $atts['name'] . "[$language]";
             $field['value'] = $values[ $language ];

modules/acf/src/fields/text.php

@@ -75,7 +75,7 @@ function render_field( $field ) {
         }
 
         foreach ( $languages as $language ) {
-            $atts['class'] = $field['class'];
+            $atts['class'] = $field['class'] . ' qtranxs-translatable';
             if ( $language === $currentLanguage ) {
                 $atts['class'] .= ' current-language';
             }

modules/acf/src/fields/textarea.php

@@ -79,7 +79,7 @@ function render_field( $field ) {
         }
 
         foreach ( $languages as $language ) {
-            $atts['class'] = $field['class'];
+            $atts['class'] = $field['class'] . ' qtranxs-translatable';
             if ( $language === $currentLanguage ) {
                 $atts['class'] .= ' current-language';
             }

modules/acf/src/fields/url.php

@@ -77,7 +77,7 @@ function render_field( $field ) {
         echo '<i class="acf-icon -globe -small"></i>';
 
         foreach ( $languages as $language ) {
-            $atts['class'] = $field['class'];
+            $atts['class'] = $field['class'] . ' qtranxs-translatable';
             if ( $language === $currentLanguage ) {
                 $atts['class'] .= ' current-language';
             }

modules/acf/src/fields/wysiwyg.php

@@ -137,7 +137,8 @@ class="wp-switch-editor switch-html" <?php echo $button; ?>
                     <?php endif; ?>
                 </div>
                 <div id="wp-<?php echo $id; ?>-editor-container" class="wp-editor-container">
-                    <textarea id="<?php echo $id; ?>" class="qtx-wp-editor-area" name="<?php echo $name; ?>"
+                    <textarea id="<?php echo $id; ?>" class="qtx-wp-editor-area qtranxs-translatable"
+                              name="<?php echo $name; ?>"
                               <?php if ( $height ): ?>style="height:<?php echo $height; ?>px;"<?php endif; ?>><?php echo $value; ?></textarea>
                 </div>
             </div>