Default image is not loaded when adding a pattern

Let me check the issue.

I'm not sure if I understood the steps to reproduce.

Tried:

- Add a component with a video, set the video, create a pattern from it, add the pattern, video renders when adding the pattern.
- Add a component with an image that use a placeholder.co image, create a pattern from it, add the pattern, image renders with the default image.
- Add a component with an image, set an image, create a pattern from it, add the pattern, image renders with the given image.

However:
- Add two column component, with an image in each column, one set, the other using default.
- When trying to create pattern, I get a 422 "The property image is required."

(I'm always referring to SDCs, if that makes a difference)

Confirmed with Lauri this happens only when the image is optional (still with SDC).

Apparently happens because the re-render after refresh doesn't render the optional image in some cases? Verified by:

1. Add an "optional image" component (let's call this A). Image from A is visible.
2. Create a pattern from A.
3. Add the pattern to the canvas (let's call this component B). Image from A is visible. Image from B is NOT visible.
4. Set an image at component B, selecting it in the layers view. Image from B is visible as expected, image from A disappears 🤯🤯

Attached recording from Lauri.

Adding beta-blocker tag, since this is must have for Beta

This can be reproduced by just adding an image component with optional image to the page, and refreshing the page.

I'm convinced this ties into the areas I'm currently reviewing for ✨ Add a Video prop type to the Code Component editor Active . Specifically

      // Undo what ::clientModelToInput() did: restore the prop source of
      // valueless props.
      if ($model['source'][$prop_name]['sourceType'] === DefaultRelativeUrlPropSource::getSourceTypePrefix()) {
        $model['source'][$prop_name] = $this->getDefaultStaticPropSource($prop_name)
          ->withValue($model['source'][$prop_name]['value'])
          ->toArray();
      }

in \Drupal\experience_builder\Plugin\ExperienceBuilder\ComponentSource\GeneratedFieldExplicitInputUxComponentSourceBase::inputToClientModel(), added in 🐛 Image upload breaks after optional image without an image gets published Active , and

      catch (\OutOfRangeException | \OutOfBoundsException $e) {
        if (($violations === NULL ||
          (\array_key_exists('value', $prop_source) && $prop_source['value'] === $default_source_value)) &&
          !empty($prop_value)) {
          // Valueless prop, for the case where only a default is provided for
          // the preview or the initial state of the component inputs form, and
          // the content creator has not populated the StaticPropSource.
          // This typically happens when the Content Creator instantiates a
          // component with an optional image prop that has a default value, and
          // they then immediately save the result.
          // @see ::exampleValueRequiresEntity()
          // @see ::getClientSideInfo()
          $client_side_info = $this->getClientSideInfo($component);
          \assert(isset($client_side_info['propSources'][$prop]['jsonSchema']));
          $source = new DefaultRelativeUrlPropSource(
            value: $prop_value,
            jsonSchema: $client_side_info['propSources'][$prop]['jsonSchema'],
            componentId: $component->id(),
          );
          $props[$prop] = $source->toArray();
          continue;
        }

in \Drupal\experience_builder\Plugin\ExperienceBuilder\ComponentSource\GeneratedFieldExplicitInputUxComponentSourceBase::clientModelToInput()'s handling of DefaultRelativeUrlPropSource, added in 📌 Split model values into resolved and raw Active , refined in 🐛 Adding the Image component results in a state considered invalid Active and many subsequent issues, most recently in 📌 Improve the front-end DX of Active .

We've introduced something incomplete & brittle early on. We've been paying the price.

I don't see "examples" noted in this issue:

• Create a component that has an image with no default and examples and another property
• Drag the component into XB and the image shows up
• Change a property value on the component that's not the image
• The image disappears

Example using the new Drupal CMS Mercury theme:

https://youtu.be/9kySR9VOoB0?si=T_EgHi4uD_AXoP53&t=49

My testing shows ✨ Add a Video prop type to the Code Component editor Active resolves this

Postponing on that, but we'll need to expand e2e test coverage here once that's in.

Will add tests on top of ✨ Add a Video prop type to the Code Component editor Active

Pushed two commits, one is a squash of ✨ Add a Video prop type to the Code Component editor Active and the other is test coverage for this issue.

The test fails with ✨ Add a Video prop type to the Code Component editor Active (as expected) but passes with it 🎉

🥳

✨ Add a Video prop type to the Code Component editor Active is in — let's land this additional test coverage 👍