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:T1500,import type { ComponentConfig } from "@puckeditor/core"; /** * Logo Cloud — "Supported by" row of funder and partner logos, shown in grayscale until * hovered. Partners without a logo render as a typeset wordmark, so the block still * looks finished before artwork arrives. Register: `LogoCloudBlock: logoCloudBlock` in puck.config.tsx. */ type Heading = "h1" | "h2" | "h3" | "h4"; export type LogoCloudProps = { heading: string; headingLevel: Heading; intro: string; partners: { name: string; logoUrl: string; href: string }[]; }; const wordmarkStyles = [ "font-serif text-xl font-medium italic tracking-tight", "text-sm font-bold tracking-widest uppercase", "text-lg font-semibold tracking-tight", "font-serif text-base font-semibold tracking-wider uppercase", ]; const linkClass = "group inline-flex min-h-11 items-center justify-center rounded-md px-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"; export const logoCloudBlock: ComponentConfig = { label: "Logo Cloud", fields: { heading: { type: "text", label: "Heading" }, headingLevel: { type: "select", label: "Heading level", options: [ { label: "H1", value: "h1" }, { label: "H2", value: "h2" }, { label: "H3", value: "h3" }, { label: "H4", value: "h4" }, ], metadata: { help: "Sets the page outline for screen readers and search. The look doesn't change." }, }, intro: { type: "textarea", label: "Intro", metadata: { help: "Optional sentence under the heading. Leave blank to hide it." } }, partners: { type: "array", label: "Partners", min: 1, max: 24, getItemSummary: (item) => item?.name?.slice(0, 48) || "Partner", defaultItemProps: { name: "Partner name", logoUrl: "", href: "" }, arrayFields: { name: { type: "text", label: "Name", metadata: { help: "Used as the logo's alt text, or shown as a wordmark when there's no logo." } }, logoUrl: { type: "text", label: "Logo URL", metadata: { help: "A wide logo (SVG or transparent PNG) works best. Leave blank to show the name as text." } }, href: { type: "text", label: "Link", metadata: { help: "Optional partner website. Leave blank for no link." } }, }, }, }, defaultProps: { heading: "Made possible by our partners", headingLevel: "h2", intro: "", partners: [ { name: "Riverbend Community Foundation", logoUrl: "", href: "" }, { name: "Hollis Family Trust", logoUrl: "", href: "" }, { name: "Northfield Arts Council", logoUrl: "", href: "" }, { name: "Greenway Fund", logoUrl: "", href: "" }, { name: "Marlow & Vance Foundation", logoUrl: "", href: "" }, { name: "Cedar Valley Credit Union", logoUrl: "", href: "" }, ], }, render: ({ heading, headingLevel, intro, partners }) => { const H = headingLevel || "h2"; const list = (partners ?? []).filter((p) => p?.name || p?.logoUrl); const hasHeader = Boolean(heading || intro); return (

{hasHeader ? (

{heading ? {heading} : null} {intro ?

{intro}

: null}

) : null} {list.length > 0 ? (

{i % wordmarkStyles.length === 2 ? ( ) : null} {partner.name}

{partner.href ? ( {mark} ) : ( {mark} )}

) : null}

); }, }; 1c:T97e7,

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

/**
 * Logo Cloud — "Supported by" row of funder and partner logos, shown in grayscale until
 * hovered. Partners without a logo render as a typeset wordmark, so the block still
 * looks finished before artwork arrives. Register: `LogoCloudBlock: logoCloudBlock` in puck.config.tsx.
 */

type Heading = "h1" | "h2" | "h3" | "h4";

export type LogoCloudProps = {
  heading: string;
  headingLevel: Heading;
  intro: string;
  partners: { name: string; logoUrl: string; href: string }[];
};

const wordmarkStyles = [
  "font-serif text-xl font-medium italic tracking-tight",
  "text-sm font-bold tracking-widest uppercase",
  "text-lg font-semibold tracking-tight",
  "font-serif text-base font-semibold tracking-wider uppercase",
];

const linkClass =
  "group inline-flex min-h-11 items-center justify-center rounded-md px-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600";

