Overview

Currently components appear without styles because their assets are not loaded. Load assets when components / elements are being added to the page.

User interface changes

… or rather the absence of changes when removing inline styles:

CommentFileSizeAuthor
#12 Screenshot 2024-07-24 at 3.07.15 PM.png149.74 KBbnjmnm
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

lauriii created an issue. See original summary.

wim leers’s picture

Title: Load assets when components are added » Load assets inside preview <iframe> when components are added

Clarifying issue title.

wim leers’s picture

bnjmnm made their first commit to this issue’s fork.

bnjmnm’s picture

Issue tags: +Needs tests

The MR I pushed has this working - maybe there's a slicker way but this is what I figured out. It will need tests either way but I'm needed elsewhere for a bit so leaving this unassigned in case someone wants to add those.

wim leers’s picture

Assigned: Unassigned » jessebaker
Status: Active » Needs review

@jessebaker, didn't you intentionally use inline styles for the my-hero and my-section components in #3459992: Add some basic example SDCs? Objections to changing that?

jessebaker’s picture

I only used inline styles specifically because it wasn't yet possible to load in assets (JS/CSS) when adding a new component but I still wanted them to look nice. This work adds the ability to load in CSS so, yes, get rid of those in-line styles!

wim leers’s picture

YAY! 😄 I'd swear I read something you wrote along the lines of "component with inline styles to verify that works correctly, too" — but my memory must be fooling me then!

wim leers’s picture

Assigned: jessebaker » bnjmnm
Status: Needs review » Needs work

@bnjmnm Is this ready to be converted into an MR?

wim leers’s picture

Issue tags: +Needs screenshots

Yay, MR exists! 😄

bnjmnm’s picture

Status: Needs work » Needs review
StatusFileSize
new149.74 KB

Looks like this

It does look slightly different because the hero component intentionally had vh styling to confirm a specific fix for vh-in-iframe worked.

But! That fix only works on inline styles, which are no longer being used. An issue has been opened for that #3463610: VH units fix only works for inline styles, not for VH units used in CSS files
and in the meantime I prefer the less huge hero elements - easier to manually test things.

....

Also added an assertion in xb-general that confirms the SDC css loads in the iframe.

lauriii’s picture

bnjmnm’s picture

Assigned: bnjmnm » Unassigned
wim leers’s picture

Assigned: Unassigned » bnjmnm
Issue summary: View changes
Status: Needs review » Needs work
Issue tags: -Needs tests, -Needs screenshots

Looks great, just one question about what these "non-components" are 😅

Also: END-TO-END CYPRESS TEST!!!!!!! 🥳

wim leers’s picture

Assigned: bnjmnm » Unassigned
Status: Needs work » Reviewed & tested by the community
Related issues: +#3454519: [META] Support component types other than SDC, block, and code components

@bnjmnm clarified: "non-components" is currently only root (the client equivalent of \Drupal\experience_builder\Plugin\DataType\ComponentTreeStructure::ROOT_UUID on the server), but it may be non-SDC components once #3454519: [META] Support component types other than SDC, block, and code components lands. 👍

wim leers’s picture

Status: Reviewed & tested by the community » Fixed

  • Wim Leers committed a7536ec2 on 0.x authored by bnjmnm
    Issue #3462450 by bnjmnm, Wim Leers: Load assets inside preview...
wim leers’s picture

Status: Reviewed & tested by the community » Fixed

oh d.o 🤪

Status: Fixed » Closed (fixed)

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