[PP-1] Handle components instances rendering nothing: wrap them in a container

More context: #3509608-54: Unable to save an optional image with its default value (because it does not correspond to a Media entity): allow saving DefaultRelativeUrlPropSource.

When we are previewing a component that does not contain any HTML tags, detect this special situation and wrap them in a container, so they can still be previewed and manipulated correctly by the UI.

How do you propose doing that for code components?

Wouldn't Handle component instances that render to the empty string be more accurate?

I knew there were existing issues for this problem space already, but couldn't find them. Just stumbled upon one: #3497990: [later phase] Support Block's PreviewAwarePluginInterface (and similar for other component sources).

That's basically the same problem:

1. Depending on explicit input ("settings" for block plugins, "props" for SDCs), the block may result in an empty render array to render:
   

       $content = $block->build();
       if (Element::isEmpty($content)) {
         $content['#access'] = $access;
         return $content;
       }
   

   — \Drupal\experience_builder\Plugin\ExperienceBuilder\ComponentSource\BlockComponent::renderComponent()

2. Core has a solution for this: PreviewAwarePluginInterface, but nothing in core actually uses this to render an alternative representation; only Layout Builder does it in a heavy-handed way:
   

         if ($event->inPreview()) {
           if ($block instanceof PreviewFallbackInterface) {
             $preview_fallback_string = $block->getPreviewFallbackString();
           }
           else {
             $preview_fallback_string = $this->t('"@block" block', ['@block' => $block->label()]);
           }
           // @todo Use new label methods so
           //   data-layout-content-preview-placeholder-label doesn't have to use
           //   preview fallback in https://www.drupal.org/node/2025649.
           $build['#attributes']['data-layout-content-preview-placeholder-label'] = $preview_fallback_string;
   
           if ($is_content_empty && $is_placeholder_ready) {
             $build['content']['#markup'] = $this->t('Placeholder for the @preview_fallback', ['@preview_fallback' => $block->getPreviewFallbackString()]);
           }
         }
   

… we could use the same strategy, but wrap that string in a wrapper.

Thoughts? And … should we just merge this into #3497990: [later phase] Support Block's PreviewAwarePluginInterface (and similar for other component sources)? 😅

Reopening per @lauriii at #3497990-18: [later phase] Support Block's PreviewAwarePluginInterface (and similar for other component sources).

Thanks to #3518832: ComponentSource robustness: add `ComponentSourceTestBase::testGetClientSideInfo()`, the sdc.xb_test_sdc.image-optional-without-example test case (added by #3507641: Allow components containing non-required images and no examples to be placed) for \Drupal\Tests\experience_builder\Kernel\Plugin\ExperienceBuilder\ComponentSource\ComponentSourceTestBase::testGetClientSideInfo() already provides an empty string example.

We of course only want to do this when rendering a component for XB previewing purposes (so: ComponentSourceInterface::renderComponent(isPreview: TRUE)). Which means the following are closely related — until they're both in, we'll need to be careful with the test coverage:

1. #3516705: Auto-saved changes to code components are not visible in preview-on-hover-component-list until published
2. #3499352: SDCs should only have get HTML comments injected when `renderComponent(isPreview: TRUE)`

(Because the test coverage that #3518832 added is still expecting the component previews to be rendered with isPreview: FALSE, which #3518832 is fixing/changing 👍)

Making what @lauriii proposed more explicit.

… thinking of this some more, should we use a similar strategy here as for #3485878: Server-rendered component instances should NEVER result in a user-facing error, should fall back to a meaningful error instead (+ log)? 😇

Would there be a way for us to only add the wrapper if a component doesn't render anything or renders a text node?

If we go as far as #3485878: Server-rendered component instances should NEVER result in a user-facing error, should fall back to a meaningful error instead (+ log): possibly.

But my fear is that Block plugins' highly optimized rendering (which XB currently does not yet support — #3518656: Add Dynamic Page Cache and BigPipe support: `block` ComponentSource does not use placeholders/#lazy_builder is fixing that) will prevent us from doing this.

In fact, I think #3518656: Add Dynamic Page Cache and BigPipe support: `block` ComponentSource does not use placeholders/#lazy_builder should be a blocker to this; otherwise we can't guarantee that this is implemented correctly/completely the first time.

#3518656: Add Dynamic Page Cache and BigPipe support: `block` ComponentSource does not use placeholders/#lazy_builder is unblocked, so this is now less blocked.

Oops.