export const logoCloudBlock: ComponentConfig<LogoCloudProps> = {
  label: "Logo Cloud",
  fields: {
    heading: { type: "text", label: "Heading" },
    headingLevel: {
      type: "select",
      label: "Heading level",
      options: [
        { label: "H1", value: "h1" },
        { label: "H2", value: "h2" },
        { label: "H3", value: "h3" },
        { label: "H4", value: "h4" },
      ],
      metadata: { help: "Sets the page outline for screen readers and search. The look doesn't change." },
    },
    intro: { type: "textarea", label: "Intro", metadata: { help: "Optional sentence under the heading. Leave blank to hide it." } },
    partners: {
      type: "array",
      label: "Partners",
      min: 1,
      max: 24,
      getItemSummary: (item) => item?.name?.slice(0, 48) || "Partner",
      defaultItemProps: { name: "Partner name", logoUrl: "", href: "" },
      arrayFields: {
        name: { type: "text", label: "Name", metadata: { help: "Used as the logo's alt text, or shown as a wordmark when there's no logo." } },
        logoUrl: { type: "text", label: "Logo URL", metadata: { help: "A wide logo (SVG or transparent PNG) works best. Leave blank to show the name as text." } },
        href: { type: "text", label: "Link", metadata: { help: "Optional partner website. Leave blank for no link." } },
      },
    },
  },
  defaultProps: {
    heading: "Made possible by our partners",
    headingLevel: "h2",
    intro: "",
    partners: [
      { name: "Riverbend Community Foundation", logoUrl: "", href: "" },
      { name: "Hollis Family Trust", logoUrl: "", href: "" },
      { name: "Northfield Arts Council", logoUrl: "", href: "" },
      { name: "Greenway Fund", logoUrl: "", href: "" },
      { name: "Marlow & Vance Foundation", logoUrl: "", href: "" },
      { name: "Cedar Valley Credit Union", logoUrl: "", href: "" },
    ],
  },
  render: ({ heading, headingLevel, intro, partners }) => {
    const H = headingLevel || "h2";
    const list = (partners ?? []).filter((p) => p?.name || p?.logoUrl);
    const hasHeader = Boolean(heading || intro);
    return (
      <section className="bg-white px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
        <div className="mx-auto max-w-7xl">
          {hasHeader ? (
            <div className="mx-auto max-w-2xl text-center">
              {heading ? <H className="text-base font-semibold text-balance text-neutral-900 sm:text-lg">{heading}</H> : null}
              {intro ? <p className="mt-3 text-base leading-7 text-pretty text-neutral-600">{intro}</p> : null}
            </div>
          ) : null}

          {list.length > 0 ? (
            <ul
              role="list"
              className={`${hasHeader ? "mt-10" : ""} mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-x-10 gap-y-6 sm:gap-x-14 lg:gap-x-16`}
            >
              {list.map((partner, i) => {
                const mark = partner.logoUrl ? (
                  <img
                    src={partner.logoUrl}
                    alt={partner.name || ""}
                    className="h-9 w-auto max-w-40 object-contain opacity-70 grayscale transition group-hover:opacity-100 group-hover:grayscale-0 sm:h-10"
                  />
                ) : (
                  <span className={`block max-w-56 text-center leading-tight text-balance text-neutral-600 transition group-hover:text-neutral-950 ${wordmarkStyles[i % wordmarkStyles.length]}`}>
                    {i % wordmarkStyles.length === 2 ? (
                      <svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor" className="mr-2 -mt-0.5 inline-block size-4 align-middle">
                        <path d="M8 1 15 8 8 15 1 8Z" />
                      </svg>
                    ) : null}
                    {partner.name}
                  </span>
                );
                return (
                  <li key={`${partner.name}-${i}`} className="flex">
                    {partner.href ? (
                      <a href={partner.href} className={linkClass}>
                        {mark}
                      </a>
                    ) : (
                      <span className="group inline-flex min-h-11 items-center justify-center px-2">{mark}</span>
                    )}
                  </li>
                );
              })}
            </ul>
          ) : null}
        </div>
      </section>
    );
  },
};

