Problem/Motivation
The VarbaseLayoutBuilderThemeNegotiator was not correctly identifying preview refresh scenarios for "Add section" operations and paragraphs form field updates, causing the Layout Builder preview to render using the admin theme instead of the frontend theme, resulting in broken component styling in the preview.
Steps to reproduce
- Navigate to any content page with Layout Builder enabled
- Click "Layout" to enter Layout Builder edit mode
- Click "Add section" to add a new section to the layout
- Configure the section settings and click "Add section" button
- Observe: The layout preview area renders using the admin theme styling instead of the frontend theme styling
- Components and blocks in the preview appear broken or unstyled because they are rendered with admin theme markup/CSS
Proposed resolution
Extend the $is_preview_refresh detection logic in VarbaseLayoutBuilderThemeNegotiator::determineActiveTheme() to include:
- "Add section" triggering value - Add 'Add section' to the list of triggering element values that indicate a preview refresh, alongside existing values like 'Update', 'Add block', and 'Save'.
- Block form field AJAX updates - Check if _triggering_element_name contains 'settings_block_form_field' to detect when paragraph form fields trigger AJAX updates, which should also refresh the preview with the frontend theme.
Remaining tasks
- ✅ File an issue about this project
- ✅ Addition/Change/Update/Fix to this project
- ✅ Testing to ensure no regression
- ➖ Automated unit/functional testing coverage
- ➖ Developer Documentation support on feature change/addition
- ➖ User Guide Documentation support on feature change/addition
- ✅ UX/UI designer responsibilities
- ✅ Accessibility and Readability
- ✅ Code review from 1 Varbase core team member
- ✅ Full testing and approval
- ✅ Credit contributors
- ✅ Review with the product owner
- ✅ Update Release Notes and Update Helper on new feature change/addition
- ❌ Release varbase-10.1.1, varbase_layout_builder-10.2.1, varbase-10.0.9, varbase_layout_builder-10.1.20
Varbase update type
- ✅ No Update
- ➖ Optional Update
- ➖ Forced Update
- ➖ Forced Update if Unchanged
User interface changes
- N/A
API changes
- N/A
Data model changes
- N/A
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | 3564723-2.patch | 1.86 KB | n.ghunaim |
Issue fork varbase_layout_builder-3564723
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
n.ghunaim commentedComment #4
n.ghunaim commentedComment #7
rajab natshahComment #8
rajab natshahComment #9
rajab natshahComment #11
rajab natshah✅ Released varbase_layout_builder-10.1.20
Comment #12
rajab natshah✅ Released varbase_layout_builder-10.2.1
Comment #13
rajab natshah✅ Released varbase-10.0.9