1a:I[52397,["/_next/static/immutable/chunks/2igrrcde_vc4p.js","/_next/static/immutable/chunks/0n36v-3cexsuq.js","/_next/static/immutable/chunks/3-6-6opb2l_5p.js","/_next/static/immutable/chunks/41t6fga463v64.js"],"Workbench"] 1b:T167e,import type { ComponentConfig } from "@puckeditor/core"; /** * Breadcrumbs — the trail from the home page to the current page, marked up as an * ordered list with the last item announced as the current page. * Register: `BreadcrumbsBlock: breadcrumbsBlock` in puck.config.tsx. */ type Separator = "chevron" | "slash" | "arrow"; export type BreadcrumbsProps = { items: { label: string; href: string }[]; separator: Separator; homeIcon: "yes" | "no"; background: "white" | "subtle"; }; const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"; function Sep({ kind }: { kind: Separator }) { if (kind === "slash") { return ( ); } if (kind === "arrow") { return ( ); } return ( ); } export const breadcrumbsBlock: ComponentConfig = { label: "Breadcrumbs", fields: { items: { type: "array", label: "Trail", min: 1, max: 8, getItemSummary: (item) => item?.label || "Page", defaultItemProps: { label: "New page", href: "/" }, arrayFields: { label: { type: "text", label: "Label" }, href: { type: "text", label: "Link", metadata: { help: "Leave blank on the last item: it's the page you're on, so it isn't a link." } }, }, metadata: { help: "Start with Home and end with the current page. The last item is announced to screen readers as the current page." }, }, separator: { type: "select", label: "Separator", options: [ { label: "Chevron ›", value: "chevron" }, { label: "Slash /", value: "slash" }, { label: "Arrow →", value: "arrow" }, ], metadata: { help: "Decoration only. Screen readers skip it and announce the list position instead." }, }, homeIcon: { type: "radio", label: "Home icon", options: [ { label: "Show", value: "yes" }, { label: "Hide", value: "no" }, ], metadata: { help: "Shows a house icon in place of the first item's text. The text is still read by screen readers." }, }, background: { type: "radio", label: "Background", options: [ { label: "White", value: "white" }, { label: "Subtle", value: "subtle" }, ], }, }, defaultProps: { items: [ { label: "Home", href: "/" }, { label: "Programs", href: "/programs" }, { label: "Youth & teens", href: "/programs/youth" }, { label: "Summer Day Camp 2027", href: "" }, ], separator: "chevron", homeIcon: "yes", background: "white", }, render: ({ items, separator, homeIcon, background }) => { const trail = (items ?? []).filter((i) => i?.label); if (!trail.length) return <>; const kind: Separator = separator || "chevron"; const last = trail.length - 1; return (

{i > 0 ? : null} {isLast ? ( {item.label} ) : ( {showIcon ? ( <> {item.label} ) : ( item.label )} )}

); }, }; 1c:Ta8b8,

import type { ComponentConfig } from "@puckeditor/core";

/**
 * Breadcrumbs — the trail from the home page to the current page, marked up as an
 * ordered list with the last item announced as the current page.
 * Register: `BreadcrumbsBlock: breadcrumbsBlock` in puck.config.tsx.
 */

type Separator = "chevron" | "slash" | "arrow";

export type BreadcrumbsProps = {
  items: { label: string; href: string }[];
  separator: Separator;
  homeIcon: "yes" | "no";
  background: "white" | "subtle";
};

const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600";

function Sep({ kind }: { kind: Separator }) {
  if (kind === "slash") {
    return (
      <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="size-5 shrink-0 text-neutral-300">
        <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
      </svg>
    );
  }
  if (kind === "arrow") {
    return (
      <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="size-4 shrink-0 text-neutral-400">
        <path fillRule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.64l-3.22-3.22a.75.75 0 1 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06l3.22-3.22H3.75A.75.75 0 0 1 3 10Z" clipRule="evenodd" />
      </svg>
    );
  }
  return (
    <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="size-5 shrink-0 text-neutral-400">
      <path fillRule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clipRule="evenodd" />
    </svg>
  );
}

