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:T170a,import type { ComponentConfig } from "@puckeditor/core"; /** * Hero (Typographic) — no image, just an oversized statement with one highlighted phrase, * a short lede and a ruled row of facts. Wrap a phrase in *asterisks* to highlight it. * Register: `HeroTypographicBlock: heroTypographicBlock` in puck.config.tsx. */ type Heading = "h1" | "h2" | "h3" | "h4"; export type HeroTypographicProps = { kicker: string; heading: string; headingLevel: Heading; body: string; linkLabel: string; linkHref: string; meta: { label: string; value: string }[]; }; function renderHighlighted(text: string) { return text.split(/(\*[^*]+\*)/g).map((part, i) => part.length > 2 && part.startsWith("*") && part.endsWith("*") ? ( {part.slice(1, -1)} ) : ( part ), ); } export const heroTypographicBlock: ComponentConfig = { label: "Hero (Typographic)", fields: { kicker: { type: "text", label: "Kicker", metadata: { help: "Small label above the statement, like your organization's name. Leave blank to hide it." } }, heading: { type: "textarea", label: "Statement", metadata: { help: "Keep it under about 12 words. Wrap one phrase in *asterisks* to set it in the accent color." }, }, headingLevel: { type: "select", label: "Heading level", options: [ { label: "H1 (page title)", value: "h1" }, { label: "H2", value: "h2" }, { label: "H3", value: "h3" }, { label: "H4", value: "h4" }, ], metadata: { help: "Use H1 when this hero is the top of the page. The look doesn't change." }, }, body: { type: "textarea", label: "Lede", metadata: { help: "One or two sentences under the statement. Leave blank to hide it." } }, linkLabel: { type: "text", label: "Link text", metadata: { help: "Leave blank to hide it." } }, linkHref: { type: "text", label: "Link", metadata: { help: "A path (/about), full URL, #anchor, mailto: or tel:." } }, meta: { type: "array", label: "Facts row", min: 0, max: 4, getItemSummary: (item) => [item?.label, item?.value].filter(Boolean).join(": ") || "Fact", defaultItemProps: { label: "Label", value: "Value" }, arrayFields: { label: { type: "text", label: "Label" }, value: { type: "text", label: "Value" }, }, metadata: { help: "Small facts along the bottom rule, like where you are and when you started." }, }, }, defaultProps: { kicker: "Ohio Valley Land Trust", heading: "We protect the land that *feeds, shelters and steadies* this valley, forever.", headingLevel: "h1", body: "Working with farmers, families and towns, we have placed permanent conservation easements on working farms, forests and floodplains across eleven counties.", linkLabel: "How land protection works", linkHref: "/how-it-works", meta: [ { label: "Founded", value: "1991" }, { label: "Counties served", value: "11" }, { label: "Accredited by", value: "Land Trust Accreditation Commission" }, ], }, render: ({ kicker, heading, headingLevel, body, linkLabel, linkHref, meta }) => { const H = headingLevel || "h1"; const facts = (meta ?? []).filter((m) => m?.label || m?.value); return (

{kicker ? (

) : null} {heading ? ( {renderHighlighted(heading)} ) : null} {body || linkLabel ? (

{body ?

{body}

: null} {linkLabel ? ( {linkLabel} ) : null}

) : null} {facts.length ? (

{m.label}: {m.value}

) : null}

); }, }; 1c:Ta4be,

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

/**
 * Hero (Typographic) — no image, just an oversized statement with one highlighted phrase,
 * a short lede and a ruled row of facts. Wrap a phrase in *asterisks* to highlight it.
 * Register: `HeroTypographicBlock: heroTypographicBlock` in puck.config.tsx.
 */

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

export type HeroTypographicProps = {
  kicker: string;
  heading: string;
  headingLevel: Heading;
  body: string;
  linkLabel: string;
  linkHref: string;
  meta: { label: string; value: string }[];
};

