Olivero is hardcoded to work only using BlockPageVariant, causing it to break in Experience Builder

Created on 14 February 2025, about 2 months ago

Problem/Motivation

@lauriii reported over at πŸ› Enabling XB for managing page template breaks Olivero header Active that once you use Experience Builder's page template functionality, its (magnificent! 🀩 β€” love it on my own site πŸ˜„) menu functionality breaks down from

to this sad thing:

😭

My digging at #3505629-2: [upstream] Olivero's header works only correctly when using the "block" page variant β†’ surfaced

  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.

Steps to reproduce

  1. Install Experience Builder as described in its CONTRIBUTING.md.
  2. Navigate to /admin/appearance/settings/olivero and check the checkbox.
  3. Browse to the front page.

Proposed resolution

Make this Olivero functionality work without assuming markup generated by either BlockPageVariant, BlockViewBuilder or block.html.twig.

Conclusion

Olivero is heavily tightly coupled with the Block module. 😱

Remaining tasks

TBD

User interface changes

None.

Introduced terminology

None.

API changes

None.

Data model changes

None.

Release notes snippet

Olivero no longer assumes it will be used with the Block module.

✨ Feature request
Status

Active

Version

11.1 πŸ”₯

Component

Olivero theme

Created by

πŸ‡§πŸ‡ͺBelgium wim leers Ghent πŸ‡§πŸ‡ͺπŸ‡ͺπŸ‡Ί

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

Comments & Activities

Production build 0.71.5 2024