Overview
After landing #3516390: Compile Tailwind CSS globally for code components, we make use of the compiled CSS saved in the global asset library. The preview thumbnails for the component library sidebar needs to include this CSS.
Proposed resolution
- Include the CSS when rendering the preview thumbnails for the component library sidebar.
- Please ensure that the auto-saved version gets included, if exists.
- Be aware of #3523130: Auto-saved code component changes are not reflected in content preview and component library preview thumbnail. It is a different issue. See comment #11 which suggest to test that issue without involving anything from the global CSS.
User interface changes
Code components are displayed with their CSS in the preview thumbnails for the component library sidebar. An easy way to test the success of this issue is to create a new code component, don't change anything, simply add it to the components, then look at its preview thumbnail in the library. If the component shows up with yellow background we made it!
Issue fork experience_builder-3525374
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
balintbrewsNow that #3523130: Auto-saved code component changes are not reflected in content preview and component library preview thumbnail is straightforward to land, let's do that first, so we don't get confused by the problem that issue fixes.
Comment #3
wim leers+1 — the reason we didn't do this originally is because the global asset library functionality was not yet implemented in February — it was just "compiled into" each individual code component's CSS.
This will require
\Drupal\experience_builder\Hook\ComponentSourceHooks::pageAttachments()-like behavior but within each code component's asset library, and taking into account draft-or-not. Thanks to #3508922: Regression after #3500386: import map scope mismatch when previewed code component's JS is a 307 due to it not having an auto-save/draft, that should be trivial to achieve.It's too late for me to test this in detail and to think through everything, but I think this is enough:
Comment #5
wim leersCould you give this a try? 😇
Comment #6
balintbrewsIt works! 🙂 Assigning to Ted for code review.
Comment #7
wim leersStill needs tests.
Comment #8
wim leersThe changes here are trivial. So, self-RTBC'ing, given @balintbrews' confirmation that it works as expected :)
Comment #9
wim leersComment #11
wim leers.
(d.o issue status rendering is wrong due to #9 and #10 racing)