Layout Paragraphs Builder incompatible with paragraphs with assigned Ids

Created on 16 February 2023, almost 2 years ago
Updated 11 September 2024, 2 months ago

Problem/Motivation

The layout paragraphs IPE adds/relies on IDs at the paragraph level. This is incompatible with IDs assigned for things like anchor links.

Steps to reproduce

Add an ID to a paragraph, for example:

function hook_preprocess_paragraph(&$variables) {
  $variables['attributes']['id'] = 'paragraph-' . $variables['paragraph']->id();
}

Then attempt to use the layout paragraphs builder. The controls will generate a JS error.

Proposed resolution

Update the layout paragraph builder to not conflict with existing IDs on paragraphs.

πŸ› Bug report
Status

Needs work

Version

2.0

Component

User interface

Created by

πŸ‡ΊπŸ‡ΈUnited States orbmantell

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @orbmantell
  • Status changed to Needs work almost 2 years ago
  • πŸ‡ΊπŸ‡ΈUnited States justin2pin
  • πŸ‡ΊπŸ‡ΈUnited States keiserjb

    Trying to use Layout Paragraphs on a D10 site.

    Installed the Bootstrap Paragraphs module and was experimenting. When I got to the Callout paragraph type I discovered I could not edit them after creating them. I looked in the template and sure enough, and ID was assigned to each Callout. I removed

    {# Sets Unique ID for Accordion from Paragraph ID. #}
    {% set paragraph_id = 'callout-' ~ paragraph.id.value %}
    
    {# Prints Callout template. #}
    <div{{ attributes.addClass(classes).setAttribute('id', paragraph_id) }}>

    from the template and I can edit them now. I think accordions and tabs will not work because of the same issue.

  • πŸ‡ΊπŸ‡ΈUnited States keiserjb

    Hmm, after patching the accordions to make them work with Bootstrap 5 I can still edit them using Layout Paragraphs. They have IDs. More investigation needed.

  • Just wanted to confirm that this is an issue for me too.

    On our site, we have a field that lets the user assign an id to our Section Paragraph. On sections on which this field has a value, we lose the edit controls (they're not just hidden β€” they aren't even in the markup) while others without a value in the id field are still editable. When I remove the id from our Section markup, the controls return. Once I do that, I can clear out the value from the id field and save the page, replace the id in our markup, reload the page, and the controls are still there for that particular Section.

Production build 0.71.5 2024