@akinon/pz-theme 2.0.100-rc.0 → 2.0.101-beta.0

package/src/blocks/image-block.tsx

@@ -8,6 +8,11 @@ import {
   getResponsiveValue,
   resolveOption
 } from '../utils';
+import {
+  PHONE_AND_TABLET_MEDIA_CONDITION,
+  PHONE_ONLY_MEDIA_CONDITION,
+  TABLET_ONLY_MEDIA_CONDITION
+} from '../utils/breakpoints';
 import { BlockRendererProps } from './block-renderer-registry';
 
 const pickImageSource = (value: unknown, currentBreakpoint: string): string => {
@@ -63,8 +68,73 @@ const isValidImageSource = (src: string): boolean => {
   }
 };
 
+/**
+ * The narrow-band overrides, resolved to absolute URLs.
+ *
+ * Authored as two ordinary `image` properties rather than one map, so the
+ * merchant gets the SAME upload control they already know, and so a block that
+ * was published before this existed simply has neither key — which is what
+ * makes the "no override" path below byte-identical to the old renderer.
+ *
+ * The desktop source deliberately stays on `block.value`. Moving it to a
+ * property would blank every published image (the rule this repo already wrote
+ * down for the twin case in the editor's video-block-sources test), and the
+ * save path flattens an `image` block's `value` to a single string anyway, so a
+ * per-breakpoint map could never survive a round trip there.
+ */
+const resolveOverride = (value: unknown, currentBreakpoint: string): string => {
+  const raw = pickImageSource(value, currentBreakpoint);
+  const url = normalizeImageSource(raw);
+  return isValidImageSource(url) ? url : '';
+};
+
+export interface PictureSource {
+  media: string;
+  srcSet: string;
+}
+
+/**
+ * The `<source>` list, in FIRST-MATCH order.
+ *
+ * Mirrors how the generated stylesheet cascades, which is the behaviour the
+ * merchant has already learned everywhere else in the editor: a value authored
+ * at "mobile" applies up to 1023px *unless* a tablet value narrows it. CSS says
+ * that with an overlap plus source order; `<picture>` has no cascade, so the
+ * overlap has to be removed here instead — hence the phone band widening to
+ * 1023 exactly when no tablet image was authored.
+ *
+ * A band equal to the desktop source is dropped rather than emitted: an
+ * identical candidate would make the browser re-decide for nothing, and it is
+ * what keeps an untouched block on the plain-`<img>` path.
+ */
+export const buildPictureSources = (
+  desktop: string,
+  tablet: string,
+  mobile: string
+): PictureSource[] => {
+  const sources: PictureSource[] = [];
+  const phoneSrc = mobile || '';
+  const tabletSrc = tablet || '';
+
+  if (phoneSrc && phoneSrc !== desktop) {
+    sources.push({
+      media: tabletSrc
+        ? PHONE_ONLY_MEDIA_CONDITION
+        : PHONE_AND_TABLET_MEDIA_CONDITION,
+      srcSet: phoneSrc
+    });
+  }
+
+  if (tabletSrc && tabletSrc !== desktop) {
+    sources.push({ media: TABLET_ONLY_MEDIA_CONDITION, srcSet: tabletSrc });
+  }
+
+  return sources;
+};
+
 const ImageBlock = ({
   block,
+  isDesigner = false,
   currentBreakpoint = 'desktop'
 }: BlockRendererProps) => {
   const imageValue = useMemo(() => {
@@ -78,7 +148,49 @@ const ImageBlock = ({
     };
   }, [block.value, block.properties?.alt, currentBreakpoint]);
 
-  const { url: src, alt } = imageValue;
+  const { url: desktopSrc, alt } = imageValue;
+
+  const imageTablet = resolveOverride(
+    block.properties?.imageTablet,
+    currentBreakpoint
+  );
+  const imageMobile = resolveOverride(
+    block.properties?.imageMobile,
+    currentBreakpoint
+  );
+
+  const pictureSources = useMemo(
+    () => buildPictureSources(desktopSrc, imageTablet, imageMobile),
+    [desktopSrc, imageTablet, imageMobile]
+  );
+
+  /*
+   * THE CANVAS CANNOT PREVIEW A `<picture>`.
+   *
+   * `<source media>` is answered by the browser against the REAL viewport, and
+   * there is no CSS that can override it. The editor draws a phone preview
+   * inside a desktop-wide iframe, so a real `<picture>` would show the desktop
+   * image in every preview device — the author would have no way to see the
+   * phone crop they just uploaded.
+   *
+   * So the canvas keeps resolving in JS at the breakpoint the editor selected,
+   * and only the storefront ships the real element. The cost is named rather
+   * than hidden: the canvas no longer renders byte-identical markup, so a
+   * malformed `media` or a dropped `srcset` is invisible there and has to be
+   * caught by the tests below it.
+   *
+   * The fallback chain matches the emitted source list: at tablet, an
+   * unauthored tablet image falls through to the phone image the same way the
+   * widened phone band does on the storefront.
+   */
+  const designerSrc =
+    currentBreakpoint === 'mobile'
+      ? imageMobile || desktopSrc
+      : currentBreakpoint === 'tablet'
+        ? imageTablet || imageMobile || desktopSrc
+        : desktopSrc;
+
+  const src = isDesigner ? designerSrc : desktopSrc;
   const loadingStrategyValue =
     block.properties?.loadingStrategy ?? block.styles?.loadingStrategy;
   const priorityValue = block.properties?.priority ?? block.styles?.priority;
@@ -152,9 +264,9 @@ const ImageBlock = ({
    */
   const boxIsSized =
     (typeof height === 'string' && height !== 'auto') || Boolean(aspectRatio);
-  const boxWidth = isRowBound('width') ? width ?? '100%' : '100%';
+  const boxWidth = isRowBound('width') ? (width ?? '100%') : '100%';
   const boxHeight = isRowBound('height')
-    ? height ?? 'auto'
+    ? (height ?? 'auto')
     : boxIsSized
       ? '100%'
       : 'auto';
@@ -206,7 +318,41 @@ const ImageBlock = ({
     />
   );
 
-  return content;
+  /*
+   * 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
+   * HTML is unchanged byte for byte — a `<picture>` wrapping a lone `<img>`
+   * would be harmless to the browser but would still be a diff in every
+   * snapshot and every brand's CSS that targets `[data-block-id] > img`.
+   */
+  if (!src || isDesigner || pictureSources.length === 0) {
+    return content;
+  }
+
+  /*
+   * `display: contents` is load-bearing, not tidiness.
+   *
+   * `image` is not in INNER_ROOT_BLOCK_TYPES, so the generated stylesheet puts
+   * this block's width/height/aspect-ratio on the `[data-block-id]` WRAPPER and
+   * the <img> above is sized against it with percentages. A `<picture>` between
+   * the two would become the flex item the parent lays out and the percentage
+   * parent the <img> resolves against — so `height: 100%` would resolve against
+   * an auto-height box and collapse. `display: contents` removes the box while
+   * keeping the element, which is exactly what is wanted: the <source> list is
+   * markup, not layout.
+   */
+  return (
+    <picture style={{ display: 'contents' }}>
+      {pictureSources.map((source) => (
+        <source
+          key={source.media}
+          media={source.media}
+          srcSet={source.srcSet}
+        />
+      ))}
+      {content}
+    </picture>
+  );
 };
 
 export default ImageBlock;

package/src/utils/breakpoints.ts

@@ -114,3 +114,33 @@ export const breakpointForWidth = (width: number): BreakpointName => {
  */
 export const isNarrowBreakpoint = (breakpoint?: string): boolean =>
   breakpoint === 'mobile' || breakpoint === 'tablet';
+
+/**
+ * The same two bands as media QUERIES, but as bare media CONDITIONS for a
+ * `<picture><source media>` attribute.
+ *
+ * Two differences from the `@media` constants above, both load-bearing:
+ *
+ * - No `@media` prefix. `<source media>` takes a media *condition*, and a
+ *   string starting with `@media` never matches — silently, because a source
+ *   whose condition fails is simply skipped and the browser falls through to
+ *   the `<img>`. The bug would look like "the phone image is ignored".
+ * - The phone band is EXCLUSIVE of the tablet band (`max-width: 767px`), while
+ *   `MOBILE_MEDIA_QUERY` deliberately overlaps it (`max-width: 1023px`) and
+ *   lets source order decide. CSS resolves an overlap by cascade; `<picture>`
+ *   resolves it by FIRST MATCH, so an overlapping phone condition placed first
+ *   would swallow every tablet. Where no tablet image is authored the caller
+ *   widens the phone band back to 1023 on purpose — that is what reproduces
+ *   the stylesheet's "mobile covers tablet unless tablet overrides" rule.
+ */
+export const PHONE_ONLY_MEDIA_CONDITION = `(max-width: ${
+  TABLET_MIN_WIDTH - 1
+}px)`;
+
+export const PHONE_AND_TABLET_MEDIA_CONDITION = `(max-width: ${
+  DESKTOP_MIN_WIDTH - 1
+}px)`;
+
+export const TABLET_ONLY_MEDIA_CONDITION = `(min-width: ${TABLET_MIN_WIDTH}px) and (max-width: ${
+  DESKTOP_MIN_WIDTH - 1
+}px)`;