Simplify translatable UI for ACF post object (#1246)

qtranslate · Nov 6, 2022 · 4579080 · 4579080
1 parent 566294a
commit 4579080
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 16 deletions.
diff --git a/dist/modules/acf.js b/dist/modules/acf.js
diff --git a/modules/acf/js/register.js b/modules/acf/js/register.js
@@ -83,7 +83,6 @@ const register_fields = () => {
         }
     }));
 
-
     acf.registerFieldType(acf.models.PostObjectField.extend({
         type: 'qtranslate_post_object',
 
@@ -109,7 +108,6 @@ const register_fields = () => {
                     ajaxAction = 'acf/fields/' + this.get('type') + '/query';
                 }
 
-                // select2
                 this.select2 = [];
                 this.$('.acf-post-object select').each(function () {
                     const $newSelect2 = acf.newSelect2($(this), {
@@ -121,19 +119,13 @@ const register_fields = () => {
                         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');
                 });
+
+                // Set the "qtranxs-translatable" class to the proper UI element.
+                // It can't be done in PHP because the select element doesn't exist yet.
+                this.$('.acf-post-object span.select2-selection').addClass('qtranxs-translatable');
             }
         },
-
         onRemove: function () {
             if (this.select2) {
                 for (let i = 0; i < this.select2.length; i++) {

diff --git a/modules/acf/src/fields/post_object.php b/modules/acf/src/fields/post_object.php
@@ -68,9 +68,8 @@ function render_field( $field ) {
         }
 
         foreach ( $languages as $language ) {
-            // 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';
+            // The select2 UI item is created later, so the "qtranxs-translatable" style class is set by JS code.
+            $class = 'acf-post-object';
             if ( $language === $currentLanguage ) {
                 $class .= ' current-language';
             }