function renderHighlighted(text: string) {
  return text.split(/(\*[^*]+\*)/g).map((part, i) =>
    part.length > 2 && part.startsWith("*") && part.endsWith("*") ? (
      <em key={i} className="font-serif font-normal text-indigo-600 italic">
        {part.slice(1, -1)}
      </em>
    ) : (
      part
    ),
  );
}

export const heroTypographicBlock: ComponentConfig<HeroTypographicProps> = {
  label: "Hero (Typographic)",
  fields: {
    kicker: { type: "text", label: "Kicker", metadata: { help: "Small label above the statement, like your organization's name. Leave blank to hide it." } },
    heading: {
      type: "textarea",
      label: "Statement",
      metadata: { help: "Keep it under about 12 words. Wrap one phrase in *asterisks* to set it in the accent color." },
    },
    headingLevel: {
      type: "select",
      label: "Heading level",
      options: [
        { label: "H1 (page title)", value: "h1" },
        { label: "H2", value: "h2" },
        { label: "H3", value: "h3" },
        { label: "H4", value: "h4" },
      ],
      metadata: { help: "Use H1 when this hero is the top of the page. The look doesn't change." },
    },
    body: { type: "textarea", label: "Lede", metadata: { help: "One or two sentences under the statement. Leave blank to hide it." } },
    linkLabel: { type: "text", label: "Link text", metadata: { help: "Leave blank to hide it." } },
    linkHref: { type: "text", label: "Link", metadata: { help: "A path (/about), full URL, #anchor, mailto: or tel:." } },
    meta: {
      type: "array",
      label: "Facts row",
      min: 0,
      max: 4,
      getItemSummary: (item) => [item?.label, item?.value].filter(Boolean).join(": ") || "Fact",
      defaultItemProps: { label: "Label", value: "Value" },
      arrayFields: {
        label: { type: "text", label: "Label" },
        value: { type: "text", label: "Value" },
      },
      metadata: { help: "Small facts along the bottom rule, like where you are and when you started." },
    },
  },
  defaultProps: {
    kicker: "Ohio Valley Land Trust",
    heading: "We protect the land that *feeds, shelters and steadies* this valley, forever.",
    headingLevel: "h1",
    body: "Working with farmers, families and towns, we have placed permanent conservation easements on working farms, forests and floodplains across eleven counties.",
    linkLabel: "How land protection works",
    linkHref: "/how-it-works",
    meta: [
      { label: "Founded", value: "1991" },
      { label: "Counties served", value: "11" },
      { label: "Accredited by", value: "Land Trust Accreditation Commission" },
    ],
  },
  render: ({ kicker, heading, headingLevel, body, linkLabel, linkHref, meta }) => {
    const H = headingLevel || "h1";
    const facts = (meta ?? []).filter((m) => m?.label || m?.value);
    return (
      <section className="bg-white px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-28">
        <div className="mx-auto max-w-7xl">
          {kicker ? (
            <p className="flex items-center gap-3 text-sm font-semibold tracking-widest text-neutral-900 uppercase">
              <span aria-hidden="true" className="size-2 rotate-45 bg-indigo-600" />
              {kicker}
            </p>
          ) : null}
          {heading ? (
            <H className={`${kicker ? "mt-8 lg:mt-12" : ""} max-w-6xl text-5xl leading-none break-words font-semibold tracking-tighter text-balance text-neutral-950 sm:text-7xl lg:text-8xl`}>
              {renderHighlighted(heading)}
            </H>
          ) : null}

          {body || linkLabel ? (
            <div className="mt-10 grid grid-cols-1 gap-6 lg:mt-14 lg:grid-cols-12">
              {body ? <p className="max-w-xl text-lg leading-8 text-pretty text-neutral-600 lg:col-span-6 lg:col-start-7">{body}</p> : null}
              {linkLabel ? (
                <a
                  href={linkHref || "#"}
                  className="group inline-flex min-h-11 w-fit items-center gap-2 text-base font-semibold text-neutral-950 underline decoration-indigo-600 decoration-2 underline-offset-8 transition hover:decoration-4 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-indigo-600 lg:col-span-6 lg:col-start-7"
                >
                  {linkLabel}
                  <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="size-5 transition group-hover:translate-x-0.5">
                    <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>
                </a>
              ) : null}
            </div>
          ) : null}

          {facts.length ? (
            <dl className="mt-14 grid grid-cols-1 gap-x-8 gap-y-6 border-t border-neutral-950 pt-6 sm:grid-cols-2 lg:mt-20 lg:grid-cols-4">
              {facts.map((m, i) => (
                <div key={`${m.label}-${i}`}>
                  <dt className="text-xs font-semibold tracking-widest text-neutral-500 uppercase">{m.label}</dt>
                  <dd className="mt-1 text-base font-medium text-neutral-950">{m.value}</dd>
                </div>
              ))}
            </dl>
          ) : null}
        </div>
      </section>
    );
  },
};

