Overview
Extracted from #3512385-5: Changes to code components are not visible in global regions until published:
⚠️ AFAICT this also affects the component preview upon hovering the list of available components:
Proposed resolution
- Always call
ComponentSourceInterface::renderComponent()withisPreview: TRUEinComponentSourceInterface::getClientSideInfo()
diff --git a/src/Plugin/ExperienceBuilder/ComponentSource/BlockComponent.php b/src/Plugin/ExperienceBuilder/ComponentSource/BlockComponent.php index 4fbac989c..adb573f8d 100644 --- a/src/Plugin/ExperienceBuilder/ComponentSource/BlockComponent.php +++ b/src/Plugin/ExperienceBuilder/ComponentSource/BlockComponent.php @@ -302,7 +302,7 @@ final class BlockComponent extends ComponentSourceBase implements ContainerFacto return ['build' => []]; } - return ['build' => $this->renderComponent([], $component->uuid())]; + return ['build' => $this->renderComponent([], $component->uuid(), TRUE)]; } /** diff --git a/src/Plugin/ExperienceBuilder/ComponentSource/GeneratedFieldExplicitInputUxComponentSourceBase.php b/src/Plugin/ExperienceBuilder/ComponentSource/GeneratedFieldExplicitInputUxComponentSourceBase.php index c55528b5b..39653166a 100644 --- a/src/Plugin/ExperienceBuilder/ComponentSource/GeneratedFieldExplicitInputUxComponentSourceBase.php +++ b/src/Plugin/ExperienceBuilder/ComponentSource/GeneratedFieldExplicitInputUxComponentSourceBase.php @@ -603,7 +603,7 @@ abstract class GeneratedFieldExplicitInputUxComponentSourceBase extends Componen return [ 'source' => (string) $this->getSourceLabel(), - 'build' => $this->renderComponent([self::EXPLICIT_INPUT_NAME => $default_props_for_default_markup], $component->uuid()), + 'build' => $this->renderComponent([self::EXPLICIT_INPUT_NAME => $default_props_for_default_markup], $component->uuid(), TRUE), // Additional data only needed for SDCs. // @todo UI does not use any other metadata - should `slots` move to top level? 'metadata' => ['slots' => $this->getSlotDefinitions()], - Ensure that any auto-save change is immediately reflected in the hovering, i.e. ensure the necessary client-side (and server-side) cache invalidation happens. The test coverage being added in #3518832: ComponentSource robustness: add `ComponentSourceTestBase::testGetClientSideInfo()` should make it relatively straightforward to test this in
JsComponentTest.
User interface changes
Component hover (instantaneously, aka without refreshing) shows the auto-saved (draft) version of a code component.Changes to code components are not visible in global regions until published
Issue fork experience_builder-3516705
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 leersComment #3
wim leersComment #4
wim leersComment #5
wim leersThis is now trivial to add test coverage for thanks to #3518832: ComponentSource robustness: add `ComponentSourceTestBase::testGetClientSideInfo()`. All we'd need to do is:
ComponentSourceTestBase::testGetClientSideInfo()inJsComponentTestto create a draft component for one of the tested code componentsComment #6
wim leers#5.1 is conceptually super similar to #3520052: Auto-saved changes to component are not loaded in preview canvas when component is inside a slot — chances are you can copy/paste some code, or, better yet, extract it into a trait for testing purposes! 😄
Comment #7
wim leersComment #8
hooroomooJust an FYI, if you see that the hovered preview doesn't render anything when you FIRST add a JS component to your library, it's because a regression was introduced yesterday #3521819: Hovered preview for JS components in library not working anymore.
Comment #11
thoward216 commentedComment #12
sanket.tale commentedI reviewed the proposed solution and merge request, and it looks good overall. However, the pipeline is still failing. I tried to solve it, but couldn't resolve the issue. I believe the failure is due to the image (600x400.png) unexpectedly being found in the iframe and the client.js script not loading correctly. Please check the image logic and ensure the script loads properly during testing.
Comment #13
wim leersYep, genuine test failure:
So I'm confused about why this was marked ? 🤔
Comment #14
tedbowThis makes the problem in #3521843: JS component slots and props don't appear in the preview canvas until published worse because since it no longer showed the saved config compiled js for hovering and since auto-save doesn't work either there is no preview on hover
Comment #15
thoward216 commented@tedbow re #14 - are you saying that #3521843: JS component slots and props don't appear in the preview canvas until published is the root cause of the failing test here? And that issue should be resolved first?
Comment #16
tedbow@thoward216 nope I assume this should be able to be fixed here. Just related to the other problem. in manual testing of this MR I do see it fixing the problem of hover preview not being updated
Comment #17
thoward216 commentedTests are now passing.
Comment #19
wim leersComment #21
wim leersComment #22
mayur-sose commentedIssue 1: Preview not updating after modifying component properties
bg-blue-200.Issue 2: Inconsistent updates after drag-drop and publish
bg-blue-500.bg-blue-200).Comment #23
lauriii@mayur-sose I can reproduce both issues. Could you file new issues for these? 🙏
Comment #24
mayur-sose commentedsure @lauriii
Comment #25
wim leers@mayur-sose and please leave a comment here linking to those 🙏
Comment #26
mayur-sose commentedCreated 2 issues:
Comment #27
wim leers