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

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.136-beta.0
+## 2.0.136
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.136-beta.0
-  - @akinon/theme-contract@2.0.136-beta.0
+- cc7cd90: ZERO-5151: Add the listing density switcher block with per-device column counts
+  - @akinon/next@2.0.136
+  - @akinon/theme-contract@2.0.136
 
 ## 2.0.135
 

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.136-beta.0",
+  "version": "2.0.136",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.136-beta.0",
+    "@akinon/next": "2.0.136",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.136-beta.0",
+    "@akinon/theme-contract": "2.0.136",
     "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.136-beta.0",
+    "@akinon/next": "2.0.136",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/registry-parity.test.ts

@@ -80,6 +80,7 @@ const EXPECTED_BLOCK_TYPES = [
   'language-selector',
   'link',
   'listing-breadcrumb',
+  'listing-density',
   'listing-pagination',
   'listing-result-count',
   'listing-title',

package/src/blocks/__tests__/listing-density.test.tsx

@@ -0,0 +1,608 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { hydrateRoot } from 'react-dom/client';
+import { act, fireEvent, render } from '@testing-library/react';
+import ListingDensityBlock from '../listing-density-block';
+import ProductGridBlock from '../product-grid-block';
+import {
+  parseDensityOptions,
+  resolveDensityOptionSets
+} from '../density-switcher';
+import {
+  __resetListingDensityForTests,
+  chooseDensity,
+  LISTING_DENSITY_SCOPE,
+  registerDensityOptions
+} from '../listing-density-store';
+import { ThemePageContextProvider } from '../../theme-page-context';
+import type { Block } from '../../theme-block';
+
+/**
+ * ZERO-5151: the density switcher as a block of its own, with per-device
+ * counts, talking to the product grid through a shared store.
+ */
+
+const listingContext = (count = 3) => ({
+  listing: {
+    title: 'Shoes',
+    path: '/shoes',
+    products: Array.from({ length: count }, (_, index) => ({
+      pk: index + 1,
+      name: `P${index + 1}`,
+      url: `/p${index + 1}`,
+      image: `/p${index + 1}.jpg`,
+      price: 10
+    })),
+    facets: [],
+    sorters: [],
+    pagination: { current_page: 1, count }
+  }
+});
+
+const block = (
+  type: string,
+  id: string,
+  properties: Record<string, unknown> = {}
+): Block =>
+  ({
+    id,
+    type,
+    label: type,
+    order: 0,
+    hidden: false,
+    value: '',
+    properties,
+    styles: {},
+    blocks: []
+  } as Block);
+
+const DENSITY_PROPS = {
+  optionsDesktop: '2,3,4',
+  optionsTablet: '2,3',
+  optionsMobile: '1,2'
+};
+
+const GRID_PROPS = { columnsDesktop: 4, columnsTablet: 3, columnsMobile: 2 };
+
+const drawPage = ({
+  densityProps = DENSITY_PROPS,
+  gridProps = GRID_PROPS,
+  isDesigner = false,
+  currentBreakpoint = 'desktop',
+  context = listingContext() as unknown,
+  withSwitcher = true
+}: {
+  densityProps?: Record<string, unknown>;
+  gridProps?: Record<string, unknown>;
+  isDesigner?: boolean;
+  currentBreakpoint?: string;
+  context?: unknown;
+  withSwitcher?: boolean;
+} = {}) =>
+  render(
+    <ThemePageContextProvider value={context as Record<string, unknown>}>
+      {withSwitcher && (
+        <ListingDensityBlock
+          block={block('listing-density', 'density-1', densityProps)}
+          placeholderId="p"
+          sectionId="s"
+          isDesigner={isDesigner}
+          currentBreakpoint={currentBreakpoint}
+        />
+      )}
+      <ProductGridBlock
+        block={block('product-grid', 'grid-1', gridProps)}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={isDesigner}
+        currentBreakpoint={currentBreakpoint}
+      />
+    </ThemePageContextProvider>
+  ).container;
+
+const gridCss = (container: HTMLElement) =>
+  container.querySelector('[data-product-grid] > style')?.innerHTML ?? '';
+
+const switcherCss = (container: HTMLElement) =>
+  container.querySelector('[data-density-switcher-id] > style')?.innerHTML ??
+  '';
+
+const optionsIn = (container: HTMLElement, band: string) =>
+  Array.from(
+    container.querySelectorAll<HTMLButtonElement>(
+      `[data-density-band="${band}"] button`
+    )
+  );
+
+const countsIn = (container: HTMLElement, band: string) =>
+  optionsIn(container, band).map((button) =>
+    button.getAttribute('data-listing-density-option')
+  );
+
+const selectedIn = (container: HTMLElement, band: string) =>
+  optionsIn(container, band)
+    .filter((button) => button.getAttribute('aria-pressed') === 'true')
+    .map((button) => button.getAttribute('data-listing-density-option'));
+
+const PHONE = '@media (max-width:767px)';
+const TABLET = '@media (min-width:768px) and (max-width:1023px)';
+const DESKTOP = '@media (min-width:1024px)';
+
+const GRID_DEFAULT_CSS =
+  '[data-product-grid-id="grid-1"]{grid-template-columns:repeat(4,minmax(0,1fr));}' +
+  '@media (max-width:1023px){[data-product-grid-id="grid-1"]{grid-template-columns:repeat(2,minmax(0,1fr));}}' +
+  `${TABLET}{[data-product-grid-id="grid-1"]{grid-template-columns:repeat(3,minmax(0,1fr));}}`;
+
+beforeEach(() => {
+  __resetListingDensityForTests();
+});
+
+describe('option sets', () => {
+  it('parses a comma list into ascending, deduped counts between 1 and 6', () => {
+    expect(parseDensityOptions(' 4, 2,2 ,9,0,x,3')).toEqual([2, 3, 4]);
+  });
+
+  it('falls back tablet -> mobile -> desktop when a band is left empty', () => {
+    expect(resolveDensityOptionSets([2, 3, 4], [], [1, 2])).toEqual({
+      desktop: [2, 3, 4],
+      tablet: [1, 2],
+      mobile: [1, 2]
+    });
+    expect(resolveDensityOptionSets([2, 3, 4], [], [])).toEqual({
+      desktop: [2, 3, 4],
+      tablet: [2, 3, 4],
+      mobile: [2, 3, 4]
+    });
+  });
+});
+
+describe('ListingDensityBlock on the storefront', () => {
+  it('draws every band with its own counts and a stylesheet that shows one per viewport', () => {
+    const container = drawPage();
+
+    expect(countsIn(container, 'desktop')).toEqual(['2', '3', '4']);
+    expect(countsIn(container, 'tablet')).toEqual(['2', '3']);
+    expect(countsIn(container, 'mobile')).toEqual(['1', '2']);
+
+    const scope = '[data-density-switcher-id="density-1"]';
+    expect(switcherCss(container)).toBe(
+      `${scope} [data-density-band]{display:contents;}` +
+        `${DESKTOP}{${scope} [data-density-band="tablet"],${scope} [data-density-band="mobile"]{display:none;}}` +
+        `${TABLET}{${scope} [data-density-band="desktop"],${scope} [data-density-band="mobile"]{display:none;}}` +
+        `${PHONE}{${scope} [data-density-band="desktop"],${scope} [data-density-band="tablet"]{display:none;}}`
+    );
+  });
+
+  it("offers the panel's defaults when nothing was authored, the tablet following the phone", () => {
+    const container = drawPage({ densityProps: {} });
+
+    expect(countsIn(container, 'desktop')).toEqual(['2', '3', '4']);
+    expect(countsIn(container, 'tablet')).toEqual(['1', '2']);
+    expect(countsIn(container, 'mobile')).toEqual(['1', '2']);
+  });
+
+  it("marks each band with the grid's authored count for that band", () => {
+    const container = drawPage();
+
+    expect(selectedIn(container, 'desktop')).toEqual(['4']);
+    expect(selectedIn(container, 'tablet')).toEqual(['3']);
+    expect(selectedIn(container, 'mobile')).toEqual(['2']);
+  });
+
+  it('marks the mobile count on a tablet when the grid authored no tablet count', () => {
+    const container = drawPage({
+      gridProps: { columnsDesktop: 4, columnsMobile: 2 }
+    });
+
+    expect(selectedIn(container, 'tablet')).toEqual(['2']);
+  });
+
+  it('applies a choice to its own band only, and remembers it for the session', () => {
+    const container = drawPage();
+
+    expect(gridCss(container)).toBe(GRID_DEFAULT_CSS);
+
+    fireEvent.click(optionsIn(container, 'mobile')[0]);
+
+    expect(gridCss(container)).toBe(
+      GRID_DEFAULT_CSS +
+        `${PHONE}{[data-product-grid-id="grid-1"]{grid-template-columns:repeat(1,minmax(0,1fr));}}`
+    );
+    expect(selectedIn(container, 'mobile')).toEqual(['1']);
+    // The other bands keep what they showed.
+    expect(selectedIn(container, 'desktop')).toEqual(['4']);
+    expect(selectedIn(container, 'tablet')).toEqual(['3']);
+    expect(
+      JSON.parse(window.sessionStorage.getItem('pz-listing-density') || '{}')
+    ).toEqual({ listing: { mobile: 1 } });
+  });
+
+  it('restores a remembered choice once mounted', () => {
+    window.sessionStorage.setItem(
+      'pz-listing-density',
+      JSON.stringify({ listing: { desktop: 2 } })
+    );
+
+    const container = drawPage();
+
+    expect(selectedIn(container, 'desktop')).toEqual(['2']);
+    expect(gridCss(container)).toContain(
+      `${DESKTOP}{[data-product-grid-id="grid-1"]{grid-template-columns:repeat(2,minmax(0,1fr));}}`
+    );
+  });
+
+  it('never applies a remembered choice when no switcher on the page offers it', () => {
+    window.sessionStorage.setItem(
+      'pz-listing-density',
+      JSON.stringify({ listing: { desktop: 2, mobile: 3 } })
+    );
+
+    const withoutSwitcher = drawPage({ withSwitcher: false });
+    expect(gridCss(withoutSwitcher)).toBe(GRID_DEFAULT_CSS);
+  });
+
+  it('ignores a remembered count the band no longer offers', () => {
+    window.sessionStorage.setItem(
+      'pz-listing-density',
+      JSON.stringify({ listing: { mobile: 3 } })
+    );
+
+    const container = drawPage();
+
+    expect(gridCss(container)).toBe(GRID_DEFAULT_CSS);
+    expect(selectedIn(container, 'mobile')).toEqual(['2']);
+  });
+
+  it('hides the whole switcher in a band offering fewer than two counts', () => {
+    const container = drawPage({
+      densityProps: { optionsDesktop: '2,3,4', optionsMobile: '2' }
+    });
+
+    expect(countsIn(container, 'mobile')).toEqual([]);
+    expect(countsIn(container, 'tablet')).toEqual([]);
+    expect(switcherCss(container)).toContain(
+      `${PHONE}{[data-density-switcher-id="density-1"] [data-density-band="desktop"],` +
+        `[data-density-switcher-id="density-1"] [data-density-band="tablet"]{display:none;}` +
+        `[data-density-switcher-id="density-1"]{display:none!important;}}`
+    );
+  });
+
+  it('draws nothing without a listing or when the listing came back empty', () => {
+    const noListing = drawPage({ context: {} });
+    expect(noListing.querySelector('[data-listing-density]')).toBeNull();
+
+    const empty = drawPage({ context: listingContext(0) });
+    expect(empty.querySelector('[data-listing-density]')).toBeNull();
+  });
+
+  it('draws the chosen glyph, the label and the accessible name', () => {
+    const container = drawPage({
+      densityProps: {
+        ...DENSITY_PROPS,
+        glyphStyle: 'number',
+        label: 'View',
+        ariaLabel: 'Grid density'
+      }
+    });
+
+    const root = container.querySelector('[data-listing-density]')!;
+    expect(root.getAttribute('role')).toBe('group');
+    expect(root.getAttribute('aria-label')).toBe('Grid density');
+    expect(root.getAttribute('data-part')).toBe('options');
+    expect(
+      container.querySelector('[data-listing-density-label]')?.textContent
+    ).toBe('View');
+    expect(optionsIn(container, 'desktop').map((b) => b.textContent)).toEqual([
+      '2',
+      '3',
+      '4'
+    ]);
+
+    const grid = drawPage();
+    const glyph = grid.querySelector('[data-density-band="desktop"] svg')!;
+    expect(glyph.getAttribute('data-part')).toBe('icon');
+    // The default is the outlined grid: a frame plus one inner line pair per
+    // extra column, so two columns draw one vertical and one horizontal line.
+    expect(glyph.querySelectorAll('rect')).toHaveLength(1);
+    expect(glyph.querySelectorAll('line')).toHaveLength(2);
+  });
+});
+
+describe('ListingDensityBlock on the canvas', () => {
+  it('draws only the band being edited, marked with the authored count', () => {
+    const container = drawPage({
+      isDesigner: true,
+      currentBreakpoint: 'mobile'
+    });
+
+    expect(countsIn(container, 'desktop')).toEqual([]);
+    expect(countsIn(container, 'mobile')).toEqual(['1', '2']);
+    expect(selectedIn(container, 'mobile')).toEqual(['2']);
+    expect(switcherCss(container)).toBe(
+      '[data-density-switcher-id="density-1"] [data-density-band]{display:contents;}'
+    );
+  });
+
+  it('keeps a click inert and the grid on its authored counts', () => {
+    const container = drawPage({ isDesigner: true });
+    const before = gridCss(container);
+
+    fireEvent.click(optionsIn(container, 'desktop')[0]);
+
+    expect(gridCss(container)).toBe(before);
+    expect(selectedIn(container, 'desktop')).toEqual(['4']);
+    expect(window.sessionStorage.getItem('pz-listing-density')).toBeNull();
+  });
+
+  it('ignores a choice made elsewhere', () => {
+    const container = drawPage({ isDesigner: true });
+
+    act(() => {
+      chooseDensity(LISTING_DENSITY_SCOPE, 'desktop', 2, false);
+    });
+
+    expect(gridCss(container)).not.toContain('min-width:1024px');
+  });
+
+  it('explains itself when the band being edited offers fewer than two counts', () => {
+    const container = drawPage({
+      isDesigner: true,
+      currentBreakpoint: 'mobile',
+      densityProps: { optionsDesktop: '2,3,4', optionsMobile: '2' }
+    });
+
+    expect(container.querySelector('[data-listing-density]')?.textContent).toBe(
+      'Density switcher (enter at least two column counts for this breakpoint)'
+    );
+  });
+});
+
+describe("the product grid's own switcher", () => {
+  const drawGridWithSwitcher = (properties: Record<string, unknown> = {}) =>
+    drawPage({
+      withSwitcher: false,
+      gridProps: {
+        ...GRID_PROPS,
+        showDensitySwitcher: true,
+        densityOptions: '2,3,4',
+        ...properties
+      }
+    });
+
+  it('keeps its attributes and parts, one mark per band', () => {
+    const container = drawGridWithSwitcher();
+    const root = container.querySelector('[data-product-grid-density]')!;
+
+    expect(root.getAttribute('data-part')).toBe('density');
+    expect(
+      container.querySelectorAll('[data-product-grid-density-option]')
+    ).toHaveLength(9);
+    // A tablet now marks the tablet count, not the phone's.
+    const pressed = (band: string) =>
+      Array.from(
+        container.querySelectorAll(`[data-density-band="${band}"] button`)
+      )
+        .filter((button) => button.getAttribute('aria-pressed') === 'true')
+        .map((button) =>
+          button.getAttribute('data-product-grid-density-option')
+        );
+    expect(pressed('desktop')).toEqual(['4']);
+    expect(pressed('tablet')).toEqual(['3']);
+    expect(pressed('mobile')).toEqual(['2']);
+    expect(
+      container
+        .querySelector('[data-density-band="desktop"] svg')
+        ?.getAttribute('data-part')
+    ).toBe('density-icon');
+  });
+
+  it('applies a choice inside its band rather than at every width', () => {
+    const container = drawGridWithSwitcher();
+    const desktopOptions = container.querySelectorAll<HTMLButtonElement>(
+      '[data-density-band="desktop"] button'
+    );
+
+    fireEvent.click(desktopOptions[0]);
+
+    expect(gridCss(container)).toBe(
+      GRID_DEFAULT_CSS +
+        `${DESKTOP}{[data-product-grid-id="grid-1"]{grid-template-columns:repeat(2,minmax(0,1fr));}}`
+    );
+  });
+
+  it('still draws the column-bar glyph by default', () => {
+    const container = drawGridWithSwitcher();
+    const glyph = container.querySelector('[data-density-band="desktop"] svg')!;
+
+    expect(glyph.getAttribute('fill')).toBe('currentColor');
+    expect(glyph.querySelectorAll('rect')).toHaveLength(2);
+  });
+});
+
+describe('a choice reaching the grid through the store', () => {
+  it('recomputes merchandising tiles for the chosen count', () => {
+    const tile = {
+      ...block('group', 'tile-1', {
+        role: { desktop: 'grid-insertion' },
+        insertPosition: 3,
+        insertColumnSpan: 2
+      })
+    } as Block;
+    const container = render(
+      <ThemePageContextProvider
+        value={listingContext(6) as unknown as Record<string, unknown>}
+      >
+        <ProductGridBlock
+          block={{
+            ...block('product-grid', 'grid-1', GRID_PROPS),
+            blocks: [tile]
+          }}
+          placeholderId="p"
+          sectionId="s"
+          isDesigner={false}
+          currentBreakpoint="desktop"
+        />
+      </ThemePageContextProvider>
+    ).container;
+
+    act(() => {
+      registerDensityOptions(LISTING_DENSITY_SCOPE, {
+        desktop: [2, 3, 4],
+        tablet: [2, 3],
+        mobile: [1, 2]
+      });
+      chooseDensity(LISTING_DENSITY_SCOPE, 'desktop', 2, false);
+    });
+
+    expect(gridCss(container)).toContain(
+      `${DESKTOP}{[data-product-grid-id="grid-1"]{grid-template-columns:repeat(2,minmax(0,1fr));}` +
+        '[data-product-grid-id="grid-1"] [data-product-grid-page="1"][data-product-grid-insert="0"]{grid-column:1/span 2;grid-row:2/span 1;}}'
+    );
+  });
+});
+
+describe('whose choice reaches which grid', () => {
+  const grid = (id: string, properties: Record<string, unknown> = {}) => (
+    <ProductGridBlock
+      block={block('product-grid', id, { ...GRID_PROPS, ...properties })}
+      placeholderId="p"
+      sectionId="s"
+      isDesigner={false}
+      currentBreakpoint="desktop"
+    />
+  );
+
+  const cssOf = (container: HTMLElement, id: string) =>
+    container.querySelector(`[data-product-grid-id="${id}"] > style`)
+      ?.innerHTML ?? '';
+
+  const desktopRule = (id: string, count: number) =>
+    `${DESKTOP}{[data-product-grid-id="${id}"]{grid-template-columns:repeat(${count},minmax(0,1fr));}}`;
+
+  const pressIn = (root: Element, count: number) =>
+    fireEvent.click(
+      root.querySelector(
+        `[data-density-band="desktop"] button[data-product-grid-density-option="${count}"], ` +
+          `[data-density-band="desktop"] button[data-listing-density-option="${count}"]`
+      )!
+    );
+
+  it("keeps a grid with its own switcher out of the page's choice, and the page out of its", () => {
+    const container = render(
+      <ThemePageContextProvider
+        value={listingContext() as unknown as Record<string, unknown>}
+      >
+        <ListingDensityBlock
+          block={block('listing-density', 'density-1', DENSITY_PROPS)}
+          placeholderId="p"
+          sectionId="s"
+          isDesigner={false}
+          currentBreakpoint="desktop"
+        />
+        {grid('own', { showDensitySwitcher: true, densityOptions: '2,3,4' })}
+        {grid('follower')}
+      </ThemePageContextProvider>
+    ).container;
+
+    pressIn(container.querySelector('[data-listing-density]')!, 2);
+
+    expect(cssOf(container, 'follower')).toContain(desktopRule('follower', 2));
+    expect(cssOf(container, 'own')).not.toContain('min-width:1024px');
+
+    pressIn(container.querySelector('[data-product-grid-density]')!, 3);
+
+    expect(cssOf(container, 'own')).toContain(desktopRule('own', 3));
+    expect(cssOf(container, 'follower')).toContain(desktopRule('follower', 2));
+    expect(cssOf(container, 'follower')).not.toContain(
+      desktopRule('follower', 3)
+    );
+  });
+
+  it('keeps two grids that carry their own switchers independent, as they always were', () => {
+    const container = render(
+      <ThemePageContextProvider
+        value={listingContext() as unknown as Record<string, unknown>}
+      >
+        {grid('a', { showDensitySwitcher: true, densityOptions: '2,3,4' })}
+        {grid('b', { showDensitySwitcher: true, densityOptions: '2,3,4' })}
+      </ThemePageContextProvider>
+    ).container;
+
+    pressIn(
+      container.querySelector('[data-density-switcher-id="a-density"]')!,
+      2
+    );
+
+    expect(cssOf(container, 'a')).toContain(desktopRule('a', 2));
+    expect(cssOf(container, 'b')).not.toContain('min-width:1024px');
+  });
+
+  it("marks the grid's own switcher in the server markup, per band", () => {
+    const html = renderToString(
+      <ThemePageContextProvider
+        value={listingContext() as unknown as Record<string, unknown>}
+      >
+        {grid('ssr', { showDensitySwitcher: true, densityOptions: '2,3,4' })}
+      </ThemePageContextProvider>
+    );
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    const selected = (band: string) =>
+      Array.from(
+        doc.querySelectorAll(
+          `[data-density-band="${band}"] [data-state~="selected"]`
+        )
+      ).map((button) =>
+        button.getAttribute('data-product-grid-density-option')
+      );
+
+    expect(selected('desktop')).toEqual(['4']);
+    expect(selected('tablet')).toEqual(['3']);
+    expect(selected('mobile')).toEqual(['2']);
+  });
+
+  it('hydrates the block and the grid without a mismatch, remembered choice or not', async () => {
+    window.sessionStorage.setItem(
+      'pz-listing-density',
+      JSON.stringify({ listing: { desktop: 2 } })
+    );
+
+    const page = (
+      <ThemePageContextProvider
+        value={listingContext() as unknown as Record<string, unknown>}
+      >
+        <ListingDensityBlock
+          block={block('listing-density', 'density-1', DENSITY_PROPS)}
+          placeholderId="p"
+          sectionId="s"
+          isDesigner={false}
+          currentBreakpoint="desktop"
+        />
+        {grid('own', { showDensitySwitcher: true, densityOptions: '2,3,4' })}
+        {grid('follower')}
+      </ThemePageContextProvider>
+    );
+    const container = document.createElement('div');
+    container.innerHTML = renderToString(page);
+    document.body.appendChild(container);
+
+    const recoverable: unknown[] = [];
+    const errors = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    await act(async () => {
+      hydrateRoot(container, page, {
+        onRecoverableError: (error) => recoverable.push(error)
+      });
+    });
+
+    const mismatches = errors.mock.calls.filter((call) =>
+      /hydrat/i.test(String(call[0]))
+    );
+    errors.mockRestore();
+
+    expect(recoverable).toEqual([]);
+    expect(mismatches).toEqual([]);
+    // And once mounted, the remembered choice has reached the follower.
+    expect(cssOf(container, 'follower')).toContain(desktopRule('follower', 2));
+    container.remove();
+  });
+});

package/src/blocks/block-renderer-registry.tsx

@@ -70,6 +70,7 @@ import ProductRecommendationsBlock from './product-recommendations-block';
 import PanelBlock from './panel-block';
 import AppliedFiltersBlock from './applied-filters-block';
 import ListingResultCountBlock from './listing-result-count-block';
+import ListingDensityBlock from './listing-density-block';
 import CountdownBlock from './countdown-block';
 import RegisterFormBlock from './register-form-block';
 import ForgotPasswordBlock from './forgot-password-block';
@@ -227,6 +228,7 @@ blockRendererRegistry.register('panel', PanelBlock);
 blockRendererRegistry.register('size-guide', PanelBlock);
 blockRendererRegistry.register('applied-filters', AppliedFiltersBlock);
 blockRendererRegistry.register('listing-result-count', ListingResultCountBlock);
+blockRendererRegistry.register('listing-density', ListingDensityBlock);
 blockRendererRegistry.register('countdown', CountdownBlock);
 
 // Auth and content