1d:T1e25,# Add the "Typographic Hero" block to this P1 project Add a Puck component from P1 Blocks ({origin}/blocks/hero-typographic) to this Pantheon Content Publisher (P1) Next.js project. Image-free oversized statement with one asterisk-marked phrase in the accent color and a ruled row of facts. ## Steps 1. Create `components/puck/hero-typographic-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 { heroTypographicBlock } from "./components/puck/hero-typographic-block";` 3. Register it under `components` as `HeroTypographicBlock: heroTypographicBlock`. 4. Add `"HeroTypographicBlock"` to the best-fitting entry in `categories` (this block's library category is "Heroes"). 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/hero-typographic-block.tsx` ```tsx import type { ComponentConfig } from "@puckeditor/core"; /** * Hero (Typographic) — no image, just an oversized statement with one highlighted phrase, * a short lede and a ruled row of facts. Wrap a phrase in *asterisks* to highlight it. * Register: `HeroTypographicBlock: heroTypographicBlock` in puck.config.tsx. */ type Heading = "h1" | "h2" | "h3" | "h4"; export type HeroTypographicProps = { kicker: string; heading: string; headingLevel: Heading; body: string; linkLabel: string; linkHref: string; meta: { label: string; value: string }[]; }; function renderHighlighted(text: string) { return text.split(/(\*[^*]+\*)/g).map((part, i) => part.length > 2 && part.startsWith("*") && part.endsWith("*") ? ( {part.slice(1, -1)} ) : ( part ), ); } export const heroTypographicBlock: ComponentConfig = { label: "Hero (Typographic)", fields: { kicker: { type: "text", label: "Kicker", metadata: { help: "Small label above the statement, like your organization's name. Leave blank to hide it." } }, heading: { type: "textarea", label: "Statement", metadata: { help: "Keep it under about 12 words. Wrap one phrase in *asterisks* to set it in the accent color." }, }, headingLevel: { type: "select", label: "Heading level", options: [ { label: "H1 (page title)", value: "h1" }, { label: "H2", value: "h2" }, { label: "H3", value: "h3" }, { label: "H4", value: "h4" }, ], metadata: { help: "Use H1 when this hero is the top of the page. The look doesn't change." }, }, body: { type: "textarea", label: "Lede", metadata: { help: "One or two sentences under the statement. Leave blank to hide it." } }, linkLabel: { type: "text", label: "Link text", metadata: { help: "Leave blank to hide it." } }, linkHref: { type: "text", label: "Link", metadata: { help: "A path (/about), full URL, #anchor, mailto: or tel:." } }, meta: { type: "array", label: "Facts row", min: 0, max: 4, getItemSummary: (item) => [item?.label, item?.value].filter(Boolean).join(": ") || "Fact", defaultItemProps: { label: "Label", value: "Value" }, arrayFields: { label: { type: "text", label: "Label" }, value: { type: "text", label: "Value" }, }, metadata: { help: "Small facts along the bottom rule, like where you are and when you started." }, }, }, defaultProps: { kicker: "Ohio Valley Land Trust", heading: "We protect the land that *feeds, shelters and steadies* this valley, forever.", headingLevel: "h1", body: "Working with farmers, families and towns, we have placed permanent conservation easements on working farms, forests and floodplains across eleven counties.", linkLabel: "How land protection works", linkHref: "/how-it-works", meta: [ { label: "Founded", value: "1991" }, { label: "Counties served", value: "11" }, { label: "Accredited by", value: "Land Trust Accreditation Commission" }, ], }, render: ({ kicker, heading, headingLevel, body, linkLabel, linkHref, meta }) => { const H = headingLevel || "h1"; const facts = (meta ?? []).filter((m) => m?.label || m?.value); return (

