@akinon/pz-theme 2.0.143-beta.0 → 2.0.143

package/CHANGELOG.md

@@ -1,12 +1,13 @@
 # @akinon/pz-theme
 
-## 2.0.143-beta.0
+## 2.0.143
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.143-beta.0
-  - @akinon/theme-contract@2.0.143-beta.0
+- 826c588: ZERO-5173: Add a product card list slider, image count, hover zoom and the listing's grid views, and show an unsaved collection pick's channel rows on the canvas
+- Updated dependencies [826c588]
+  - @akinon/theme-contract@2.0.143
+  - @akinon/next@2.0.143
 
 ## 2.0.142
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.143-beta.0",
+  "version": "2.0.143",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.143-beta.0",
+    "@akinon/next": "2.0.143",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.143-beta.0",
+    "@akinon/theme-contract": "2.0.143",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "react-multi-carousel": "2.8.4",
@@ -21,7 +21,7 @@
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.143-beta.0",
+    "@akinon/next": "2.0.143",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/designer-live-rows.test.tsx

@@ -6,6 +6,12 @@ import { defineCustomBlock, registerCustomBlocks } from '../custom';
 import { useThemeSectionData } from '../theme-section-data-context';
 import { __resetEditorBridgeForTests } from '../editor-bridge';
 import ThemePlaceholderWrapper from '../theme-placeholder-wrapper';
