Overview

Follow-up for #3462636: Preview component when selecting in left sidebar.

I modified my-hero.css to add a style at the top.

button {
  box-shadow: 4px 4px hotpink;
}

(then run drush cr)

Now when I hover over the Hero component in the left hand menu, the styles are loaded in but they affect the whole page.

Proposed resolution

Wrap the preview in either ShadowDom or an iFrame (iFrame might introduce issues with the way the preview is scaled)

CommentFileSizeAuthor
#8 ezgif-3-a0fafaab54.gif248.63 KBgauravvvv
2024-08-06 14.01.49.gif176.31 KBjessebaker

Issue fork experience_builder-3466303

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:

About issue forks

Comments

jessebaker created an issue. See original summary.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Assigned: Unassigned » jessebaker

iFrame might introduce issues with the way the preview is scaled

Why can we not reproduce the same there? 🤔 I am fairly certain that is possible because of the work I did a decade ago on https://drupal.org/project/responsive_preview

jessebaker’s picture

jessebaker commented

It's certainly not impossible to do with an iFrame but there will be challenges around rendering the iFrame at the correct size (the same size as the content) and then scaling it smaller (you can't simply show a small iFrame because then any mobile width media queries will take effect and the preview will show the mobile styling). There may also be issues with the speed at which the content can render inside an iFrame, even if you use srcdoc).

Shadowdom might just be easier - but I'm less familiar with it so it may have unforeseen limitations too.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Assigned: jessebaker » Unassigned
Issue summary: View changes
Related issues: +#3462636: Preview component when selecting in left sidebar

Ahhh, gotcha! 👍 Thanks for providing that additional context 😊

gauravvvv’s picture

gauravvvv commented
Assigned: Unassigned » gauravvvv
utkarsh_33’s picture

utkarsh_33 commented
Assigned: gauravvvv » utkarsh_33

Assigning it to me as there is no update till now on this.

Gauravvvv opened merge request !158

gauravvvv’s picture

gauravvvv commented
Assigned: utkarsh_33 » gauravvvv
Status: Active » Needs work
StatusFileSize
new ezgif-3-a0fafaab54.gif248.63 KB

Tests are failing, working on them.
Here is the after MR screen recording:
Only local images are allowed.

utkarsh_33’s picture

utkarsh_33 commented
Assigned: gauravvvv » Unassigned
Status: Needs work » Needs review

I have fixed the tests.It's up for a review.As i was also working on the same issue so i thought i could fix the tests.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Assigned: Unassigned » utkarsh_33
Status: Needs review » Needs work
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Parent issue: » #3450592: [META] Front-end Kanban issue tracker
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: Component previews in left menu don't have style encapsulation » Follow-up for #3462636: component previews in left menu don't have style encapsulation
utkarsh_33’s picture

utkarsh_33 commented
Status: Needs work » Needs review
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Assigned: utkarsh_33 » jessebaker

jessebaker’s picture

jessebaker commented
Assigned: jessebaker » Unassigned
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

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