experience_builder.module

@@ -449,6 +449,34 @@ function experience_builder_field_widget_complete_form_alter(array &$field_widge
     }
   }
   if (isset($context['form']['#parents']) && array_search('xb_component_props', $context["form"]["#parents"]) !== FALSE) {
+    // Inform the client side of the current values in the field widget. Do not
+    // provide the raw values, but the *resolved* values as this component prop
+    // indicates it needs.
+    // 1. Retrieve the StaticPropSource that this widget was generated for.
+    // @see \Drupal\experience_builder\Form\ComponentPropsForm::buildForm()
+    if (!$form_state->has('xb_current_static_prop_source')) {
+      throw new \LogicException('Should be impossible.');
+    }
+    $source = $form_state->get('xb_current_static_prop_source');
+    // 2. Massage the form values (this runs widget-specific logic), which will
+    //    result in an updated StaticPropSource.
+    // @todo Uncomment the commented out code snippet below. It originates from TwoTerribleTextAreasWidget and was deleted in #3467972. It WILL need to be adjusted.
+    /*
+    $updated_values = $source->minimizeValue($source->massageFormValuesTemporaryRemoveThisExclamationExclamationExclamation($field_widget_plugin_id, $edited_sdc_prop_name, $edited_sdc_prop_name, $chosen_source_prop_values, $form, $form_state));
+    // Store the selected source choice: update the sourceType + expression.
+    $props[$component_instance_uuid][$edited_sdc_prop_name]['sourceType'] = $source->getSourceType();
+    $props[$component_instance_uuid][$edited_sdc_prop_name]['expression'] = (string) $source->asChoice();
+    // Store updated field property values for the `static:field_item:…`.
+    if (str_starts_with($props[$component_instance_uuid][$edited_sdc_prop_name]['sourceType'], 'static:field_item:')) {
+      $props[$component_instance_uuid][$edited_sdc_prop_name]['value'] = $updated_values;
+    }
+    */
+    // 3. Now evaluate the updated StaticPropSource using the expression it
+    //    contains; the result will be exactly the PropShape that the SDC
+    //    specified in its JSON schema. This is what the client can consume and
+    //    pass to `/api/preview/…`!
+    $field_widget_complete_form['#attributes']['data-xb-resolved-prop-values'] = $source->evaluate($context['items']->getEntity());
+
     RenderArrayXB::markXB($field_widget_complete_form);
     if ($context['widget']->getPluginId() === 'media_library_widget') {
       $config = \Drupal::service('config.factory')->getEditable('system.performance');
@@ -493,48 +521,6 @@ function experience_builder_field_widget_single_element_media_library_widget_for
   );
 }
 
-/**
- * Implements hook_preprocess_media_library_item__widget().
- *
- * Retrieves the typed data contained by the selected Media entity (if it uses
- * an `image` media source), and makes it available to the XB UI as a
- * `data-media-file` attribute.
- *
- * @see media_library_storage_prop_shape_alter()
- * @todo Revisit in https://www.drupal.org/project/experience_builder/issues/3463842
- */
-function experience_builder_preprocess_media_library_item__widget(array &$variables): void {
-  $media_id = $variables['element']['remove_button']['#media_id'] ?? NULL;
-  $string_split = 'media-library-remove-button-';
-  $offset = strpos($variables['element']['remove_button']['#name'], $string_split) + strlen($string_split);
-  $associated_field_name = substr($variables['element']['remove_button']['#name'], $offset);
-  $variables['content']['remove_button']['#attributes']['data-media-field-name'] = $associated_field_name;
-  if ($media_id) {
-    $media = Media::load($media_id);
-    if (is_null($media)) {
-      return;
-    }
-    $field = $media->get('field_media_' . $media->bundle());
-    $fid = $field->getValue()[0]['target_id'];
-    $media_file = File::load($fid);
-    $value = $field->getValue()[0];
-    if (is_null($media_file) || is_null($value)) {
-      return;
-    }
-    // For now, this only supports image media.
-    // @see media_library_storage_prop_shape_alter()
-    if ($media->bundle() !== 'image') {
-      return;
-    }
-    $prepared = array_intersect_key([
-      ...$value,
-      'src' => $media_file->getFileUri(),
-    ], ['src' => '', 'alt' => '', 'width' => '', 'height' => '']);
-
-    $variables["content"]["remove_button"]["#attributes"]['data-media-file'] = Json::encode($prepared);
-  }
-}
-
 /**
  * Implements hook_modules_installed().
  */

src/Form/ComponentPropsForm.php

@@ -90,7 +90,9 @@ final class ComponentPropsForm extends FormBase implements ContainerInjectionInt
         }
         assert(isset($component_plugin->metadata->schema['properties'][$sdc_prop_name]['title']));
         $label = $component_plugin->metadata->schema['properties'][$sdc_prop_name]['title'];
+        $form_state->set('xb_current_static_prop_source', $source);
         $form[$sdc_prop_name] = $source->formTemporaryRemoveThisExclamationExclamationExclamation($field_widget_plugin_id, $component_instance_uuid, $sdc_prop_name, $label, $entity, $form, $form_state);
+        $form_state->set('xb_current_static_prop_source', NULL);
       }
       // @todo Design is undefined for the DynamicPropSource UX. Related: https://www.drupal.org/project/experience_builder/issues/3459234
       // @todo Design is undefined for the AdaptedPropSource UX.

ui/src/components/form/inputBehaviors.tsx

@@ -56,37 +56,17 @@ const InputBehaviors = (OriginalInput: React.FC) => {
       );
     };
 
-    // Include the input's default value in the form state on init - including
-    // when an element is added via AJAX.
     useEffect(() => {
-      const isMediaPreview =
-        attributes['data-media-file'] && attributes['data-media-field-name'];
-      if (isMediaPreview) {
-        // @todo this is assuming the media is an image. This will eventually
-        //  need to accommodate all media types.
-        // @see media_library_storage_prop_shape_alter()
-        // @see experience_builder_preprocess_media_library_item__widget()
-        const image = JSON.parse(attributes['data-media-file']);
-        image.width = Number(image.width);
-        image.height = Number(image.height);
-        dispatch(
-          updateNodeModel({
-            uuid: selectedComponent,
-            model: {
-              ...selectedModel,
-              image,
-            },
-          }),
-        );
-      } else if (attributes.name && setFormState) {
-        // Note that checkbox is cast to bool to match the server prop
-        // type requirements.
-        setFormState((prior: object) => ({
-          ...prior,
-          [attributes.name]:
-            attributes.type === 'checkbox' ? !!inputValue : inputValue,
-        }));
-      }
+      const ajaxUpdatedComponentPropValues = JSON.parse(attributes['data-xb-resolved-prop-values']);
+      dispatch(
+        updateNodeModel({
+          uuid: selectedComponent,
+          model: {
+            ...selectedModel,
+            ajaxUpdatedComponentPropValues,
+          },
+        }),
+      );
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);