block__content div is omitted from preview when "Use Experience Builder for page templates in this theme." is enabled

Created on 22 May 2025, 3 months ago

Overview

In Olivero, when the user checks the "Use Experience Builder for page templates in this theme." in the theme settings the page markup is changed:

⬜️ Use Experience Builder for page templates in this theme not enabled:

<main role="main">
    <div class="region region--content grid-full layout--pass--content-medium" id="content">
        <div class="block block-system block-system-main-block" id="block-olivero-content">
            <div class="block__content">

            </div>
        </div>
    </div>
</main>

☑️ Use Experience Builder for page templates in this theme enabled:

<main class="site-main" role="main">
    <div class="region region--content grid-full layout--pass--content-medium" id="content">

    </div>
</main>

This has many nuanced and fairly complex ramifications particularly around styling (in Olivero the CSS is written in such a way that it assumes/requires that the .block-system-main-block div sits inside the layout--pass--content-medium div for example).

Proposed resolution

User interface changes

🐛 Bug report
Status

Active

Version

0.0

Component

Page builder

Created by

🇬🇧United Kingdom jessebaker

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

Comments & Activities

  • Issue created by @jessebaker
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    I'm not sure I understand why/how yet, because
    \Drupal\experience_builder\Plugin\ExperienceBuilder\ComponentSource\BlockComponent::renderComponent() uses '#theme' => 'block'

    Related: 🐛 Placeholders/#lazy_builder is not supported for block component rendering Active + 🐛 Preview is not accurate for the site branding block Active .

    Needs debugging to determine the root cause. Thanks for the detailed bug report!

  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    D'oh — no, actually — I misinterpreted!

    This is actually similar to 🐛 Enabling XB for managing page template breaks Olivero header Active , and there's nothing we can do about this.

    The reason is essentially the same as #3505629-2: [upstream] Olivero's header works only correctly when using the "block" page variant :

    • Drupal core's BlockPageVariant renders the contents of block plugins with an extra wrapper: that's what block.html.twig is about, and that's where <div class="block__content"> is coming from
    • XB is rendering all block plugins as-is, without adding more wrappers.

    We could avoid this by doing something like core's \Drupal\block\BlockViewBuilder::preRender(), which is the "view builder" for the Block config entity type (which is IRRELEVANT/NON-EXISTENT when using XB!) that is responsible for this, see:

          // Place the $content returned by the block plugin into a 'content' child
          // element, as a way to allow the plugin to have complete control of its
          // properties and rendering (for instance, its own #theme) without
          // conflicting with the properties used above, or alternate ones used by
          // alternate block rendering approaches in contrib (for instance, Panels).
          // However, the use of a child element is an implementation detail of this
          // particular block rendering approach. Semantically, the content returned
          // by the plugin "is the" block, and in particular, #attributes and
          // #contextual_links is information about the *entire* block. Therefore,
          // we must move these properties from $content and merge them into the
          // top-level element.
    
  • 🇫🇮Finland lauriii Finland

    I do think we should mimic the block rendering from \Drupal\block\BlockViewBuilder so that same CSS that works outside of XB works when using blocks in XB. Ideally we should do this before stable but I don't think this needs to block the stable release. Worst case we'd document this in known issues.

Production build 0.71.5 2024