@akinon/pz-theme 2.0.117-rc.0 → 2.0.118-beta.0

package/src/blocks/sort-select-block.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { getResponsiveValue, partAttrs, resolveOption } from '../utils';
+import { useLocalizeHref } from '../hooks/use-localize-href';
 import { useOverlay } from '../hooks/use-overlay';
 import { BlockRendererProps } from './block-renderer-registry';
 import {
@@ -136,6 +137,7 @@ const SortSelectBlock = ({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const localize = useLocalizeHref();
 
   const label = String(
     getResponsiveValue(block.properties?.label, currentBreakpoint, 'Sort by')
@@ -288,7 +290,10 @@ const SortSelectBlock = ({
       if (pageQueryParam) params.delete(pageQueryParam);
       params.set(queryParam, value);
 
-      router.push(buildListingHref(pathname || listing?.path || '', params));
+      // Commerce's `listing.path` has no locale; `localize` adds the page's.
+      router.push(
+        localize(buildListingHref(pathname || listing?.path || '', params))
+      );
     },
     [
       isDesigner,
@@ -297,7 +302,8 @@ const SortSelectBlock = ({
       queryParam,
       router,
       pathname,
-      listing?.path
+      listing?.path,
+      localize
     ]
   );
 

package/src/blocks/store-locator-block.tsx

@@ -14,6 +14,7 @@ import {
 import { useGetRetailStoreStockMutation } from '@akinon/next/data/client/product';
 import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
+import { useLocalizeHref } from '../hooks/use-localize-href';
 import { neutralizeStyleTagBreakout } from '../utils/css-safety';
 import { useOverlay } from '../hooks/use-overlay';
 import { formatDecimal } from './commerce-format';
@@ -368,6 +369,7 @@ const StoreLocatorBlock = ({
     : 'center';
 
   const { locale } = useLocalization();
+  const localize = useLocalizeHref();
   const { data, isLoading } = useGetStoresQuery(undefined as never);
   const [selectedCity, setSelectedCity] = useState(ALL_CITIES);
 
@@ -845,7 +847,7 @@ const StoreLocatorBlock = ({
   // on — no product on the page, or no city picked. Saying so is the honest
   // alternative to painting every store with a guess.
   const showNotice = productMode && Boolean(availabilityNotice) && !stockQuery;
-  const helpHref = safeHelpHref(availabilityHelpUrl);
+  const helpHref = localize(safeHelpHref(availabilityHelpUrl));
 
   /**
    * The same route the unknown marker carries, offered where there is no

package/src/blocks/text-block.tsx

@@ -5,12 +5,15 @@ import React, { useMemo } from 'react';
 import { BlockRendererProps } from './block-renderer-registry';
 import { getInnerRootInlineStyles, partAttrs } from '../utils';
 import { useThemeSettingsContext } from '../theme-settings-context';
+import { useLocalizeHref } from '../hooks/use-localize-href';
+import { localizeHtmlLinks } from '../utils/localize-href';
 
 const TextBlock = ({
   block,
   currentBreakpoint = 'desktop'
 }: BlockRendererProps) => {
   const { locale } = useLocalization();
+  const localize = useLocalizeHref();
   const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
   const themeSettings = useThemeSettingsContext();
 
@@ -39,6 +42,10 @@ const TextBlock = ({
   };
 
   const content = getLocalizedContent();
+  const html = useMemo(
+    () => localizeHtmlLinks(content, localize),
+    [content, localize]
+  );
 
   /**
    * Only the values the generated stylesheet cannot produce. Everything else
@@ -59,7 +66,7 @@ const TextBlock = ({
     <div
       {...partAttrs('root')}
       style={rootStyles}
-      dangerouslySetInnerHTML={{ __html: content }}
+      dangerouslySetInnerHTML={{ __html: html }}
     />
   );
 };

package/src/blocks/variant-selector-block.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import React from 'react';
-import NextLink from 'next/link';
+import { ThemeLink as NextLink } from '../components/theme-link';
 import { useRouter } from 'next/navigation';
 import { useSession } from 'next-auth/react';
 import { useAddStockAlertMutation } from '@akinon/next/data/client/wishlist';
 import { getResponsiveValue, partAttrs } from '../utils';
+import { useLocalizeHref } from '../hooks/use-localize-href';
 import { useOverlay } from '../hooks/use-overlay';
 import { useDragScroll } from '../hooks/use-drag-scroll';
 import { BlockRendererProps } from './block-renderer-registry';
@@ -235,6 +236,7 @@ const VariantSelectorBlock = ({
 }: BlockRendererProps) => {
   const product = useThemeProduct();
   const router = useRouter();
+  const localize = useLocalizeHref();
   const { data: session, status: sessionStatus } = useSession();
   const [addStockAlert, { isLoading: isAlertSubmitting }] =
     useAddStockAlertMutation();
@@ -1182,7 +1184,9 @@ const VariantSelectorBlock = ({
                   const url = event.target.value;
                   // Designer clicks must never navigate the preview frame.
                   if (isDesigner || !url) return;
-                  router.push(url);
+                  // Same product urls the option links render, and the same
+                  // locale they get from ThemeLink.
+                  router.push(localize(url));
                 }}
                 style={{
                   width: '100%',

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

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import NextLink from 'next/link';
+import { ThemeLink as NextLink } from '../components/theme-link';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 import { readToggle } from './product-block-utils';

package/src/components/__tests__/theme-link.test.tsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+// zsa-zsa-zsu's setup: Turkish is the hidden default, English lives under /en.
+const TURKISH = {
+  locale: 'tr',
+  defaultLocaleValue: 'tr',
+  localeUrlStrategy: 'hide-default-locale'
+};
+let mockLocalization: Record<string, unknown> = { ...TURKISH };
+
+jest.mock('@akinon/next/hooks', () => ({
+  __esModule: true,
+  useLocalization: () => mockLocalization
+}));
+
+// The matcher the core builds for that setup: only `en` is ever a segment.
+jest.mock('@akinon/next/utils', () => ({
+  __esModule: true,
+  ...jest.requireActual('@akinon/next/utils'),
+  urlLocaleMatcherRegex: /^\/(en)(?=\/|$)/
+}));
+
+import { ThemeLink } from '../theme-link';
+
+const hrefOf = (element: React.ReactElement) =>
+  render(element).container.querySelector('a')?.getAttribute('href');
+
+beforeEach(() => {
+  mockLocalization = { ...TURKISH };
+});
+
+describe('ThemeLink', () => {
+  it('leaves a storefront path unprefixed on the default locale', () => {
+    expect(
+      hrefOf(<ThemeLink href="/yatak-odasi/">Yatak odası</ThemeLink>)
+    ).toBe('/yatak-odasi/');
+  });
+
+  it('prefixes a storefront path on an English page', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+
+    expect(hrefOf(<ThemeLink href="/yatak-odasi/">Bedroom</ThemeLink>)).toBe(
+      '/en/yatak-odasi/'
+    );
+    expect(hrefOf(<ThemeLink href="/en/yatak-odasi/">Bedroom</ThemeLink>)).toBe(
+      '/en/yatak-odasi/'
+    );
+  });
+
+  it.each([
+    ['#reviews'],
+    ['?page=2'],
+    ['https://example.com/x'],
+    ['//cdn.example.com/x']
+  ])('passes %p through on an English page', (href) => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+
+    expect(hrefOf(<ThemeLink href={href}>x</ThemeLink>)).toBe(href);
+  });
+
+  it('passes a UrlObject href through unchanged', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+
+    // The next/link mock renders an object href as its pathname.
+    expect(hrefOf(<ThemeLink href={{ pathname: '/x' }}>x</ThemeLink>)).toBe(
+      '/x'
+    );
+  });
+
+  it('leaves the core OAuth route unprefixed on an English page', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+
+    expect(hrefOf(<ThemeLink href="/google/login/">Google</ThemeLink>)).toBe(
+      '/google/login/'
+    );
+  });
+
+  it('leaves a file on this site unprefixed, the way the middleware does', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+
+    expect(hrefOf(<ThemeLink href="/files/kvkk.pdf">KVKK</ThemeLink>)).toBe(
+      '/files/kvkk.pdf'
+    );
+  });
+
+  /**
+   * The storefront's own address reaches the rules as `NEXT_PUBLIC_URL`, which
+   * Next inlines into the server render and the client bundle alike — so a
+   * merchant's pasted full URL reads as a path on both sides, and the anchor
+   * the shopper sees is the same one the server sent.
+   */
+  describe('with the site address configured', () => {
+    const configured = process.env.NEXT_PUBLIC_URL;
+
+    beforeEach(() => {
+      process.env.NEXT_PUBLIC_URL = 'https://www.zsazsazsu.com.tr';
+    });
+
+    afterAll(() => {
+      process.env.NEXT_PUBLIC_URL = configured;
+    });
+
+    it('turns a pasted full URL into the localized path', () => {
+      mockLocalization = { ...TURKISH, locale: 'en' };
+
+      expect(
+        hrefOf(
+          <ThemeLink href="https://www.zsazsazsu.com.tr/yeni-urunler/">
+            New in
+          </ThemeLink>
+        )
+      ).toBe('/en/yeni-urunler/');
+    });
+
+    it('keeps that URL as the merchant wrote it on the Turkish page', () => {
+      expect(
+        hrefOf(
+          <ThemeLink href="https://www.zsazsazsu.com.tr/yeni-urunler/">
+            Yeni ürünler
+          </ThemeLink>
+        )
+      ).toBe('https://www.zsazsazsu.com.tr/yeni-urunler/');
+    });
+
+    it('leaves a URL somewhere else alone on an English page', () => {
+      mockLocalization = { ...TURKISH, locale: 'en' };
+
+      expect(
+        hrefOf(
+          <ThemeLink href="https://lookbook.example.com/x">Lookbook</ThemeLink>
+        )
+      ).toBe('https://lookbook.example.com/x');
+    });
+  });
+
+  it('keeps every other prop and forwards a ref to the anchor', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+    const ref = React.createRef<HTMLAnchorElement>();
+
+    const { container } = render(
+      <ThemeLink
+        ref={ref}
+        href="/x"
+        className="c"
+        target="_blank"
+        data-part="link"
+      >
+        label
+      </ThemeLink>
+    );
+    const anchor = container.querySelector('a') as HTMLAnchorElement;
+
+    expect(anchor).toHaveAttribute('class', 'c');
+    expect(anchor).toHaveAttribute('target', '_blank');
+    expect(anchor).toHaveAttribute('data-part', 'link');
+    expect(anchor).toHaveTextContent('label');
+    expect(ref.current).toBe(anchor);
+  });
+
+  it('is a forwardRef component, so a ref survives on React 18', () => {
+    // This jest runs React 19, where `ref` is a plain prop and would reach the
+    // anchor through `...rest` even without forwardRef; the brands run React 18,
+    // where it would be dropped. So the wrapper type itself is what is checked.
+    expect((ThemeLink as unknown as { $$typeof: symbol }).$$typeof).toBe(
+      Symbol.for('react.forward_ref')
+    );
+  });
+});

package/src/components/theme-link.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import React, { forwardRef } from 'react';
+import NextLink from 'next/link';
+import { useLocalizeHref } from '../hooks/use-localize-href';
+
+type ThemeLinkProps = React.ComponentPropsWithoutRef<typeof NextLink>;
+
+/**
+ * `next/link` for every link a block renders, with the active locale on it.
+ *
+ * Content hrefs are stored without a locale, so on an English page a plain
+ * `next/link` pointed at the Turkish site — and prefetched it, which switched
+ * the shopper's `pz-locale` cookie to Turkish behind their back. Only a string
+ * root-relative href is rewritten (see `localizeHref`); hash, query, external
+ * and `UrlObject` hrefs reach `next/link` exactly as given.
+ *
+ * Rendered through `next/link` rather than `@akinon/next`'s `Link` so a ref
+ * still reaches the anchor, and so links and imperative navigations share one
+ * rule set.
+ */
+export const ThemeLink = forwardRef<HTMLAnchorElement, ThemeLinkProps>(
+  function ThemeLink({ href, ...rest }, ref) {
+    const localize = useLocalizeHref();
+
+    return (
+      <NextLink
+        ref={ref}
+        href={typeof href === 'string' ? localize(href) : href}
+        {...rest}
+      />
+    );
+  }
+);
+
+export default ThemeLink;

package/src/custom/README-sections.md

@@ -290,6 +290,12 @@ section's widget still answers for the previous collection, and the snapshot is
 the right thing to draw. A section that fetches its own widget on the canvas
 should do so only when `dataSourceSaved` is `true`.
 
+**The addresses in commerce data have no locale.** A product's
+`absolute_url` and a menu node's `url` are bare paths (`/yatak-odasi/`) on
+the English storefront too. Run each one through `useLocalizeHref()` where
+you read it, or render it with `ThemeLink`. See "Links and the page's
+language" in [README.md](./README.md).
+
 ## Parts must live on YOUR markup
 
 Part rules are generated with an ownership guard that excludes anything inside a

package/src/custom/README.md

@@ -144,6 +144,55 @@ guessed, and the message says which: a custom component instead of a host
 element, a bare expression with no element, and an ambiguous multi-child
 element. `type=` is the explicit escape.
 
+The authored text is written in the store's default language. Its other
+languages go in `translations`:
+
+```tsx
+<ThemeEditable name="label" translations={{ en: 'MENU' }}>
+  <span>MENÜ</span>
+</ThemeEditable>
+```
+
+The editor is told `MENÜ` only. An English page shows `MENU` for as long as
+the field still says `MENÜ`, including the copy the editor seeds when the
+block is placed. Once the merchant types their own text, it shows as typed.
+This is the same rule as a per-language `useThemeSetting` default (below); a
+setting read for the same key, such as an accessible name, can share one
+constant with it.
+
+## Links and the page's language
+
+Storefront paths are stored and authored without a locale: `/yatak-odasi/`,
+never `/en/yatak-odasi/`. On an English page that bare path is the Turkish
+site, so a link that goes out as written takes the shopper out of English. A
+visible `next/link` also prefetches it, which makes the middleware set
+`pz-locale=tr`, and every request after that comes back Turkish. You do not
+write the locale yourself; there are three places it goes on for you:
+
+| What you render | What to use |
+|---|---|
+| The `<a>` that `ThemeEditable` wraps | Nothing: the locale is added to its href, whether the merchant set it or you did |
+| Any other link | `ThemeLink` in place of `next/link`, with the same props |
+| A bare string: a plain `<a>`, `router.push`, a url read off commerce data | `const localize = useLocalizeHref();` then `localize(url)` |
+
+All three come from `@akinon/pz-theme/src/custom`. An `<a>` nested deeper
+inside a `ThemeEditable` is not touched — that one is a link of yours, so it
+takes the row it belongs to above.
+
+A full URL to this same storefront counts as a path, `www.` or not: merchants
+paste the address bar, and `https://www.zsazsazsu.com.tr/yeni-urunler/` on an
+English page becomes `/en/yeni-urunler/` — which also lets the router take it
+without a page load. Addresses with no localized copy stay as they are: `/api`
+and `/_next`, and anything ending in a file (`/files/kvkk.pdf`,
+`/manifest.json`). So do external, `#hash`, `?query` and empty hrefs, and the
+OAuth `/{provider}/login/` routes.
+
+No locale is added when the URL strategy hides the page's own: the default
+locale under `hide-default-locale`, every locale under `subdomain` and
+`hide-all-locales`. To compare an address with the page's own, localize the
+stored side rather than stripping the locale off the current one:
+`localize(node.url) === pathname`.
+
 ## `useThemeSetting`
 
 For values with no on-screen representation — how many products to fetch, which
@@ -153,6 +202,28 @@ it every variation becomes a separate block in the picker.
 React's own rule that hooks are called unconditionally is doing useful work
 here: the language enforces that the declaration set is static.
 
+A `text` default can be written per language, and the hook still returns one
+string, the entry for the page's locale:
+
+```tsx
+const label = useThemeSetting('label', {
+  type: 'text',
+  label: 'Label when closed',
+  default: { tr: 'MENÜ', en: 'MENU' }
+});
+```
+
+The editor is only told the default language's entry, so a static `settings`
+declaration keeps that one plain string (`defaultValue: 'MENÜ'`). The
+translation applies for as long as the stored value is still that default,
+including the copy the editor seeds when the block is placed. Once the
+merchant types their own text, it shows as typed in every language. A text
+the merchant can translate themselves needs the `localetext` control, which a
+custom setting cannot declare yet: this package refuses the type (see
+`collect.ts`) because the editor stores such a value as a locale map with no
+breakpoint key, and the editor refuses it in a custom catalog for the same
+reason.
+
 ## `ThemeSlot`
 
 A merchant-fillable region. A block may open several, and each is filled

package/src/custom/__tests__/custom-entry-exports.test.tsx

@@ -7,6 +7,8 @@ import * as chromeMode from '../../chrome/chrome-mode';
 import * as chromeModeHook from '../../chrome/use-chrome-mode';
 import * as blockContext from '../block-context';
 import * as overlay from '../../hooks/use-overlay';
+import * as themeLink from '../../components/theme-link';
+import * as localizeHrefHook from '../../hooks/use-localize-href';
 import { resetCustomCollection } from '../collect';
 import { CustomSectionHost } from '../section-host';
 import type { Section } from '../../theme-section';
@@ -20,7 +22,9 @@ import {
   defineCustomSection,
   setChromeMode,
   useChromeMode,
+  ThemeLink,
   useCustomBlockContext,
+  useLocalizeHref,
   useOverlay
 } from '../index';
 import type {
@@ -248,3 +252,12 @@ describe('useOverlay from the custom entry', () => {
     expect(screen.getByRole('dialog').hasAttribute('aria-modal')).toBe(false);
   });
 });
+
+describe('the custom entry exports ZERO-5100 added', () => {
+  // A custom block's links need the page's locale, and the barrel is the one
+  // path a brand developer imports from, so the locale helpers sit there too.
+  it('re-exports the locale-aware link and hook rather than second copies', () => {
+    expect(ThemeLink).toBe(themeLink.ThemeLink);
+    expect(useLocalizeHref).toBe(localizeHrefHook.useLocalizeHref);
+  });
+});

package/src/custom/__tests__/theme-editable.test.tsx

@@ -255,6 +255,185 @@ describe('ThemeEditable', () => {
     });
   });
 
+  /**
+   * ZERO-5100: the page's locale goes on the link here, so a developer writing
+   * a custom block never has to. Turkish is the hidden default and English
+   * lives under /en, which is zsa-zsa-zsu's setup.
+   */
+  describe('links carry the page’s locale', () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const hooks = require('@akinon/next/hooks');
+    let localizationSpy: jest.SpyInstance;
+
+    const onPage = (locale: string) => {
+      const original = hooks.useLocalization;
+      localizationSpy = jest
+        .spyOn(hooks, 'useLocalization')
+        .mockImplementation(() => ({
+          ...original(),
+          locale,
+          defaultLocaleValue: 'tr',
+          localeUrlStrategy: 'hide-default-locale'
+        }));
+    };
+
+    afterEach(() => localizationSpy?.mockRestore());
+
+    const hrefOf = (container: HTMLElement) =>
+      (container.querySelector('a') as HTMLAnchorElement).getAttribute('href');
+
+    it('prefixes the merchant’s destination on an English page', () => {
+      onPage('en');
+      const { container } = renderInBlock(
+        <ThemeEditable name="cta">
+          <a href="/sale">Shop now</a>
+        </ThemeEditable>,
+        { properties: { ctaHref: { desktop: '/new-season/' } } }
+      );
+
+      expect(hrefOf(container)).toBe('/en/new-season/');
+    });
+
+    it('prefixes the authored destination when the merchant set none', () => {
+      onPage('en');
+      const { container } = renderInBlock(
+        <ThemeEditable name="cta">
+          <a href="/sale">Shop now</a>
+        </ThemeEditable>
+      );
+
+      expect(hrefOf(container)).toBe('/en/sale');
+    });
+
+    it('prefixes an <a> kept as a text field too', () => {
+      onPage('en');
+      const { container } = renderInBlock(
+        <ThemeEditable name="title" type="text">
+          <a href="/sale">Shop now</a>
+        </ThemeEditable>
+      );
+
+      expect(hrefOf(container)).toBe('/en/sale');
+    });
+
+    it('leaves external, hash and empty destinations alone', () => {
+      onPage('en');
+
+      for (const destination of ['https://example.com/', '#top', '']) {
+        const { container, unmount } = renderInBlock(
+          <ThemeEditable name="cta">
+            <a href="/sale">Shop now</a>
+          </ThemeEditable>,
+          { properties: { ctaHref: { desktop: destination } } }
+        );
+
+        expect(hrefOf(container)).toBe(destination);
+        unmount();
+      }
+    });
+
+    it('adds nothing on the default-locale page', () => {
+      onPage('tr');
+      const { container } = renderInBlock(
+        <ThemeEditable name="cta">
+          <a href="/sale">Shop now</a>
+        </ThemeEditable>,
+        { properties: { ctaHref: { desktop: '/new-season/' } } }
+      );
+
+      expect(hrefOf(container)).toBe('/new-season/');
+    });
+
+    it('leaves the stored value alone', () => {
+      onPage('en');
+      const properties = { ctaHref: { desktop: '/new-season/' } };
+      renderInBlock(
+        <ThemeEditable name="cta">
+          <a href="/sale">Shop now</a>
+        </ThemeEditable>,
+        { properties }
+      );
+
+      expect(properties.ctaHref.desktop).toBe('/new-season/');
+    });
+  });
+
+  /**
+   * The author's own text in the store's other languages. The child stays the
+   * default language's copy, which is what the editor is told and seeds.
+   */
+  describe('translations of the authored text', () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const hooks = require('@akinon/next/hooks');
+    let localizationSpy: jest.SpyInstance;
+
+    const onPage = (locale: string) => {
+      const original = hooks.useLocalization;
+      localizationSpy = jest
+        .spyOn(hooks, 'useLocalization')
+        .mockImplementation(() => ({
+          ...original(),
+          locale,
+          defaultLocaleValue: 'tr',
+          locales: [{ value: 'tr' }, { value: 'en' }]
+        }));
+    };
+
+    afterEach(() => localizationSpy?.mockRestore());
+
+    const trigger = (properties?: Record<string, unknown>) =>
+      renderInBlock(
+        <ThemeEditable name="label" translations={{ en: 'MENU' }}>
+          <span>MENÜ</span>
+        </ThemeEditable>,
+        properties ? { properties } : {}
+      ).container.querySelector('span')?.textContent;
+
+    it('shows the page’s language when nothing is stored', () => {
+      onPage('en');
+      expect(trigger()).toBe('MENU');
+    });
+
+    it('translates the copy the editor seeded when the block was placed', () => {
+      onPage('en');
+      expect(trigger({ label: { desktop: 'MENÜ' } })).toBe('MENU');
+    });
+
+    it('shows the merchant’s own text as typed', () => {
+      onPage('en');
+      expect(trigger({ label: { desktop: 'Kategoriler' } })).toBe(
+        'Kategoriler'
+      );
+    });
+
+    it('keeps the authored text on the default-language page', () => {
+      onPage('tr');
+      expect(trigger()).toBe('MENÜ');
+    });
+
+    it('keeps the authored text for a language with no translation', () => {
+      onPage('de');
+      expect(trigger()).toBe('MENÜ');
+    });
+
+    it('reports the default language’s text to the editor', () => {
+      onPage('en');
+      const collect = { setting: jest.fn(), slot: jest.fn() };
+
+      renderInBlock(
+        <ThemeEditable name="label" translations={{ en: 'MENU' }}>
+          <span>MENÜ</span>
+        </ThemeEditable>,
+        { collect }
+      );
+
+      expect(collect.setting.mock.calls[0][0]).toMatchObject({
+        key: 'label',
+        defaultValue: { desktop: 'MENÜ' }
+      });
+    });
+  });
+
   describe('the authored JSX is the default', () => {
     it('renders the authored content when the block has no properties', () => {
       const { container } = renderInBlock(