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

  1. Include the CSS when rendering the preview thumbnails for the component library sidebar.
  2. Please ensure that the auto-saved version gets included, if exists.
  3. 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!

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

balintbrews created an issue. See original summary.

balintbrews’s picture

Title: Include compiled CSS from global asset library when displaying component library preview thumbnails » [PP-1] Include compiled CSS from global asset library when displaying component library preview thumbnails
Issue summary: View changes
Status: Active » Postponed

Now 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.

wim leers’s picture

+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:

diff --git a/src/Plugin/ExperienceBuilder/ComponentSource/JsComponent.php b/src/Plugin/ExperienceBuilder/ComponentSource/JsComponent.php
index 92ce9e429..dca8d53cd 100644
--- a/src/Plugin/ExperienceBuilder/ComponentSource/JsComponent.php
+++ b/src/Plugin/ExperienceBuilder/ComponentSource/JsComponent.php
@@ -16,6 +16,7 @@ use Drupal\experience_builder\AutoSave\AutoSaveManager;
 use Drupal\experience_builder\AutoSaveData;
 use Drupal\experience_builder\ComponentDoesNotMeetRequirementsException;
 use Drupal\experience_builder\ComponentMetadataRequirementsChecker;
+use Drupal\experience_builder\Entity\AssetLibrary;
 use Drupal\experience_builder\Entity\Component as ComponentEntity;
 use Drupal\experience_builder\Entity\ComponentInterface;
 use Drupal\experience_builder\Entity\JavaScriptComponent;
@@ -167,8 +168,12 @@ final class JsComponent extends GeneratedFieldExplicitInputUxComponentSourceBase
       $component = $component->forAutoSavePreview($autoSave->data);
     }
     if ($isPreview) {
+      $build['#attached']['library'][] = 'experience_builder/asset_library.' . AssetLibrary::GLOBAL_ID . '.draft';
       $build['#cache']['tags'][] = AutoSaveManager::CACHE_TAG;
     }
+    else {
+      $build['#attached']['library'][] = 'experience_builder/asset_library.' . AssetLibrary::GLOBAL_ID;
+    }
 
     $valid_props = $component->getProps() ?? [];
 

wim leers’s picture

Component: Page builder » Component sources
Assigned: Unassigned » balintbrews
Status: Postponed » Needs review
Issue tags: +Needs tests

Could you give this a try? 😇

balintbrews’s picture

Assigned: balintbrews » tedbow

It works! 🙂 Assigning to Ted for code review.

wim leers’s picture

Title: [PP-1] Include compiled CSS from global asset library when displaying component library preview thumbnails » Include compiled CSS from global asset library when displaying component library preview thumbnails
Assigned: tedbow » wim leers
Status: Needs review » Needs work

Still needs tests.

wim leers’s picture

Assigned: wim leers » Unassigned
Status: Needs work » Reviewed & tested by the community
Issue tags: -Needs tests
Parent issue: » #3520484: [META] Production-ready ComponentSource plugins

The changes here are trivial. So, self-RTBC'ing, given @balintbrews' confirmation that it works as expected :)

wim leers’s picture

Status: Reviewed & tested by the community » Fixed

  • wim leers committed 0383fe2b on 0.x
    Issue #3525374 by wim leers, balintbrews: Include compiled CSS from...
wim leers’s picture

.

(d.o issue status rendering is wrong due to #9 and #10 racing)

Status: Fixed » Closed (fixed)

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