export const breadcrumbsBlock: ComponentConfig<BreadcrumbsProps> = {
  label: "Breadcrumbs",
  fields: {
    items: {
      type: "array",
      label: "Trail",
      min: 1,
      max: 8,
      getItemSummary: (item) => item?.label || "Page",
      defaultItemProps: { label: "New page", href: "/" },
      arrayFields: {
        label: { type: "text", label: "Label" },
        href: { type: "text", label: "Link", metadata: { help: "Leave blank on the last item: it's the page you're on, so it isn't a link." } },
      },
      metadata: { help: "Start with Home and end with the current page. The last item is announced to screen readers as the current page." },
    },
    separator: {
      type: "select",
      label: "Separator",
      options: [
        { label: "Chevron ›", value: "chevron" },
        { label: "Slash /", value: "slash" },
        { label: "Arrow →", value: "arrow" },
      ],
      metadata: { help: "Decoration only. Screen readers skip it and announce the list position instead." },
    },
    homeIcon: {
      type: "radio",
      label: "Home icon",
      options: [
        { label: "Show", value: "yes" },
        { label: "Hide", value: "no" },
      ],
      metadata: { help: "Shows a house icon in place of the first item's text. The text is still read by screen readers." },
    },
    background: {
      type: "radio",
      label: "Background",
      options: [
        { label: "White", value: "white" },
        { label: "Subtle", value: "subtle" },
      ],
    },
  },
  defaultProps: {
    items: [
      { label: "Home", href: "/" },
      { label: "Programs", href: "/programs" },
      { label: "Youth & teens", href: "/programs/youth" },
      { label: "Summer Day Camp 2027", href: "" },
    ],
    separator: "chevron",
    homeIcon: "yes",
    background: "white",
  },
  render: ({ items, separator, homeIcon, background }) => {
    const trail = (items ?? []).filter((i) => i?.label);
    if (!trail.length) return <></>;
    const kind: Separator = separator || "chevron";
    const last = trail.length - 1;
    return (
      <div className={`px-4 py-2 sm:px-6 lg:px-8 ${background === "subtle" ? "border-b border-neutral-200 bg-neutral-50" : "bg-white"}`}>
        <nav aria-label="Breadcrumb" className="mx-auto max-w-7xl">
          <ol role="list" className="flex flex-wrap items-center gap-x-1 text-sm">
            {trail.map((item, i) => {
              const isLast = i === last;
              const showIcon = i === 0 && homeIcon !== "no" && !isLast;
              return (
                <li key={`${item.label}-${i}`} className="flex min-w-0 items-center gap-x-1">
                  {i > 0 ? <Sep kind={kind} /> : null}
                  {isLast ? (
                    <a aria-current="page" href={item.href || undefined} className={`inline-flex min-h-11 items-center rounded px-1 font-semibold break-words text-neutral-950 ${focusRing}`}>
                      {item.label}
                    </a>
                  ) : (
                    <a
                      href={item.href || "#"}
                      className={`inline-flex min-h-11 items-center gap-1.5 rounded px-1 break-words text-neutral-600 underline-offset-4 transition hover:text-indigo-700 hover:underline ${focusRing}`}
                    >
                      {showIcon ? (
                        <>
                          <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="size-5 shrink-0">
                            <path fillRule="evenodd" d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z" clipRule="evenodd" />
                          </svg>
                          <span className="sr-only">{item.label}</span>
                        </>
                      ) : (
                        item.label
                      )}
                    </a>
                  )}
                </li>
              );
            })}
          </ol>
        </nav>
      </div>
    );
  },
};

