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:

| Comment | File | Size | Author |
|---|---|---|---|
| #12 | Screenshot 2024-07-24 at 3.07.15 PM.png | 149.74 KB | bnjmnm |
Issue fork experience_builder-3462450
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
wim leersClarifying issue title.
Comment #3
wim leersUnassigning Ben because #3462441-6: Contextual form values need to be integrated with Redux: start with single-property field types is more important.
Comment #5
bnjmnmThe 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.
Comment #6
wim leers@jessebaker, didn't you intentionally use inline styles for the
my-heroandmy-sectioncomponents in #3459992: Add some basic example SDCs? Objections to changing that?Comment #7
jessebaker commentedI 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!
Comment #8
wim leersYAY! 😄 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!
Comment #9
wim leers@bnjmnm Is this ready to be converted into an MR?
Comment #11
wim leersYay, MR exists! 😄
Comment #12
bnjmnmLooks 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.
Comment #13
lauriiiComment #14
bnjmnmComment #15
wim leersLooks great, just one question about what these "non-components" are 😅
Also: END-TO-END CYPRESS TEST!!!!!!! 🥳
Comment #16
wim leers@bnjmnm clarified: "non-components" is currently only
root(the client equivalent of\Drupal\experience_builder\Plugin\DataType\ComponentTreeStructure::ROOT_UUIDon the server), but it may be non-SDC components once #3454519: [META] Support component types other than SDC, block, and code components lands. 👍Comment #17
wim leersComment #19
wim leersoh d.o 🤪