Bug when using a Drupal Block which also contains paragraph field

Created on 30 April 2023, over 1 year ago

Problem/Motivation

I am trying to create a good authoring experience on my website. For reusable content (components) I have chosen blocks. I am using the "Drupal Block" paragraph type provided by bootstrap_paragraphs which has an entity reference field to Blocks.

In my setup Articles have a Paragraphs reference field that uses the Layout Paragraph widget and requires paragraphs to be placed inside Layouts.
The same set up exists in a custom block type (Paragraph Block): a Paragraphs field that uses the Layout Paragraph widget and requires paragraphs to be placed inside Layouts.

The idea is to place Drupal Block paragraphs inside the nodes' paragraph fields, however the bug can be demonstrated with a simpler setup.

Steps to reproduce

1. Create a "Paragraph Block" instance with a section (e.g two columns) and one or more paragraphs inside that section
2. Save the block
3. Place the block in any region and you will see two different bugs depending on which branch of layout_paragraphs you are on
(4. Alternatively reference the block via your node's paragraph field)

On both branches there are issues with how the nested paragraphs (section > children) are processed.

On 1.x you will see that the section paragraph's <div> does not wrap around the inner paragraphs.
Instead they are somehow on the same level causing issues with the HTML structure. Simplified it looks like this:

<div block>
  <div field>
    <div section>empty</div>
    <div paragraph_1>content_1</div>
    <div paragraph_2>content_2</div>
  </div>
</div>

Attaching screenshot of this in brand new installation. I started with 2.x and downgraded on 1.x to see if the behaviour is replicable:

On 1.x I tackle this with CSS for the time being (display:none on the section div) until we can get to the bottom of this but this is far from ideal and essentially defeats the notion of using a layout as I have to fix everything with CSS manually.
An option is not to use layouts in blocks, just non-section paragraphs, but again that defeats the goal of having reusable components that leverage Layouts.

On 2.x the section is rendered correctly with the children paragraphs correctly nested, however the children get rendered a second time, again on the same level as the section:

<div block>
  <div field>
    <div section>
      <div paragraph_1>content_1</div>
      <div paragraph_2>content_2</div>
    </div>
    <div paragraph_1>content_1</div>
    <div paragraph_2>content_2</div>
  </div>
</div>

Attaching screenshot of this in brand new Drupal installation:

This does not happen if there is no Layout paragraph in the block but as stated the goal is to use Layouts in blocks to create reusable components.

This also does not happen with other paragraph types referenced from entity_reference_revisions (paragraphs) fields in nodes or users, only in blocks.

What I would like to see is:

<div block>
  <div field>
    <div section>
      <div paragraph_1>content_1</div>
      <div paragraph_2>content_2</div>
    </div>
  </div>
</div>
🐛 Bug report
Status

Closed: works as designed

Version

2.0

Component

Code

Created by

🇬🇷Greece magtak

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

Comments & Activities

Production build 0.71.5 2024