feat: add item sources and per-image links to Photo Gallery

packages/visual-editor/src/components/migrations/0083_photo_gallery_item_source.ts

@@ -0,0 +1,68 @@
+import { type Migration } from "../../utils/migrate.ts";
+
+/**
+ * Gallery item-source migration.
+ *
+ * 1. Moves each saved manual image into an image and link item.
+ * 2. Keeps the linked list field and maps each image item to itself.
+ * 3. Leaves Gallery styles and section slots unchanged.
+ */
+export const photoGalleryItemSource: Migration = {
+  PhotoGalleryWrapper: {
+    action: "updated",
+    propTransformation: (props) => {
+      const images = props.data?.images;
+      if (!images || images.mappings) {
+        return props;
+      }
+
+      return {
+        ...props,
+        data: {
+          ...props.data,
+          images: {
+            ...images,
+            constantValue: Array.isArray(images.constantValue)
+              ? images.constantValue.map((item: unknown) => {
+                  const image = item as Record<string, unknown> | null;
+                  const imageValue =
+                    image && "url" in image
+                      ? image
+                      : (image?.assetImage ?? image?.image ?? item);
+                  return {
+                    image: {
+                      field: "",
+                      constantValueEnabled: true,
+                      constantValue: imageValue,
+                    },
+                    link: {
+                      field: "",
+                      constantValueEnabled: true,
+                      constantValue: {
+                        defaultValue:
+                          typeof image?.clickthroughUrl === "string"
+                            ? image.clickthroughUrl
+                            : "",
+                      },
+                    },
+                  };
+                })
+              : [],
+            mappings: {
+              image: {
+                field: images.field ? "$item" : "",
+                constantValueEnabled: false,
+                constantValue: undefined,
+              },
+              link: {
+                field: "",
+                constantValueEnabled: false,
+                constantValue: undefined,
+              },
+            },
+          },
+        },
+      };
+    },
+  },
+};

packages/visual-editor/src/components/migrations/migrationRegistry.ts

@@ -81,6 +81,7 @@ import { imageFillTypeMigration } from "./0079_image_fill_type.ts";
 import { directoryCardDisplayProps } from "./0080_directory_card_display_props.ts";
 import { headerFooterImageFillTypeMigration } from "./0081_header_footer_image_fill_type.ts";
 import { heroPhoneSlotMigration } from "./0082_hero_phone_slot.ts";
+import { photoGalleryItemSource } from "./0083_photo_gallery_item_source.ts";
 
 // To add a migration:
 // Create a new file in this directory that exports a Migration
@@ -170,4 +171,5 @@ export const migrationRegistry: MigrationRegistry = [
   directoryCardDisplayProps,
   headerFooterImageFillTypeMigration,
   heroPhoneSlotMigration,
+  photoGalleryItemSource,
 ];

packages/visual-editor/src/components/pageSections/EntityMappedSectionEmptyState.test.tsx

@@ -131,6 +131,8 @@ const directSectionCases: DirectSectionCase[] = [
       const props = cloneValue(PhotoGallerySection.defaultProps!);
       props.slots.PhotoGalleryWrapper[0].props.data.images.field =
         "photoGallery";
+      props.slots.PhotoGalleryWrapper[0].props.data.images.mappings.image.field =
+        "$item";
       props.slots.PhotoGalleryWrapper[0].props.data.images.constantValueEnabled = false;
       props.slots.PhotoGalleryWrapper[0].props.data.images.constantValue = [];
       return props;
@@ -171,7 +173,11 @@ const directSectionCases: DirectSectionCase[] = [
           HeadingSlot: createSectionHeadingSlot(),
           PhotoGalleryWrapper: createCardsSlot(
             isMappedContentEmpty ? (
-              <EntityFieldSectionEmptyStateBox showEmptyStateMarker />
+              isEditing ? (
+                <EntityFieldSectionEmptyStateBox showEmptyStateMarker />
+              ) : (
+                <EmptyStateMarker />
+              )
             ) : (
               "Gallery Images"
             )
@@ -255,7 +261,9 @@ describe.each(directSectionCases)(
       });
 
       await waitFor(() => {
-        expect(result.container.childElementCount).toBe(0);
+        expect(result.queryByText("Section Heading")).toBeNull();
+        expect(result.queryByText(visibleContentText)).toBeNull();
+        expect(result.queryByText(/Section hidden for this/i)).toBeNull();
       });
     });