@akinon/pz-theme 2.0.164-rc.1 → 2.0.164

package/src/blocks/product-breadcrumb-block.tsx

@@ -3,7 +3,9 @@
 import React from 'react';
 import { ThemeLink as NextLink } from '../components/theme-link';
 import { getResponsiveValue, partAttrs } from '../utils';
+import { readThemeBreadcrumbSeparator } from '../utils/theme-settings-readers';
 import { useThemePageContext } from '../theme-page-context';
+import { useThemeSettingsContext } from '../theme-settings-context';
 import { BlockRendererProps } from './block-renderer-registry';
 import {
   DesignerPlaceholder,
@@ -70,13 +72,19 @@ const ProductBreadcrumbBlock = ({
 }: BlockRendererProps) => {
   const product = useThemeProduct();
   const pageContext = useThemePageContext();
+  const themeSettings = useThemeSettingsContext();
 
   const prop = (key: string, fallback: string) =>
     String(
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
     );
 
-  const separator = prop('separator', '/');
+  // An unset separator follows the theme's breadcrumb setting; a
+  // stored one (including '/') keeps winning, so saved blocks render as before.
+  const separator = prop(
+    'separator',
+    readThemeBreadcrumbSeparator(themeSettings) ?? '/'
+  );
   const ariaLabel = prop('ariaLabel', 'Breadcrumb');
   const homeLabel = prop('homeLabel', 'Home');
   const homeHref = prop('homeHref', '/');

package/src/blocks/social-glyphs.tsx

@@ -119,8 +119,39 @@ export const SOCIAL_GLYPHS: Record<string, React.ReactNode> = {
   )
 };
 
+/**
+ * Keys that draw another key's mark. The block pickers store `twitter`; the
+ * settings page's social networks store X as `x`. Kept out of
+ * `SOCIAL_GLYPHS` itself so that table stays the list of what the picker
+ * offers, with one path per mark.
+ */
+export const SOCIAL_GLYPH_ALIASES: Record<string, string> = {
+  x: 'twitter'
+};
+
+/**
+ * The glyph for a platform key, following aliases; `undefined` when the
+ * platform has no mark (callers choose their own fallback, usually `globe`).
+ */
+export const resolveSocialGlyph = (
+  platform: string
+): React.ReactNode | undefined => {
+  // Own keys only: a platform read from settings could be `constructor`.
+  const own = (table: Record<string, unknown>, key: string | undefined) =>
+    key !== undefined && Object.prototype.hasOwnProperty.call(table, key);
+
+  if (own(SOCIAL_GLYPHS, platform)) return SOCIAL_GLYPHS[platform];
+
+  const alias = own(SOCIAL_GLYPH_ALIASES, platform)
+    ? SOCIAL_GLYPH_ALIASES[platform]
+    : undefined;
+  return own(SOCIAL_GLYPHS, alias) ? SOCIAL_GLYPHS[alias as string] : undefined;
+};
+
 export const PLATFORM_LABELS: Record<string, string> = {
   twitter: 'Twitter / X',
+  // The settings page's key for X.
+  x: 'X',
   globe: 'Website',
   email: 'Email',
   phone: 'Phone'

package/src/blocks/social-icons-list-block.tsx

@@ -3,11 +3,17 @@
 import React from 'react';
 import { ThemeLink as NextLink } from '../components/theme-link';
 import { partAttrs } from '../utils';
+import { readThemeSocialNetworks } from '../utils/theme-settings-readers';
+import { useThemeSettingsContext } from '../theme-settings-context';
 import { BlockRendererProps } from './block-renderer-registry';
-import { DesignerPlaceholder } from './product-block-utils';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
 import { readResponsiveArray } from './responsive-array';
 import { IconGlyph } from './icon-source';
-import { SOCIAL_GLYPHS, platformLabel } from './social-glyphs';
+import {
+  SOCIAL_GLYPHS,
+  platformLabel,
+  resolveSocialGlyph
+} from './social-glyphs';
 
 /**
  * What the editor's social icon panel writes per entry
@@ -37,12 +43,29 @@ const clampSize = (value: unknown, fallback: number) => {
  */
 const isExternalHref = (href: string) => /^(https?:)?\/\//i.test(href);
 
+interface SocialIconEntry {
+  key: string;
+  platform: string;
+  href: string;
+  label: string;
+  size: number;
+  color: string;
+  /** A brand-uploaded icon as a safe image source; null draws the glyph. */
+  iconSrc: string | null;
+}
+
 /**
  * Functional chrome block: a row of social platform marks, each one a link.
  * Entries are authored through the `icons` property (platform, url, size,
  * colour); this block has no children, no captions and no layout properties —
  * it is `social-links` reduced to the icons.
  *
+ * With `useThemeSocialNetworks` on and no entries of its own, the
+ * block draws the theme's `socialNetworks` (settings page) instead, in their
+ * stored order. Opt-in because the block saves `icons: []` by default and the
+ * old settings page already stored networks: an automatic fallback would make
+ * blocks that render nothing today start drawing icons on existing sites.
+ *
  * NO BOX OF ITS OWN, deliberately. The entries are returned as siblings so
  * they are the direct children of the `[data-block-id]` wrapper the generated
  * stylesheet writes onto. The descriptor advertises `gap` as a block-level
@@ -50,7 +73,7 @@ const isExternalHref = (href: string) => /^(https?:)?\/\//i.test(href);
  * on the wrapper only reaches the icons if nothing of ours sits in between —
  * a list element here would collect the whole row into one flex item.
  *
- * Properties: icons.
+ * Properties: icons, useThemeSocialNetworks.
  * Parts: link, icon.
  */
 const SocialIconsListBlock = ({
@@ -64,7 +87,14 @@ const SocialIconsListBlock = ({
     currentBreakpoint
   );
 
-  const entries = items
+  const themeSettings = useThemeSettingsContext();
+  const themeNetworksOn = readToggle(
+    block.properties?.useThemeSocialNetworks,
+    currentBreakpoint,
+    false
+  );
+
+  const ownEntries: SocialIconEntry[] = items
     .filter((item) => item && (item.icon || item.link))
     .map((item, index) => {
       const platform = String(item.icon || 'globe').toLowerCase();
@@ -78,14 +108,34 @@ const SocialIconsListBlock = ({
         // 24 is what the panel seeds a new entry with, so an entry saved
         // before the size field existed matches the ones saved after it.
         size: clampSize(item.size, 24),
-        color: String(item.color || '')
+        color: String(item.color || ''),
+        iconSrc: null
       };
     });
 
+  // The block's own entries always win; the theme list only fills an empty
+  // block that asked for it. Hrefs and icons are validated by the reader.
+  const entries: SocialIconEntry[] =
+    ownEntries.length === 0 && themeNetworksOn
+      ? readThemeSocialNetworks(themeSettings).map((network, index) => ({
+          key: `${network.network}-${index}`,
+          platform: network.network,
+          href: network.href,
+          label: platformLabel(network.network),
+          size: 24,
+          color: '',
+          iconSrc: network.iconSrc
+        }))
+      : ownEntries;
+
   if (entries.length === 0) {
     return isDesigner ? (
       <DesignerPlaceholder
-        label="Social icons (no entries)"
+        label={
+          themeNetworksOn
+            ? 'Social icons (no theme social networks)'
+            : 'Social icons (no entries)'
+        }
         attribute="data-social-icons-list"
       />
     ) : null;
@@ -96,9 +146,23 @@ const SocialIconsListBlock = ({
       {entries.map((entry) => {
         // An unknown platform still draws something recognisable rather than
         // an empty box; the picker and this table are separate lists.
-        const glyph = SOCIAL_GLYPHS[entry.platform] || SOCIAL_GLYPHS.globe;
+        const glyph = resolveSocialGlyph(entry.platform) || SOCIAL_GLYPHS.globe;
 
-        const icon = (
+        // A brand's own icon is an <img>, never injected markup: SVG loaded
+        // as an image runs no script (see utils/svg-image-source.ts). It
+        // cannot follow `currentColor`, which is the price of that.
+        const icon = entry.iconSrc ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={entry.iconSrc}
+            width={entry.size}
+            height={entry.size}
+            alt=""
+            aria-hidden="true"
+            data-social-icon-image=""
+            {...partAttrs('icon')}
+          />
+        ) : (
           <IconGlyph
             glyph={glyph}
             size={entry.size}

package/src/blocks/text-block.tsx

@@ -7,7 +7,11 @@ import { getInnerRootInlineStyles, partAttrs } from '../utils';
 import { useThemeSettingsContext } from '../theme-settings-context';
 import { useLocalizeHref } from '../hooks/use-localize-href';
 import { localizeHtmlLinks } from '../utils/localize-href';
-import { useValueLocale } from '../utils/localized-value';
+// Rich-text element defaults from the theme settings.
+import {
+  THEME_RICH_TEXT_ATTRIBUTE,
+  hasThemeTextDefaults
+} from '../utils/theme-settings-css';
 
 const TextBlock = ({
   block,
@@ -15,7 +19,7 @@ const TextBlock = ({
 }: BlockRendererProps) => {
   const { locale } = useLocalization();
   const localize = useLocalizeHref();
-  const { defaultLocale } = useValueLocale();
+  const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
   const themeSettings = useThemeSettingsContext();
 
   const getLocalizedContent = (): string => {
@@ -31,10 +35,7 @@ const TextBlock = ({
 
     if (typeof value === 'object' && value !== null) {
       return (
-        value[locale] ||
-        (defaultLocale && value[defaultLocale]) ||
-        Object.values(value)[0] ||
-        ''
+        value[locale] || value[defaultLocale] || Object.values(value)[0] || ''
       );
     }
 
@@ -66,9 +67,17 @@ const TextBlock = ({
     );
   }, [block.styles, block.rowStyleKeys, themeSettings, currentBreakpoint]);
 
+  // Marks this root as the rich text the theme's element defaults
+  // (link/heading/text colours, managed typography) may style. Only while the
+  // theme sets one of those keys, so an untouched site's markup is unchanged.
+  const richTextAttrs = hasThemeTextDefaults(themeSettings)
+    ? { [THEME_RICH_TEXT_ATTRIBUTE]: '' }
+    : null;
+
   return (
     <div
       {...partAttrs('root')}
+      {...richTextAttrs}
       style={rootStyles}
       dangerouslySetInnerHTML={{ __html: html }}
     />