diff --git a/js/builder.es6.js b/js/builder.es6.js
index c5fa474434570fb4f4042a0d4995fbbf7beb0665..5ef3f279fd8febe2b26b2673d573e7e89fb6f30e 100644
--- a/js/builder.es6.js
+++ b/js/builder.es6.js
@@ -9,7 +9,7 @@
* The settings object.
*/
function attachUiElements($container, settings) {
- const { id } = $container[0];
+ const id = $container.attr('data-lpb-ui-id');
const lpbBuilderSettings = settings.lpBuilder || {};
const uiElements = lpbBuilderSettings.uiElements || {};
const containerUiElements = uiElements[id] || [];
@@ -208,7 +208,7 @@
'<div class="lpb-shim"></div>',
);
}
- // Build a list of possible targets, or move destinatons.
+ // Build a list of possible targets, or move destinations.
const targets = $('.js-lpb-component, .lpb-shim', $element)
.toArray()
// Remove child components from possible targets.
diff --git a/js/builder.js b/js/builder.js
index ae47e6b343ff7e3c06bd4a03883ca3d136d77cfb..5a92836ab0802921069772158e762ea86ca6283e 100644
--- a/js/builder.js
+++ b/js/builder.js
@@ -9,7 +9,7 @@
(function ($, Drupal, debounce, dragula, once) {
var idAttr = 'data-lpb-id';
function attachUiElements($container, settings) {
- var id = $container[0].id;
+ var id = $container.attr('data-lpb-ui-id');
var lpbBuilderSettings = settings.lpBuilder || {};
var uiElements = lpbBuilderSettings.uiElements || {};
var containerUiElements = uiElements[id] || [];
diff --git a/src/Element/LayoutParagraphsBuilder.php b/src/Element/LayoutParagraphsBuilder.php
index 187530b10720022532b4bce99e18db4c6ca69123..61fae939b0545913a5014c9b428092daeaa1f968 100644
--- a/src/Element/LayoutParagraphsBuilder.php
+++ b/src/Element/LayoutParagraphsBuilder.php
@@ -2,24 +2,23 @@
namespace Drupal\layout_paragraphs\Element;
-use Drupal\Core\Entity\EntityTypeBundleInfoInterface;
-use Drupal\Core\Layout\LayoutPluginManagerInterface;
-use Drupal\Core\Render\RendererInterface;
-use Drupal\Core\Url;
-use Drupal\Core\Render\Markup;
-use Drupal\Component\Utility\Html;
use Drupal\Component\Serialization\Json;
-use Drupal\paragraphs\ParagraphInterface;
use Drupal\Core\Access\AccessResultAllowed;
-use Drupal\layout_paragraphs\Utility\Dialog;
use Drupal\Core\Access\AccessResultForbidden;
-use Drupal\Core\Render\Element\RenderElement;
+use Drupal\Core\Entity\EntityTypeBundleInfoInterface;
use Drupal\Core\Entity\EntityTypeManagerInterface;
-use Drupal\layout_paragraphs\LayoutParagraphsSection;
+use Drupal\Core\Layout\LayoutPluginManagerInterface;
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Drupal\Core\Render\Element\RenderElement;
+use Drupal\Core\Render\Markup;
+use Drupal\Core\Render\RendererInterface;
+use Drupal\Core\Url;
use Drupal\layout_paragraphs\LayoutParagraphsComponent;
-use Symfony\Component\DependencyInjection\ContainerInterface;
use Drupal\layout_paragraphs\LayoutParagraphsLayoutTempstoreRepository;
+use Drupal\layout_paragraphs\LayoutParagraphsSection;
+use Drupal\layout_paragraphs\Utility\Dialog;
+use Drupal\paragraphs\ParagraphInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
/**
* Defines a render element for building the Layout Builder UI.
@@ -177,7 +176,7 @@ class LayoutParagraphsBuilder extends RenderElement implements ContainerFactoryP
}
}
- // If a element #uuid is provided, render the matching element.
+ // If an element #uuid is provided, render the matching element.
// This is used in cases where a single component needs
// to be rendered - for example, as part of an AJAX response.
if ($element_uuid) {
@@ -193,7 +192,7 @@ class LayoutParagraphsBuilder extends RenderElement implements ContainerFactoryP
'lp-builder',
'lp-builder-' . $this->layoutParagraphsLayout->id(),
],
- 'id' => Html::getUniqueId($this->layoutParagraphsLayout->id()),
+ 'data-lpb-ui-id' => $this->layoutParagraphsLayout->id(),
'data-lpb-id' => $this->layoutParagraphsLayout->id(),
] + ($element['#attributes'] ?? []);
$element['#attached']['library'] = ['layout_paragraphs/builder'];
@@ -248,9 +247,8 @@ class LayoutParagraphsBuilder extends RenderElement implements ContainerFactoryP
];
$build['#attributes']['data-uuid'] = $entity->uuid();
$build['#attributes']['data-type'] = $entity->bundle();
- $build['#attributes']['data-id'] = $entity->id();
+ $build['#attributes']['data-lpb-ui-id'] = $entity->uuid() ?? 'new-' . $entity->bundle();
$build['#attributes']['class'][] = 'js-lpb-component';
- $build['#attributes']['id'] = Html::getUniqueId($entity->id() ?? 'new-' . $entity->bundle());
$build['#layout_paragraphs_component'] = TRUE;
if ($entity->isNew()) {
$build['#attributes']['class'][] = 'is_new';
@@ -340,7 +338,7 @@ class LayoutParagraphsBuilder extends RenderElement implements ContainerFactoryP
],
'data-region' => $region_name,
'data-region-uuid' => $entity->uuid() . '-' . $region_name,
- 'id' => Html::getUniqueId($entity->uuid() . '-' . $region_name),
+ 'data-lpb-ui-id' => $entity->uuid() . '-' . $region_name,
],
];
if ($this->createAccess() && $this->checkCardinality()) {
@@ -397,7 +395,7 @@ class LayoutParagraphsBuilder extends RenderElement implements ContainerFactoryP
* @param array[] $route_params
* The route parameters for the link.
* @param array[] $query_params
- * The query paramaters for the link.
+ * The query parameters for the link.
* @param int $weight
* The weight of the button element.
* @param array[] $classes
@@ -558,7 +556,7 @@ class LayoutParagraphsBuilder extends RenderElement implements ContainerFactoryP
* @see https://www.drupal.org/project/paragraphs_asymmetric_translation_widgets
*
* @return bool
- * True if asymmetric tranlation is supported.
+ * True if asymmetric translation is supported.
*/
protected function supportsAsymmetricTranslations() {
return $this->layoutParagraphsLayout->getParagraphsReferenceField()->getFieldDefinition()->isTranslatable();
@@ -582,7 +580,7 @@ class LayoutParagraphsBuilder extends RenderElement implements ContainerFactoryP
* The javascript method to use to attach $element to its container.
*/
public function addJsUiElement(array &$build, Markup $element, string $key, string $method = 'append') {
- $id = $build['#attributes']['id'];
+ $id = $build['#attributes']['data-lpb-ui-id'];
$build['#attributes']['data-has-js-ui-element'] = TRUE;
$build['#attached']['drupalSettings']['lpBuilder']['uiElements'][$id][$key] = [
'element' => $element,
@@ -607,7 +605,7 @@ class LayoutParagraphsBuilder extends RenderElement implements ContainerFactoryP
* Checks if adding a component would exceed the field's cardinality limit.
*
* @return bool
- * True if a compoment can be added without exceeding cardinality.
+ * True if a component can be added without exceeding cardinality.
*/
protected function checkCardinality() {
$cardinality = $this->getCardinality();
diff --git a/tests/src/FunctionalJavascript/BuilderTest.php b/tests/src/FunctionalJavascript/BuilderTest.php
index 7be3e8c8d6e6d6acc224a0a8d26bdfd4d45a0d7c..2c589972ac1084eab445bf47cff744af77bbbd7e 100644
--- a/tests/src/FunctionalJavascript/BuilderTest.php
+++ b/tests/src/FunctionalJavascript/BuilderTest.php
@@ -141,7 +141,7 @@ class BuilderTest extends BuilderTestBase {
$this->drupalGet($this->contentEditUrl);
$page = $this->getSession()->getPage();
- $this->addTextComponent('Second text item.', '[data-id="2"] .lpb-btn--add.after');
+ $this->addTextComponent('Second text item.', '[data-type="text"] .lpb-btn--add.after');
$this->assertOrderOfStrings(['Some arbitrary text', 'Second text item.'], 'Second item was not correctly added after the first.');
// Click the new item's move up button.