#3397222 Make field multilingual and update builder.js for tests.

js/builder.es6.js

@@ -105,19 +105,22 @@
    * @param {jQuery} $element The builder element.
    */
   function updateMoveButtons($element) {
-    [...$element[0].querySelectorAll('.lpb-up, .lpb-down')].forEach((el) => {
+    const lpbBuilderElements = Array.from($element[0].querySelectorAll('.js-lpb-component-list, .js-lpb-region'));
+    const lpbBuilderComponent = lpbBuilderElements.filter(el => el.querySelector('.js-lpb-component'));
+
+    $element[0].querySelectorAll('.lpb-up, .lpb-down').forEach((el) => {
+      // Set the tabindex of the up and down arrows to 0.
       el.setAttribute('tabindex', '0');
     });
-    [...$element[0].querySelectorAll('.js-lpb-component-list:has(.js-lpb-component), .js-lpb-region:has(.js-lpb-component)')].forEach((el) => {
-      const components = [...el.childNodes].filter(n => n.classList && n.classList.contains('js-lpb-component'));
-      const upBtn = components[0].querySelector('.lpb-up');
-      if (upBtn) {
-        upBtn.setAttribute('tabindex', '-1');
-      }
-      const downBtn = components[components.length - 1].querySelector('.lpb-down');
-      if (downBtn) {
-        downBtn.setAttribute('tabindex', '-1');
-      }
+
+    lpbBuilderComponent.forEach((el) => {
+      const components = Array.from(el.children).filter(n => n.classList.contains('js-lpb-component'));
+
+      // Set the tabindex of the first component's up arrow to -1.
+      components[0].querySelector('.lpb-up')?.setAttribute('tabindex', '-1');
+
+      // Set the tabindex of the last component's down arrow to -1.
+      components[components.length - 1].querySelector('.lpb-down')?.setAttribute('tabindex', '-1');
     });
   }
 

js/builder.js

@@ -6,12 +6,6 @@
 **/
 "use strict";
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 (function ($, Drupal, debounce, dragula, once) {
   var idAttr = 'data-lpb-id';
   function attachUiElements($container, settings) {
@@ -68,21 +62,20 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     });
   }
   function updateMoveButtons($element) {
-    _toConsumableArray($element[0].querySelectorAll('.lpb-up, .lpb-down')).forEach(function (el) {
+    var lpbBuilderElements = Array.from($element[0].querySelectorAll('.js-lpb-component-list, .js-lpb-region'));
+    var lpbBuilderComponent = lpbBuilderElements.filter(function (el) {
+      return el.querySelector('.js-lpb-component');
+    });
+    $element[0].querySelectorAll('.lpb-up, .lpb-down').forEach(function (el) {
       el.setAttribute('tabindex', '0');
     });
-    _toConsumableArray($element[0].querySelectorAll('.js-lpb-component-list:has(.js-lpb-component), .js-lpb-region:has(.js-lpb-component)')).forEach(function (el) {
-      var components = _toConsumableArray(el.childNodes).filter(function (n) {
-        return n.classList && n.classList.contains('js-lpb-component');
+    lpbBuilderComponent.forEach(function (el) {
+      var _components$0$querySe, _components$querySele;
+      var components = Array.from(el.children).filter(function (n) {
+        return n.classList.contains('js-lpb-component');
       });
-      var upBtn = components[0].querySelector('.lpb-up');
-      if (upBtn) {
-        upBtn.setAttribute('tabindex', '-1');
-      }
-      var downBtn = components[components.length - 1].querySelector('.lpb-down');
-      if (downBtn) {
-        downBtn.setAttribute('tabindex', '-1');
-      }
+      (_components$0$querySe = components[0].querySelector('.lpb-up')) === null || _components$0$querySe === void 0 || _components$0$querySe.setAttribute('tabindex', '-1');
+      (_components$querySele = components[components.length - 1].querySelector('.lpb-down')) === null || _components$querySele === void 0 || _components$querySele.setAttribute('tabindex', '-1');
     });
   }
   function hideEmptyRegionButtons($element) {

src/Plugin/Field/FieldWidget/LayoutParagraphsWidget.php

@@ -425,4 +425,16 @@ class LayoutParagraphsWidget extends WidgetBase implements ContainerFactoryPlugi
     return $defaults;
   }
 
+  /**
+   * {@inheritdoc}
+   */
+  public function form(FieldItemListInterface $items, array &$form, FormStateInterface $form_state, $get_delta = NULL) {
+    $elements = parent::form($items, $form, $form_state, $get_delta);
+    // Signal to content_translation that this field should be treated as
+    // multilingual and not be hidden, see
+    // \Drupal\content_translation\ContentTranslationHandler::entityFormSharedElements().
+    $elements['#multilingual'] = TRUE;
+    return $elements;
+  }
+
 }