1d:T1d70,# Add the "Breadcrumbs" block to this P1 project Add a Puck component from P1 Blocks ({origin}/blocks/breadcrumbs) to this Pantheon Content Publisher (P1) Next.js project. The trail from the home page to the current page, with the last step announced as the current page. ## Steps 1. Create `components/puck/breadcrumbs-block.tsx` with the exact file contents below. If `components/puck/` doesn't exist, find the folder where this project keeps its Puck components (look at the imports in `puck.config.tsx`) and put it there. 2. In `puck.config.tsx`, import it: `import { breadcrumbsBlock } from "./components/puck/breadcrumbs-block";` 3. Register it under `components` as `BreadcrumbsBlock: breadcrumbsBlock`. 4. Add `"BreadcrumbsBlock"` to the best-fitting entry in `categories` (this block's library category is "Civic & utility"). Create a category only if none fits. 5. Run the project's type check (usually `pnpm typecheck`) and resolve anything project-specific. 6. If `package.json` has a `sync:registry` script, tell the user it must run (or that CI will run it) before the new component appears in the P1 editor. ## Rules - Do not add dependencies. The block is self-contained by design: one type-only import from `@puckeditor/core`, Tailwind v4 classes, no client JavaScript. - Keep the files as-is unless the user asks for changes. The accent color is `indigo-*`; if the project has brand colors, offer to swap them with a find-and-replace on `indigo-`. - Images are plain `imageUrl` + `imageAlt` text fields. If this project defines a P1 media-library field (search for `"p1-media"`), offer to switch to it. - Don't change prop names in `defaultProps`. Content editors' saved pages depend on them. ## File: `components/puck/breadcrumbs-block.tsx` ```tsx import type { ComponentConfig } from "@puckeditor/core"; /** * Breadcrumbs — the trail from the home page to the current page, marked up as an * ordered list with the last item announced as the current page. * Register: `BreadcrumbsBlock: breadcrumbsBlock` in puck.config.tsx. */ type Separator = "chevron" | "slash" | "arrow"; export type BreadcrumbsProps = { items: { label: string; href: string }[]; separator: Separator; homeIcon: "yes" | "no"; background: "white" | "subtle"; }; const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"; function Sep({ kind }: { kind: Separator }) { if (kind === "slash") { return ( ); } if (kind === "arrow") { return ( ); } return ( ); } export const breadcrumbsBlock: ComponentConfig = { label: "Breadcrumbs", fields: { items: { type: "array", label: "Trail", min: 1, max: 8, getItemSummary: (item) => item?.label || "Page", defaultItemProps: { label: "New page", href: "/" }, arrayFields: { label: { type: "text", label: "Label" }, href: { type: "text", label: "Link", metadata: { help: "Leave blank on the last item: it's the page you're on, so it isn't a link." } }, }, metadata: { help: "Start with Home and end with the current page. The last item is announced to screen readers as the current page." }, }, separator: { type: "select", label: "Separator", options: [ { label: "Chevron ›", value: "chevron" }, { label: "Slash /", value: "slash" }, { label: "Arrow →", value: "arrow" }, ], metadata: { help: "Decoration only. Screen readers skip it and announce the list position instead." }, }, homeIcon: { type: "radio", label: "Home icon", options: [ { label: "Show", value: "yes" }, { label: "Hide", value: "no" }, ], metadata: { help: "Shows a house icon in place of the first item's text. The text is still read by screen readers." }, }, background: { type: "radio", label: "Background", options: [ { label: "White", value: "white" }, { label: "Subtle", value: "subtle" }, ], }, }, defaultProps: { items: [ { label: "Home", href: "/" }, { label: "Programs", href: "/programs" }, { label: "Youth & teens", href: "/programs/youth" }, { label: "Summer Day Camp 2027", href: "" }, ], separator: "chevron", homeIcon: "yes", background: "white", }, render: ({ items, separator, homeIcon, background }) => { const trail = (items ?? []).filter((i) => i?.label); if (!trail.length) return <>; const kind: Separator = separator || "chevron"; const last = trail.length - 1; return (

