Enabling XB for managing page template breaks Olivero header

Added screenshot to show what it should look like instead.

I bet either:

• XB is messing up the markup somehow
• Olivero is expecting specific markup, including expectations of BlockPageVariant being used

The latter is easily confirmed:

  const searchWideButtonSelector =
    '[data-drupal-selector="block-search-wide-button"]';
  const searchWideButton = document.querySelector(searchWideButtonSelector);
  const searchWideWrapperSelector =
    '[data-drupal-selector="block-search-wide-wrapper"]';
  const searchWideWrapper = document.querySelector(searchWideWrapperSelector);

— core/themes/olivero/js/search.js

which is targeting markup literally only available in core/themes/olivero/templates/block/block--secondary-menu--plugin-id--search-form-block.html.twig 😅

And that Twig template is specifically targeting a Block config entity in the secondary_menu region with using the search_form_block plugin ID.

Conclusion

Olivero is heavily tightly coupled with the Block module. 😱

I don't see how this is possible to solve without either:

• hardening Olivero
• duplicating a lot of Olivero inside XB… 😱

This is what @lauriii indicated in DM.

Upstream issue created: ✨ Olivero is hardcoded to work only using BlockPageVariant, causing it to break in Experience Builder Active .

Related bug report by @jessebaker, but for a case where there's no Olivero JS that makes these assumptions: 🐛 block__content div is omitted from preview when "Use Experience Builder for page templates in this theme." is enabled Active .