1d:T1bdd,# Add the "Partner Logos" block to this P1 project Add a Puck component from P1 Blocks ({origin}/blocks/logo-cloud) to this Pantheon Content Publisher (P1) Next.js project. Funders, partners or sponsors. Falls back to clean wordmarks when there's no logo file yet. ## Steps 1. Create `components/puck/logo-cloud-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 { logoCloudBlock } from "./components/puck/logo-cloud-block";` 3. Register it under `components` as `LogoCloudBlock: logoCloudBlock`. 4. Add `"LogoCloudBlock"` to the best-fitting entry in `categories` (this block's library category is "Social proof"). 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/logo-cloud-block.tsx` ```tsx import type { ComponentConfig } from "@puckeditor/core"; /** * Logo Cloud — "Supported by" row of funder and partner logos, shown in grayscale until * hovered. Partners without a logo render as a typeset wordmark, so the block still * looks finished before artwork arrives. Register: `LogoCloudBlock: logoCloudBlock` in puck.config.tsx. */ type Heading = "h1" | "h2" | "h3" | "h4"; export type LogoCloudProps = { heading: string; headingLevel: Heading; intro: string; partners: { name: string; logoUrl: string; href: string }[]; }; const wordmarkStyles = [ "font-serif text-xl font-medium italic tracking-tight", "text-sm font-bold tracking-widest uppercase", "text-lg font-semibold tracking-tight", "font-serif text-base font-semibold tracking-wider uppercase", ]; const linkClass = "group inline-flex min-h-11 items-center justify-center rounded-md px-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"; export const logoCloudBlock: ComponentConfig = { label: "Logo Cloud", fields: { heading: { type: "text", label: "Heading" }, headingLevel: { type: "select", label: "Heading level", options: [ { label: "H1", value: "h1" }, { label: "H2", value: "h2" }, { label: "H3", value: "h3" }, { label: "H4", value: "h4" }, ], metadata: { help: "Sets the page outline for screen readers and search. The look doesn't change." }, }, intro: { type: "textarea", label: "Intro", metadata: { help: "Optional sentence under the heading. Leave blank to hide it." } }, partners: { type: "array", label: "Partners", min: 1, max: 24, getItemSummary: (item) => item?.name?.slice(0, 48) || "Partner", defaultItemProps: { name: "Partner name", logoUrl: "", href: "" }, arrayFields: { name: { type: "text", label: "Name", metadata: { help: "Used as the logo's alt text, or shown as a wordmark when there's no logo." } }, logoUrl: { type: "text", label: "Logo URL", metadata: { help: "A wide logo (SVG or transparent PNG) works best. Leave blank to show the name as text." } }, href: { type: "text", label: "Link", metadata: { help: "Optional partner website. Leave blank for no link." } }, }, }, }, defaultProps: { heading: "Made possible by our partners", headingLevel: "h2", intro: "", partners: [ { name: "Riverbend Community Foundation", logoUrl: "", href: "" }, { name: "Hollis Family Trust", logoUrl: "", href: "" }, { name: "Northfield Arts Council", logoUrl: "", href: "" }, { name: "Greenway Fund", logoUrl: "", href: "" }, { name: "Marlow & Vance Foundation", logoUrl: "", href: "" }, { name: "Cedar Valley Credit Union", logoUrl: "", href: "" }, ], }, render: ({ heading, headingLevel, intro, partners }) => { const H = headingLevel || "h2"; const list = (partners ?? []).filter((p) => p?.name || p?.logoUrl); const hasHeader = Boolean(heading || intro); return (