{i > 0 ? : null} {isLast ? ( {item.label} ) : ( {showIcon ? ( <> {item.label} ) : ( item.label )} )}

); }, }; ``` 1e:T1262,/** * Breadcrumbs — the trail from the home page to the current page, marked up as an * ordered list with the last item announced as the current page. * Usage: ``, or pass your own props. Every prop is optional. */ type Separator = "chevron" | "slash" | "arrow"; export type BreadcrumbsProps = { /** Trail. Start with Home and end with the current page. The last item is announced to screen readers as the current page. */ items: { label: string; href: string }[]; /** Separator. Decoration only. Screen readers skip it and announce the list position instead. */ separator: Separator; /** Home icon. Shows a house icon in place of the first item's text. The text is still read by screen readers. */ homeIcon: "yes" | "no"; /** Background */ background: "white" | "subtle"; }; const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"; function Sep({ kind }: { kind: Separator }) { if (kind === "slash") { return ( ); } if (kind === "arrow") { return ( ); } return ( ); } /** Sample content: `` renders the block as previewed. Replace it with your own. */ export const breadcrumbsExample: BreadcrumbsProps = { items: [ { label: "Home", href: "/" }, { label: "Programs", href: "/programs" }, { label: "Youth & teens", href: "/programs/youth" }, { label: "Summer Day Camp 2027", href: "" }, ], separator: "chevron", homeIcon: "yes", background: "white", }; export function Breadcrumbs(props: Partial) { const { items, separator, homeIcon, background } = props as BreadcrumbsProps; const trail = (items ?? []).filter((i) => i?.label); if (!trail.length) return <>; const kind: Separator = separator || "chevron"; const last = trail.length - 1; return (

{i > 0 ? : null} {isLast ? ( {item.label} ) : ( {showIcon ? ( <> {item.label} ) : ( item.label )} )}

); } 1f:T7963,

/**
 * Breadcrumbs — the trail from the home page to the current page, marked up as an
 * ordered list with the last item announced as the current page.
 * Usage: `<Breadcrumbs {...breadcrumbsExample} />`, or pass your own props. Every prop is optional.
 */

type Separator = "chevron" | "slash" | "arrow";

export type BreadcrumbsProps = {
  /** Trail. Start with Home and end with the current page. The last item is announced to screen readers as the current page. */
  items: { label: string; href: string }[];
  /** Separator. Decoration only. Screen readers skip it and announce the list position instead. */
  separator: Separator;
  /** Home icon. Shows a house icon in place of the first item's text. The text is still read by screen readers. */
  homeIcon: "yes" | "no";
  /** Background */
  background: "white" | "subtle";
};

const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600";

function Sep({ kind }: { kind: Separator }) {
  if (kind === "slash") {
    return (
      <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="size-5 shrink-0 text-neutral-300">
        <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
      </svg>
    );
  }
  if (kind === "arrow") {
    return (
      <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="size-4 shrink-0 text-neutral-400">
        <path fillRule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.64l-3.22-3.22a.75.75 0 1 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06l3.22-3.22H3.75A.75.75 0 0 1 3 10Z" clipRule="evenodd" />
      </svg>
    );
  }
  return (
    <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="size-5 shrink-0 text-neutral-400">
      <path fillRule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clipRule="evenodd" />
    </svg>
  );
}

/** Sample content: `<Breadcrumbs {...breadcrumbsExample} />` renders the block as previewed. Replace it with your own. */
export const breadcrumbsExample: BreadcrumbsProps = {
  items: [
    { label: "Home", href: "/" },
    { label: "Programs", href: "/programs" },
    { label: "Youth & teens", href: "/programs/youth" },
    { label: "Summer Day Camp 2027", href: "" },
  ],
  separator: "chevron",
  homeIcon: "yes",
  background: "white",
};

export function Breadcrumbs(props: Partial<BreadcrumbsProps>) {
  const { items, separator, homeIcon, background } = props as BreadcrumbsProps;
  const trail = (items ?? []).filter((i) => i?.label);
  if (!trail.length) return <></>;
  const kind: Separator = separator || "chevron";
  const last = trail.length - 1;
  return (
    <div className={`px-4 py-2 sm:px-6 lg:px-8 ${background === "subtle" ? "border-b border-neutral-200 bg-neutral-50" : "bg-white"}`}>
      <nav aria-label="Breadcrumb" className="mx-auto max-w-7xl">
        <ol role="list" className="flex flex-wrap items-center gap-x-1 text-sm">
          {trail.map((item, i) => {
            const isLast = i === last;
            const showIcon = i === 0 && homeIcon !== "no" && !isLast;
            return (
              <li key={`${item.label}-${i}`} className="flex min-w-0 items-center gap-x-1">
                {i > 0 ? <Sep kind={kind} /> : null}
                {isLast ? (
                  <a aria-current="page" href={item.href || undefined} className={`inline-flex min-h-11 items-center rounded px-1 font-semibold break-words text-neutral-950 ${focusRing}`}>
                    {item.label}
                  </a>
                ) : (
                  <a
                    href={item.href || "#"}
                    className={`inline-flex min-h-11 items-center gap-1.5 rounded px-1 break-words text-neutral-600 underline-offset-4 transition hover:text-indigo-700 hover:underline ${focusRing}`}
                  >
                    {showIcon ? (
                      <>
                        <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="size-5 shrink-0">
                          <path fillRule="evenodd" d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z" clipRule="evenodd" />
                        </svg>
                        <span className="sr-only">{item.label}</span>
                      </>
                    ) : (
                      item.label
                    )}
                  </a>
                )}
              </li>
            );
          })}
        </ol>
      </nav>
    </div>
  );
}

20:T1780,

Editor fields