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

  1. Navigate to any content page with Layout Builder enabled
  2. Click "Layout" to enter Layout Builder edit mode
  3. Click "Add section" to add a new section to the layout
  4. Configure the section settings and click "Add section" button
  5. Observe: The layout preview area renders using the admin theme styling instead of the frontend theme styling
  6. 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:

  1. "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'.
  2. 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

  • fix: #3564723 Layout Builder preview renders with admin theme instead of frontend theme after adding sections or updating paragraphs By: n.ghunaim
CommentFileSizeAuthor
#2 3564723-2.patch1.86 KBn.ghunaim
Command icon 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

n.ghunaim created an issue. See original summary.

n.ghunaim’s picture

StatusFileSize
new1.86 KB

n.ghunaim’s picture

Status: Active » Needs review

rajab natshah’s picture

rajab natshah’s picture

Assigned: josebc » Unassigned
rajab natshah’s picture

Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes

✅ Released varbase-10.0.9

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.