+import {
+  collectionPreviewWidget,
+  collectionPreviewWidgetSlug,
+  fetchDesignerPreviewRows,
+  PREVIEW_ROWS_TIMEOUT_MS
+} from '../utils/live-rows';
 
 /**
  * ZERO-5084 — the editor canvas has to show the rows the storefront shows.
@@ -444,9 +450,260 @@ describe('the editor canvas', () => {
   });
 });
 
+/**
+ * The snapshot of an unsaved pick is Omnitron's item list — the catalogue's
+ * rows, out-of-stock variants and old prices included, in its own order — so
+ * it showed other products than the ones the section showed once published
+ * (seen on GANT: eight sold-out discounted shirts before publish, twelve
+ * OUTLET shorts after). The editor now keeps a hidden widget bound to the
+ * pick's binding and stamps its slug on the source; the canvas reads the
+ * pick's rows from it.
+ */
+describe('an unsaved pick the editor prepared a preview widget for', () => {
+  beforeEach(frameDocument);
+
+  const PREVIEW = 'theme-editor-collection-2-6';
+  const PREPARED = {
+    pk: 2,
+    productLimit: 6,
+    products: NEW_PICK,
+    previewWidget: PREVIEW
+  };
+  /** What the channel serves for collection 2 at limit 6. */
+  const CHANNEL = [row(6101, 'Lacivert Sort'), row(6102, 'Krem Sort')];
+
+  it('shows the rows the channel will serve, and nothing else on the way', async () => {
+    const answer = deferred();
+    fetchMock.mockReturnValueOnce(answer.promise);
+
+    renderWrapper();
+    turnDesignerOn();
+    sendTheme(PREPARED);
+    // While the preview widget is asked, the section keeps what it showed —
+    // never the snapshot, which would be swapped out a moment later.
+    shows(namesOf(LIVE));
+    hides(namesOf(NEW_PICK));
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(fetchMock.mock.calls[0][0]).toMatch(
+      new RegExp(`^/api/client/widgets/${PREVIEW}/\\?t=\\d+$`)
+    );
+
+    answer.resolve(
+      jsonResponse({ slug: PREVIEW, attributes: {}, products: CHANNEL })
+    );
+    await flush();
+
+    shows(namesOf(CHANNEL));
+    hides(namesOf(NEW_PICK));
+    hides(namesOf(LIVE));
+
+    // Once per binding: later updates reuse the rows.
+    sendTheme(PREPARED, {}, 'UPDATE_THEME');
+    await flush();
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    shows(namesOf(CHANNEL));
+  });
+
+  it('keeps them through the publish until the section’s own answer is in', async () => {
+    const sectionAnswer = deferred();
+    fetchMock
+      .mockResolvedValueOnce(jsonResponse({ products: CHANNEL }))
+      .mockReturnValueOnce(sectionAnswer.promise);
+
+    renderWrapper();
+    turnDesignerOn();
+    sendTheme(PREPARED);
+    await flush();
+    shows(namesOf(CHANNEL));
+
+    sendTheme(PREPARED, { dataSourceSaved: true }, 'UPDATE_THEME');
+    // No step back to the snapshot while the section's widget is asked.
+    shows(namesOf(CHANNEL));
+    hides(namesOf(NEW_PICK));
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(fetchMock.mock.calls[1][0]).toMatch(
+      new RegExp(`^/api/client/widgets/${SECTION}/\\?t=\\d+$`)
+    );
+
+    sectionAnswer.resolve(jsonResponse({ products: REPOINTED_LIVE }));
+    await flush();
+    shows(namesOf(REPOINTED_LIVE));
+  });
+
+  it('asks for nothing when the stamp names another binding', () => {
+    renderWrapper();
+    turnDesignerOn();
+    // Re-pointed to another limit by something that prepared no widget: the
+    // stamped one answers for limit 6, not for this binding.
+    sendTheme({ ...PREPARED, productLimit: 12 });
+
+    shows(namesOf(NEW_PICK));
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it('falls back to the snapshot when the preview widget serves no products', async () => {
+    fetchMock.mockResolvedValueOnce(
+      jsonResponse({ slug: PREVIEW, attributes: {}, products: [] })
+    );
+
+    renderWrapper();
+    turnDesignerOn();
+    sendTheme(PREPARED);
+    await flush();
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    shows(namesOf(NEW_PICK));
+  });
+
+  it('goes from one prepared pick to the next without the snapshot in between', async () => {
+    const NEXT_PREVIEW = 'theme-editor-collection-3-6';
+    const NEXT_SNAPSHOT = [row(700, 'Next Pick Snapshot')];
+    const NEXT_CHANNEL = [row(7101, 'Bordo Kazak'), row(7102, 'Gri Kazak')];
+    const nextAnswer = deferred();
+    fetchMock
+      .mockResolvedValueOnce(jsonResponse({ products: CHANNEL }))
+      .mockReturnValueOnce(nextAnswer.promise);
+
+    renderWrapper();
+    turnDesignerOn();
+    sendTheme(PREPARED);
+    await flush();
+    shows(namesOf(CHANNEL));
+
+    sendTheme(
+      {
+        pk: 3,
+        productLimit: 6,
+        products: NEXT_SNAPSHOT,
+        previewWidget: NEXT_PREVIEW
+      },
+      {},
+      'UPDATE_THEME'
+    );
+    shows(namesOf(CHANNEL));
+    hides(namesOf(NEXT_SNAPSHOT));
+    expect(fetchMock.mock.calls[1][0]).toMatch(
+      new RegExp(`^/api/client/widgets/${NEXT_PREVIEW}/\\?t=\\d+$`)
+    );
+
+    nextAnswer.resolve(jsonResponse({ products: NEXT_CHANNEL }));
+    await flush();
+    shows(namesOf(NEXT_CHANNEL));
+    hides(namesOf(CHANNEL));
+  });
+
+  it('never attaches a preview answer to a binding the section has left', async () => {
+    const lateAnswer = deferred();
+    fetchMock.mockReturnValueOnce(lateAnswer.promise);
+
+    renderWrapper();
+    turnDesignerOn();
+    sendTheme(PREPARED);
+
+    const THIRD_PICK = [row(700, 'Third Pick Snapshot')];
+    sendTheme(
+      { pk: 3, productLimit: 6, products: THIRD_PICK },
+      {},
+      'UPDATE_THEME'
+    );
+
+    lateAnswer.resolve(jsonResponse({ products: CHANNEL }));
+    await flush();
+
+    shows(namesOf(THIRD_PICK));
+    hides(namesOf(CHANNEL));
+  });
+});
+
+describe('a preview widget that does not answer', () => {
+  afterEach(() => jest.useRealTimers());
+
+  it('is given up on after the timeout, so the section stops holding', async () => {
+    jest.useFakeTimers();
+    fetchMock.mockImplementation(
+      (_url: string, init?: { signal?: AbortSignal }) =>
+        new Promise((_resolve, reject) => {
+          init?.signal?.addEventListener('abort', () =>
+            reject(new Error('aborted'))
+          );
+        })
+    );
+
+    const answer = fetchDesignerPreviewRows('theme-editor-collection-2-6');
+    jest.advanceTimersByTime(PREVIEW_ROWS_TIMEOUT_MS);
+
+    await expect(answer).resolves.toBeNull();
+  });
+});
+
+describe('the preview widget a source names', () => {
+  const source = (collection: Record<string, unknown>) =>
+    collectionSource(collection);
+
+  it('is one per binding, named as the editor names it', () => {
+    expect(collectionPreviewWidgetSlug(1, 8)).toBe(
+      'theme-editor-collection-1-8'
+    );
+    expect(collectionPreviewWidgetSlug('1572', '12')).toBe(
+      'theme-editor-collection-1572-12'
+    );
+    expect(collectionPreviewWidgetSlug(0, 8)).toBeNull();
+    expect(collectionPreviewWidgetSlug(1, '8/../x')).toBeNull();
+    expect(collectionPreviewWidgetSlug(undefined, 8)).toBeNull();
+  });
+
+  it('is read only while the stamp names the current binding', () => {
+    const stamp = 'theme-editor-collection-1-8';
+
+    expect(
+      collectionPreviewWidget(
+        source({ pk: 1, productLimit: 8, previewWidget: stamp })
+      )
+    ).toBe(stamp);
+    expect(
+      collectionPreviewWidget(
+        source({ pk: 1, productLimit: 12, previewWidget: stamp })
+      )
+    ).toBeNull();
+    expect(
+      collectionPreviewWidget(source({ pk: 1, productLimit: 8 }))
+    ).toBeNull();
+    expect(
+      collectionPreviewWidget(
+        source({ pk: 1, productLimit: 8, previewWidget: '../widgets/x' })
+      )
+    ).toBeNull();
+    expect(collectionPreviewWidget(null)).toBeNull();
+  });
+});
+
 describe('the storefront', () => {
   beforeEach(unframeDocument);
 
+  it('never asks for a preview widget', () => {
+    render(
+      <ThemePlaceholderWrapper
+        slug={SLOT}
+        initialSections={[
+          section(
+            collectionSource({
+              pk: 2,
+              productLimit: 6,
+              products: NEW_PICK,
+              previewWidget: 'theme-editor-collection-2-6'
+            })
+          )
+        ]}
+        initialPlaceholderId={SLOT}
+        isDesignMode={false}
+      />
+    );
+
+    shows(namesOf(NEW_PICK));
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
   it('renders the server rows and asks for nothing', () => {
     const view = renderWrapper();
 

package/src/blocks/__tests__/favorite-button-icons.test.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import ThemeBlock, { type Block } from '../../theme-block';
+import { buildIteratorBlock } from '../../utils/iterator-utils';
+
+/**
+ * ZERO-5173 — the Product Card's favourite draws the product listing's heart:
+ * gant.co.uk's 8-unit glyph, a finer outline with rounded ends, at 8px. It is
+ * one more icon of the favourite block, on a grid of its own, and the icons
+ * that were already there keep the markup published cards render.
+ */
+const LISTING_HEART =
+  'M4.966 1.01c.581-.68 1.487-.68 2.068 0 .622.729.622 1.938 0 2.666L4 7.23.966 3.676c-.622-.728-.622-1.937 0-2.665.581-.682 1.487-.682 2.068 0l.586.686.38.446.38-.446z';
+
+const favouriteIn = (properties: Record<string, unknown>) => {
+  const iterator: Block = {
+    id: 'it',
+    type: 'group',
+    label: 'Iterator',
+    isIterator: true,
+    properties: { tag: 'div', iteratorDataPath: 'products', iteratorCount: 1 },
+    styles: {},
+    order: 0,
+    hidden: false,
+    blocks: [
+      {
+        id: 'card',
+        type: 'group',
+        label: 'Product Card',
+        properties: { tag: 'div' },
+        styles: {},
+        order: 0,
+        hidden: false,
+        blocks: [
+          {
+            id: 'fav',
+            type: 'favorite-button',
+            label: 'Favourite',
+            properties: { showLabel: false, ...properties },
+            styles: {},
+            order: 0,
+            hidden: false,
+            blocks: []
+          }
+        ]
+      }
+    ]
+  };
+  const expanded = buildIteratorBlock({
+    iteratorBlock: iterator,
+    sectionDataSource: {
+      id: 'ds-1',
+      name: 'Seçtiklerimiz',
+      type: 'collection',
+      details: {
+        collection: {
+          pk: 1,
+          productLimit: 1,
+          products: [{ pk: 11, name: 'A', price: '10.00', absolute_url: '/a/' }]
+        }
+      }
+    },
+    pageContext: null
+  } as never);
+  const [clone] = expanded.blocks || [];
+
+  const { container } = render(
+    <ThemeBlock block={clone} placeholderId="home" sectionId="s1" />
+  );
+  return container.querySelector('[data-favorite-button] svg') as SVGElement;
+};
+
+describe('the favourite’s icons', () => {
+  it('draws the listing’s thin heart on its own 8-unit grid', () => {
+    const icon = favouriteIn({ icon: 'heart-thin', iconSize: 8 });
+
+    expect(icon.getAttribute('viewBox')).toBe('0 0 8 8');
+    expect(icon.getAttribute('width')).toBe('8');
+    expect(icon.getAttribute('stroke-width')).toBe('1');
+    expect(icon.getAttribute('stroke-linecap')).toBe('round');
+    expect(icon.getAttribute('fill')).toBe('none');
+    expect(icon.querySelector('path')?.getAttribute('d')).toBe(LISTING_HEART);
+  });
+
+  it('keeps the markup the other icons always had', () => {
+    const icon = favouriteIn({ icon: 'heart', iconSize: 14 });
+
+    expect(icon.getAttribute('viewBox')).toBe('0 0 24 24');
+    expect(icon.getAttribute('stroke-width')).toBe('1.5');
+    expect(icon.hasAttribute('stroke-linecap')).toBe(false);
+    expect(icon.querySelector('path')?.getAttribute('d')).toBe(
+      'M12 20s-7-4.35-7-9a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 4.65-7 9-7 9z'
+    );
+  });
+
+  it('falls back to the heart for an icon it does not know', () => {
+    const icon = favouriteIn({ icon: 'unknown' });
+
+    expect(icon.getAttribute('viewBox')).toBe('0 0 24 24');
+  });
+});

package/src/blocks/__tests__/listing-price-note.test.ts

@@ -0,0 +1,47 @@
+import { normalizeCollectionRow } from '../../utils/iterator-utils';
+import { normalizeListingProduct } from '../listing-row';
+
+/**
+ * ZERO-5173 — the price-history caption a product card prints under a
+ * discounted price, decided the way the GANT listing decides it: "Son 10
+ * günün en düşük fiyatı", unless commerce's price-history figure
+ * (`price_extra_field.previous_price`) is below the selling price, where a
+ * lowest-price claim would be false and the listing says "Avantajlı Fiyat".
+ */
+const product = (price: string, retail: string, previous?: string) => ({
+  pk: 1,
+  name: 'GANT Erkek Sarı Regular Fit Logolu Polo Yaka T-Shirt',
+  absolute_url: '/polo/',
+  price,
+  retail_price: retail,
+  ...(previous !== undefined
+    ? { price_extra_field: { previous_price: previous } }
+    : {})
+});
+
+const noteOf = (price: string, retail: string, previous?: string) =>
+  normalizeListingProduct(product(price, retail, previous), 0, {})?.priceNote;
+
+describe('the price note of a listing row', () => {
+  it('captions a discounted row only', () => {
+    expect(noteOf('5499.00', '5499.00')).toBeUndefined();
+    expect(noteOf('5499.00', '5499.00', '4399.00')).toBeUndefined();
+    expect(noteOf('4399.00', '5499.00')).toBe('lowest');
+  });
+
+  it('claims the lowest price unless the price history is below the price', () => {
+    // At or under the period's lowest: the claim holds.
+    expect(noteOf('5399.00', '8999.00', '7199.00')).toBe('lowest');
+    expect(noteOf('5399.00', '8999.00', '5399.00')).toBe('lowest');
+    // Above it: "advantageous", never "lowest".
+    expect(noteOf('5399.00', '8999.00', '4999.00')).toBe('advantageous');
+  });
+
+  it('reaches a collection row, which a Product Card repeats over', () => {
+    const row = normalizeCollectionRow(
+      product('5399.00', '8999.00', '4999.00'),
+      0
+    );
+    expect(row.priceNote).toBe('advantageous');
+  });
+});

package/src/blocks/favorite-button-block.tsx

@@ -24,15 +24,31 @@ import {
 
 const FAVORITES_PAGE_SIZE = 100;
 
-const ALLOWED_ICONS = ['heart', 'star', 'bookmark'];
+const ALLOWED_ICONS = ['heart', 'heart-thin', 'star', 'bookmark'];
 const ALLOWED_LABEL_POSITIONS = ['before', 'after'];
 
 const ICON_PATHS: Record<string, string> = {
   heart: 'M12 20s-7-4.35-7-9a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 4.65-7 9-7 9z',
+  // The product listing's heart (gant.co.uk's): a finer outline with rounded
+  // ends, on an 8-unit grid of its own (ICON_GRIDS).
+  'heart-thin':
+    'M4.966 1.01c.581-.68 1.487-.68 2.068 0 .622.729.622 1.938 0 2.666L4 7.23.966 3.676c-.622-.728-.622-1.937 0-2.665.581-.682 1.487-.682 2.068 0l.586.686.38.446.38-.446z',
   star: 'M12 4l2.5 5.2 5.5.8-4 3.9 1 5.6-5-2.7-5 2.7 1-5.6-4-3.9 5.5-.8L12 4z',
   bookmark: 'M7 4h10a1 1 0 0 1 1 1v15l-6-3.5L6 20V5a1 1 0 0 1 1-1z'
 };
 
+/**
+ * The grid an icon is drawn on where it is not the 24-unit one the others
+ * share: the thin heart is an 8-unit glyph whose 1-unit stroke is one pixel
+ * at its natural 8px, the size the listing draws it at.
+ */
+const ICON_GRIDS: Record<
+  string,
+  { viewBox: string; strokeWidth: string; strokeLinecap: 'round' }
+> = {
+  'heart-thin': { viewBox: '0 0 8 8', strokeWidth: '1', strokeLinecap: 'round' }
+};
+
 /**
  * Extra props land on the <svg> itself rather than on a wrapper: the icon is
  * the element a brand styles, and wrapping it would change the markup every
@@ -47,20 +63,25 @@ const FavoriteIcon = ({
   filled: boolean;
   name: string;
   size: number;
-} & React.SVGProps<SVGSVGElement>) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill={filled ? 'currentColor' : 'none'}
-    stroke="currentColor"
-    strokeWidth="1.5"
-    aria-hidden="true"
-    {...rest}
-  >
-    <path d={ICON_PATHS[name] || ICON_PATHS.heart} />
-  </svg>
-);
+} & React.SVGProps<SVGSVGElement>) => {
+  const grid = ICON_GRIDS[name];
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={grid?.viewBox ?? '0 0 24 24'}
+      fill={filled ? 'currentColor' : 'none'}
+      stroke="currentColor"
+      strokeWidth={grid?.strokeWidth ?? '1.5'}
+      strokeLinecap={grid?.strokeLinecap}
+      aria-hidden="true"
+      {...rest}
+    >
+      <path d={ICON_PATHS[name] || ICON_PATHS.heart} />
+    </svg>
+  );
+};
 
 /**
  * Functional commerce block: favourite (wishlist) toggle for the ambient

package/src/blocks/group-block.tsx

@@ -11,9 +11,12 @@ import {
   emitCommerceEvent,
   readItemsCurrency
 } from '../utils/analytics';
+import { postToEditor } from '../editor-bridge';
 import { BlockRendererProps } from './block-renderer-registry';
 import { DesignerPlaceholder, useThemeItemScope } from './product-block-utils';
 import { renderComposedChildren } from './render-composed-children';
+import { CardListSlider, readListGap } from '../components/card-list-slider';
+import { CardListViews } from '../components/card-list-views';
 
 /**
  * Composed anchors to the storefront's own routes navigate client-side. A
@@ -158,7 +161,7 @@ const GroupBlock = ({
     );
   }
 
-  const renderedChildren = renderComposedChildren({
+  const composedChildren = renderComposedChildren({
     blocks: block.blocks,
     placeholderId,
     sectionId,
@@ -167,6 +170,54 @@ const GroupBlock = ({
     currentBreakpoint
   });
 
+  // ZERO-5173: the repeat holding a Product Cards section's cards, with the
+  // section's slider on (the property-switch pass wrote `cardsSlider`, the
+  // section's slider title among it). The same cards go into one sliding row
+  // instead of the repeat's grid; the row keeps the gap the repeat was
+  // authored with.
+  const renderedChildren = block.cardsSlider ? (
+    <CardListSlider
+      sliderId={`group-${String(block.id).replace(/[^a-zA-Z0-9_-]/g, '')}`}
+      settings={block.cardsSlider}
+      gap={readListGap(block.styles?.gap)}
+      defaultGap="0px"
+      isDesigner={isDesigner}
+      currentBreakpoint={currentBreakpoint}
+      // Its title is the section's setting: a click selects the section.
+      onTitleSelect={() =>
+        postToEditor({
+          type: 'SELECT_SECTION',
+          data: { placeholderId, sectionId }
+        })
+      }
+    >
+      {composedChildren}
+    </CardListSlider>
+  ) : block.cardsViews ? (
+    // The listing's grid views (the same pass wrote `cardsViews` for a repeat
+    // that is not sliding): the view overrides the repeat's column template by
+    // stylesheet — the cards are untouched — and the toggles, when the shopper
+    // is offered them, head its grid.
+    <>
+      <CardListViews
+        scopeId={String(block.styleSourceId || block.id)}
+        settings={block.cardsViews}
+        isDesigner={isDesigner}
+        currentBreakpoint={currentBreakpoint}
+        // The views are the section's settings: a click selects the section.
+        onSelect={() =>
+          postToEditor({
+            type: 'SELECT_SECTION',
+            data: { placeholderId, sectionId }
+          })
+        }
+      />
+      {composedChildren}
+    </>
+  ) : (
+    composedChildren
+  );
+
   if (useRouterLink) {
     return (
       <NextLink

package/src/blocks/image-block.tsx

@@ -19,6 +19,7 @@ import {
   useValueLocale
 } from '../utils/localized-value';
 import { BlockRendererProps } from './block-renderer-registry';
+import { CardZoom } from '../components/card-zoom';
 
 /** "No breakpoint answered", which '' cannot express (see `pickImageSource`). */
 const NO_RESPONSIVE_VALUE = Symbol('no-responsive-value');
@@ -364,6 +365,29 @@ const ImageBlock = ({
     />
   );
 
+  /*
+   * The card's picture zooming in on hover (ZERO-5173): the property-switch
+   * pass wrote `cardZoom` because the card or the list around it asked for
+   * it. The frame takes the box the picture had and clips the enlarged one,
+   * so the card around it does not move; without the setting the element is
+   * the one this block always emitted.
+   */
+  const withZoom = (picture: React.ReactElement): React.ReactElement =>
+    block.cardZoom && src ? (
+      <CardZoom
+        style={{
+          width: boxWidth,
+          height: boxHeight,
+          borderRadius: borderRadius ?? '0px',
+          aspectRatio: boxAspectRatio
+        }}
+      >
+        {picture}
+      </CardZoom>
+    ) : (
+      picture
+    );
+
   /*
    * No override, or the canvas: emit exactly what this block emitted before
    * this feature existed. Every block published to date takes this path, so its
@@ -372,7 +396,7 @@ const ImageBlock = ({
    * snapshot and every brand's CSS that targets `[data-block-id] > img`.
    */
   if (!src || isDesigner || pictureSources.length === 0) {
-    return content;
+    return withZoom(content);
   }
 
   /*
@@ -387,7 +411,7 @@ const ImageBlock = ({
    * keeping the element, which is exactly what is wanted: the <source> list is
    * markup, not layout.
    */
-  return (
+  return withZoom(
     <picture style={{ display: 'contents' }}>
       {pictureSources.map((source) => (
         <source