{kicker ? (

) : null} {heading ? ( {renderHighlighted(heading)} ) : null} {body || linkLabel ? (

{body ?

{body}

: null} {linkLabel ? ( {linkLabel} ) : null}

) : null} {facts.length ? (

{m.label}: {m.value}

) : null}

); }, }; ``` 1e:T1347,/** * Hero (Typographic) — no image, just an oversized statement with one highlighted phrase, * a short lede and a ruled row of facts. Wrap a phrase in *asterisks* to highlight it. * Usage: ``, or pass your own props. Every prop is optional. */ type Heading = "h1" | "h2" | "h3" | "h4"; export type HeroTypographicProps = { /** Kicker. Small label above the statement, like your organization's name. Leave blank to hide it. */ kicker: string; /** Statement. Keep it under about 12 words. Wrap one phrase in *asterisks* to set it in the accent color. */ heading: string; /** Heading level. Use H1 when this hero is the top of the page. The look doesn't change. */ headingLevel: Heading; /** Lede. One or two sentences under the statement. Leave blank to hide it. */ body: string; /** Link text. Leave blank to hide it. */ linkLabel: string; /** Link. A path (/about), full URL, #anchor, mailto: or tel:. */ linkHref: string; /** Facts row. Small facts along the bottom rule, like where you are and when you started. */ meta: { label: string; value: string }[]; }; function renderHighlighted(text: string) { return text.split(/(\*[^*]+\*)/g).map((part, i) => part.length > 2 && part.startsWith("*") && part.endsWith("*") ? ( {part.slice(1, -1)} ) : ( part ), ); } /** Sample content: `` renders the block as previewed. Replace it with your own. */ export const heroTypographicExample: HeroTypographicProps = { kicker: "Ohio Valley Land Trust", heading: "We protect the land that *feeds, shelters and steadies* this valley, forever.", headingLevel: "h1", body: "Working with farmers, families and towns, we have placed permanent conservation easements on working farms, forests and floodplains across eleven counties.", linkLabel: "How land protection works", linkHref: "/how-it-works", meta: [ { label: "Founded", value: "1991" }, { label: "Counties served", value: "11" }, { label: "Accredited by", value: "Land Trust Accreditation Commission" }, ], }; export function HeroTypographic(props: Partial) { const { kicker, heading, headingLevel, body, linkLabel, linkHref, meta } = props as HeroTypographicProps; const H = headingLevel || "h1"; const facts = (meta ?? []).filter((m) => m?.label || m?.value); return (

{kicker ? (

) : null} {heading ? ( {renderHighlighted(heading)} ) : null} {body || linkLabel ? (

{body ?

{body}

: null} {linkLabel ? ( {linkLabel} ) : null}

) : null} {facts.length ? (

{m.label}: {m.value}

) : null}

); } 1f:T7144,

/**
 * Hero (Typographic) — no image, just an oversized statement with one highlighted phrase,
 * a short lede and a ruled row of facts. Wrap a phrase in *asterisks* to highlight it.
 * Usage: `<HeroTypographic {...heroTypographicExample} />`, or pass your own props. Every prop is optional.
 */

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

export type HeroTypographicProps = {
  /** Kicker. Small label above the statement, like your organization's name. Leave blank to hide it. */
  kicker: string;
  /** Statement. Keep it under about 12 words. Wrap one phrase in *asterisks* to set it in the accent color. */
  heading: string;
  /** Heading level. Use H1 when this hero is the top of the page. The look doesn't change. */
  headingLevel: Heading;
  /** Lede. One or two sentences under the statement. Leave blank to hide it. */
  body: string;
  /** Link text. Leave blank to hide it. */
  linkLabel: string;
  /** Link. A path (/about), full URL, #anchor, mailto: or tel:. */
  linkHref: string;
  /** Facts row. Small facts along the bottom rule, like where you are and when you started. */
  meta: { label: string; value: string }[];
};

function renderHighlighted(text: string) {
  return text.split(/(\*[^*]+\*)/g).map((part, i) =>
    part.length > 2 && part.startsWith("*") && part.endsWith("*") ? (
      <em key={i} className="font-serif font-normal text-indigo-600 italic">
        {part.slice(1, -1)}
      </em>
    ) : (
      part
    ),
  );
}

/** Sample content: `<HeroTypographic {...heroTypographicExample} />` renders the block as previewed. Replace it with your own. */
export const heroTypographicExample: HeroTypographicProps = {
  kicker: "Ohio Valley Land Trust",
  heading: "We protect the land that *feeds, shelters and steadies* this valley, forever.",
  headingLevel: "h1",
  body: "Working with farmers, families and towns, we have placed permanent conservation easements on working farms, forests and floodplains across eleven counties.",
  linkLabel: "How land protection works",
  linkHref: "/how-it-works",
  meta: [
    { label: "Founded", value: "1991" },
    { label: "Counties served", value: "11" },
    { label: "Accredited by", value: "Land Trust Accreditation Commission" },
  ],
};

export function HeroTypographic(props: Partial<HeroTypographicProps>) {
  const { kicker, heading, headingLevel, body, linkLabel, linkHref, meta } = props as HeroTypographicProps;
  const H = headingLevel || "h1";
  const facts = (meta ?? []).filter((m) => m?.label || m?.value);
  return (
    <section className="bg-white px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-28">
      <div className="mx-auto max-w-7xl">
        {kicker ? (
          <p className="flex items-center gap-3 text-sm font-semibold tracking-widest text-neutral-900 uppercase">
            <span aria-hidden="true" className="size-2 rotate-45 bg-indigo-600" />
            {kicker}
          </p>
        ) : null}
        {heading ? (
          <H className={`${kicker ? "mt-8 lg:mt-12" : ""} max-w-6xl text-5xl leading-none break-words font-semibold tracking-tighter text-balance text-neutral-950 sm:text-7xl lg:text-8xl`}>
            {renderHighlighted(heading)}
          </H>
        ) : null}

        {body || linkLabel ? (
          <div className="mt-10 grid grid-cols-1 gap-6 lg:mt-14 lg:grid-cols-12">
            {body ? <p className="max-w-xl text-lg leading-8 text-pretty text-neutral-600 lg:col-span-6 lg:col-start-7">{body}</p> : null}
            {linkLabel ? (
              <a
                href={linkHref || "#"}
                className="group inline-flex min-h-11 w-fit items-center gap-2 text-base font-semibold text-neutral-950 underline decoration-indigo-600 decoration-2 underline-offset-8 transition hover:decoration-4 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-indigo-600 lg:col-span-6 lg:col-start-7"
              >
                {linkLabel}
                <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="size-5 transition group-hover:translate-x-0.5">
                  <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>
              </a>
            ) : null}
          </div>
        ) : null}

        {facts.length ? (
          <dl className="mt-14 grid grid-cols-1 gap-x-8 gap-y-6 border-t border-neutral-950 pt-6 sm:grid-cols-2 lg:mt-20 lg:grid-cols-4">
            {facts.map((m, i) => (
              <div key={`${m.label}-${i}`}>
                <dt className="text-xs font-semibold tracking-widest text-neutral-500 uppercase">{m.label}</dt>
                <dd className="mt-1 text-base font-medium text-neutral-950">{m.value}</dd>
              </div>
            ))}
          </dl>
        ) : null}
      </div>
    </section>
  );
}

20:T1897,

Editor fields