{hasHeader ? (

{heading ? {heading} : null} {intro ?

{intro}

: null}

) : null} {list.length > 0 ? (

{i % wordmarkStyles.length === 2 ? ( ) : null} {partner.name}

{partner.href ? ( {mark} ) : ( {mark} )}

) : null}

); }, }; ``` 1e:T10d5,/** * Logo Cloud — "Supported by" row of funder and partner logos, shown in grayscale until * hovered. Partners without a logo render as a typeset wordmark, so the block still * looks finished before artwork arrives. Usage: ``, or pass your own props. Every prop is optional. */ type Heading = "h1" | "h2" | "h3" | "h4"; export type LogoCloudProps = { /** Heading */ heading: string; /** Heading level. Sets the page outline for screen readers and search. The look doesn't change. */ headingLevel: Heading; /** Intro. Optional sentence under the heading. Leave blank to hide it. */ intro: string; /** Partners */ partners: { name: string; logoUrl: string; href: string }[]; }; const wordmarkStyles = [ "font-serif text-xl font-medium italic tracking-tight", "text-sm font-bold tracking-widest uppercase", "text-lg font-semibold tracking-tight", "font-serif text-base font-semibold tracking-wider uppercase", ]; const linkClass = "group inline-flex min-h-11 items-center justify-center rounded-md px-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"; /** Sample content: `` renders the block as previewed. Replace it with your own. */ export const logoCloudExample: LogoCloudProps = { heading: "Made possible by our partners", headingLevel: "h2", intro: "", partners: [ { name: "Riverbend Community Foundation", logoUrl: "", href: "" }, { name: "Hollis Family Trust", logoUrl: "", href: "" }, { name: "Northfield Arts Council", logoUrl: "", href: "" }, { name: "Greenway Fund", logoUrl: "", href: "" }, { name: "Marlow & Vance Foundation", logoUrl: "", href: "" }, { name: "Cedar Valley Credit Union", logoUrl: "", href: "" }, ], }; export function LogoCloud(props: Partial) { const { heading, headingLevel, intro, partners } = props as LogoCloudProps; const H = headingLevel || "h2"; const list = (partners ?? []).filter((p) => p?.name || p?.logoUrl); const hasHeader = Boolean(heading || intro); return (

{hasHeader ? (

{heading ? {heading} : null} {intro ?

{intro}

: null}

) : null} {list.length > 0 ? (

{i % wordmarkStyles.length === 2 ? ( ) : null} {partner.name}

{partner.href ? ( {mark} ) : ( {mark} )}

) : null}

); } 1f:T6bc2,

/**
 * Logo Cloud — "Supported by" row of funder and partner logos, shown in grayscale until
 * hovered. Partners without a logo render as a typeset wordmark, so the block still
 * looks finished before artwork arrives. Usage: `<LogoCloud {...logoCloudExample} />`, or pass your own props. Every prop is optional.
 */

type Heading = "h1" | "h2" | "h3" | "h4";

export type LogoCloudProps = {
  /** Heading */
  heading: string;
  /** Heading level. Sets the page outline for screen readers and search. The look doesn't change. */
  headingLevel: Heading;
  /** Intro. Optional sentence under the heading. Leave blank to hide it. */
  intro: string;
  /** Partners */
  partners: { name: string; logoUrl: string; href: string }[];
};

const wordmarkStyles = [
  "font-serif text-xl font-medium italic tracking-tight",
  "text-sm font-bold tracking-widest uppercase",
  "text-lg font-semibold tracking-tight",
  "font-serif text-base font-semibold tracking-wider uppercase",
];

const linkClass =
  "group inline-flex min-h-11 items-center justify-center rounded-md px-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600";

/** Sample content: `<LogoCloud {...logoCloudExample} />` renders the block as previewed. Replace it with your own. */
export const logoCloudExample: LogoCloudProps = {
  heading: "Made possible by our partners",
  headingLevel: "h2",
  intro: "",
  partners: [
    { name: "Riverbend Community Foundation", logoUrl: "", href: "" },
    { name: "Hollis Family Trust", logoUrl: "", href: "" },
    { name: "Northfield Arts Council", logoUrl: "", href: "" },
    { name: "Greenway Fund", logoUrl: "", href: "" },
    { name: "Marlow & Vance Foundation", logoUrl: "", href: "" },
    { name: "Cedar Valley Credit Union", logoUrl: "", href: "" },
  ],
};

export function LogoCloud(props: Partial<LogoCloudProps>) {
  const { heading, headingLevel, intro, partners } = props as LogoCloudProps;
  const H = headingLevel || "h2";
  const list = (partners ?? []).filter((p) => p?.name || p?.logoUrl);
  const hasHeader = Boolean(heading || intro);
  return (
    <section className="bg-white px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
      <div className="mx-auto max-w-7xl">
        {hasHeader ? (
          <div className="mx-auto max-w-2xl text-center">
            {heading ? <H className="text-base font-semibold text-balance text-neutral-900 sm:text-lg">{heading}</H> : null}
            {intro ? <p className="mt-3 text-base leading-7 text-pretty text-neutral-600">{intro}</p> : null}
          </div>
        ) : null}

        {list.length > 0 ? (
          <ul
            role="list"
            className={`${hasHeader ? "mt-10" : ""} mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-x-10 gap-y-6 sm:gap-x-14 lg:gap-x-16`}
          >
            {list.map((partner, i) => {
              const mark = partner.logoUrl ? (
                <img
                  src={partner.logoUrl}
                  alt={partner.name || ""}
                  className="h-9 w-auto max-w-40 object-contain opacity-70 grayscale transition group-hover:opacity-100 group-hover:grayscale-0 sm:h-10"
                />
              ) : (
                <span className={`block max-w-56 text-center leading-tight text-balance text-neutral-600 transition group-hover:text-neutral-950 ${wordmarkStyles[i % wordmarkStyles.length]}`}>
                  {i % wordmarkStyles.length === 2 ? (
                    <svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor" className="mr-2 -mt-0.5 inline-block size-4 align-middle">
                      <path d="M8 1 15 8 8 15 1 8Z" />
                    </svg>
                  ) : null}
                  {partner.name}
                </span>
              );
              return (
                <li key={`${partner.name}-${i}`} className="flex">
                  {partner.href ? (
                    <a href={partner.href} className={linkClass}>
                      {mark}
                    </a>
                  ) : (
                    <span className="group inline-flex min-h-11 items-center justify-center px-2">{mark}</span>
                  )}
                </li>
              );
            })}
          </ul>
        ) : null}
      </div>
    </section>
  );
}

20:T15e1,

Editor fields