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:T172c,import type { ComponentConfig } from "@puckeditor/core"; /** * FAQ (Accordion) — questions that expand in place, built on native

, so it * needs no JavaScript and is keyboard and screen-reader friendly out of the box. * Register: `FaqAccordionBlock: faqAccordionBlock` in puck.config.tsx. */ type Heading = "h1" | "h2" | "h3" | "h4"; export type FaqAccordionProps = { heading: string; headingLevel: Heading; intro: string; items: { question: string; answer: string }[]; openFirst: boolean; contactLabel: string; contactHref: string; }; export const faqAccordionBlock: ComponentConfig = { label: "FAQ (Accordion)", 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" }, items: { type: "array", label: "Questions", min: 1, max: 20, getItemSummary: (item) => item?.question?.slice(0, 48) || "Question", defaultItemProps: { question: "New question", answer: "Answer goes here." }, arrayFields: { question: { type: "text", label: "Question" }, answer: { type: "textarea", label: "Answer", metadata: { help: "Blank lines start a new paragraph." } }, }, }, openFirst: { type: "radio", label: "First question", options: [ { label: "Open", value: true }, { label: "Closed", value: false }, ], }, contactLabel: { type: "text", label: "Help link text", metadata: { help: "Shown under the list. Leave blank to hide it." } }, contactHref: { type: "text", label: "Help link" }, }, defaultProps: { heading: "Frequently asked questions", headingLevel: "h2", intro: "Everything you need to know before you register. Can't find an answer? Our front desk is happy to help.", items: [ { question: "When does registration open?", answer: "Residents can register starting the first Monday of each season at 8 a.m. Non-resident registration opens one week later.", }, { question: "Do you offer financial assistance?", answer: "Yes. Households that qualify can receive up to 75% off most programs.\n\nApply once a year online or at any community center. Decisions usually take five business days.", }, { question: "What is your refund policy?", answer: "Withdraw at least seven days before a program starts for a full refund. Inside seven days we offer account credit instead.", }, { question: "Are your facilities accessible?", answer: "All community centers are ADA accessible. Let us know about any accommodation you need when you register and we'll make arrangements.", }, ], openFirst: true, contactLabel: "Contact our front desk", contactHref: "/contact", }, render: ({ heading, headingLevel, intro, items, openFirst, contactLabel, contactHref }) => { const H = headingLevel || "h2"; const list = (items ?? []).filter((item) => item?.question); return (

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

{intro}

: null} {contactLabel ? ( {contactLabel} ) : null}

{list.map((item, i) => (

{item.question}

{(item.answer || "") .split(/\n\s*\n/) .filter(Boolean) .map((para, j) => (

{para}

))}

); }, }; 1c:T960f,

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

/**
 * FAQ (Accordion) — questions that expand in place, built on native <details>, so it
 * needs no JavaScript and is keyboard and screen-reader friendly out of the box.
 * Register: `FaqAccordionBlock: faqAccordionBlock` in puck.config.tsx.
 */

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

export type FaqAccordionProps = {
  heading: string;
  headingLevel: Heading;
  intro: string;
  items: { question: string; answer: string }[];
  openFirst: boolean;
  contactLabel: string;
  contactHref: string;
};

export const faqAccordionBlock: ComponentConfig<FaqAccordionProps> = {
  label: "FAQ (Accordion)",
  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" },
    items: {
      type: "array",
      label: "Questions",
      min: 1,
      max: 20,
      getItemSummary: (item) => item?.question?.slice(0, 48) || "Question",
      defaultItemProps: { question: "New question", answer: "Answer goes here." },
      arrayFields: {
        question: { type: "text", label: "Question" },
        answer: { type: "textarea", label: "Answer", metadata: { help: "Blank lines start a new paragraph." } },
      },
    },
    openFirst: {
      type: "radio",
      label: "First question",
      options: [
        { label: "Open", value: true },
        { label: "Closed", value: false },
      ],
    },
    contactLabel: { type: "text", label: "Help link text", metadata: { help: "Shown under the list. Leave blank to hide it." } },
    contactHref: { type: "text", label: "Help link" },
  },
  defaultProps: {
    heading: "Frequently asked questions",
    headingLevel: "h2",
    intro: "Everything you need to know before you register. Can't find an answer? Our front desk is happy to help.",
    items: [
      {
        question: "When does registration open?",
        answer: "Residents can register starting the first Monday of each season at 8 a.m. Non-resident registration opens one week later.",
      },
      {
        question: "Do you offer financial assistance?",
        answer: "Yes. Households that qualify can receive up to 75% off most programs.\n\nApply once a year online or at any community center. Decisions usually take five business days.",
      },
      {
        question: "What is your refund policy?",
        answer: "Withdraw at least seven days before a program starts for a full refund. Inside seven days we offer account credit instead.",
      },
      {
        question: "Are your facilities accessible?",
        answer: "All community centers are ADA accessible. Let us know about any accommodation you need when you register and we'll make arrangements.",
      },
    ],
    openFirst: true,
    contactLabel: "Contact our front desk",
    contactHref: "/contact",
  },
  render: ({ heading, headingLevel, intro, items, openFirst, contactLabel, contactHref }) => {
    const H = headingLevel || "h2";
    const list = (items ?? []).filter((item) => item?.question);
    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 grid max-w-7xl grid-cols-1 gap-10 lg:grid-cols-12 lg:gap-16">
          <div className="lg:col-span-4">
            {heading ? <H className="text-3xl font-semibold tracking-tight text-balance text-neutral-950 sm:text-4xl">{heading}</H> : null}
            {intro ? <p className="mt-4 text-base leading-7 text-pretty text-neutral-600">{intro}</p> : null}
            {contactLabel ? (
              <a
                href={contactHref || "#"}
                className="mt-6 inline-flex min-h-11 items-center gap-1.5 font-semibold text-indigo-700 underline decoration-indigo-300 underline-offset-4 hover:decoration-indigo-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
              >
                {contactLabel}
              </a>
            ) : null}
          </div>
          <div className="divide-y divide-neutral-200 border-y border-neutral-200 lg:col-span-8">
            {list.map((item, i) => (
              <details key={`${item.question}-${i}`} className="group" open={openFirst && i === 0 ? true : undefined}>
                <summary className="flex min-h-11 cursor-pointer list-none items-start justify-between gap-6 py-5 text-left text-base font-semibold text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:text-lg [&::-webkit-details-marker]:hidden">
                  <span>{item.question}</span>
                  <span aria-hidden="true" className="mt-0.5 grid size-6 shrink-0 place-items-center rounded-full bg-neutral-100 text-neutral-700 transition group-open:rotate-45 group-open:bg-indigo-600 group-open:text-white">
                    <svg viewBox="0 0 16 16" fill="currentColor" className="size-3.5">
                      <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
                    </svg>
                  </span>
                </summary>
                <div className="space-y-4 pr-10 pb-6 text-base leading-7 text-neutral-600">
                  {(item.answer || "")
                    .split(/\n\s*\n/)
                    .filter(Boolean)
                    .map((para, j) => (
                      <p key={j}>{para}</p>
                    ))}
                </div>
              </details>
            ))}
          </div>
        </div>
      </section>
    );
  },
};

1d:T1e1e,# Add the "FAQ Accordion" block to this P1 project Add a Puck component from P1 Blocks ({origin}/blocks/faq-accordion) to this Pantheon Content Publisher (P1) Next.js project. Questions that expand in place on native

. No JavaScript, fully keyboard accessible. ## Steps 1. Create `components/puck/faq-accordion-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 { faqAccordionBlock } from "./components/puck/faq-accordion-block";` 3. Register it under `components` as `FaqAccordionBlock: faqAccordionBlock`. 4. Add `"FaqAccordionBlock"` to the best-fitting entry in `categories` (this block's library category is "Content"). 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/faq-accordion-block.tsx` ```tsx import type { ComponentConfig } from "@puckeditor/core"; /** * FAQ (Accordion) — questions that expand in place, built on native

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

{intro}

: null} {contactLabel ? ( {contactLabel} ) : null}

{list.map((item, i) => (

{item.question}

{(item.answer || "") .split(/\n\s*\n/) .filter(Boolean) .map((para, j) => (

{para}

))}

); }, }; ``` 1e:T1312,/** * FAQ (Accordion) — questions that expand in place, built on native

, so it * needs no JavaScript and is keyboard and screen-reader friendly out of the box. * Usage: ``, or pass your own props. Every prop is optional. */ type Heading = "h1" | "h2" | "h3" | "h4"; export type FaqAccordionProps = { /** Heading */ heading: string; /** Heading level. Sets the page outline for screen readers and search. The look doesn't change. */ headingLevel: Heading; /** Intro */ intro: string; /** Questions */ items: { question: string; answer: string }[]; /** First question */ openFirst: boolean; /** Help link text. Shown under the list. Leave blank to hide it. */ contactLabel: string; /** Help link */ contactHref: string; }; /** Sample content: `` renders the block as previewed. Replace it with your own. */ export const faqAccordionExample: FaqAccordionProps = { heading: "Frequently asked questions", headingLevel: "h2", intro: "Everything you need to know before you register. Can't find an answer? Our front desk is happy to help.", items: [ { question: "When does registration open?", answer: "Residents can register starting the first Monday of each season at 8 a.m. Non-resident registration opens one week later.", }, { question: "Do you offer financial assistance?", answer: "Yes. Households that qualify can receive up to 75% off most programs.\n\nApply once a year online or at any community center. Decisions usually take five business days.", }, { question: "What is your refund policy?", answer: "Withdraw at least seven days before a program starts for a full refund. Inside seven days we offer account credit instead.", }, { question: "Are your facilities accessible?", answer: "All community centers are ADA accessible. Let us know about any accommodation you need when you register and we'll make arrangements.", }, ], openFirst: true, contactLabel: "Contact our front desk", contactHref: "/contact", }; export function FaqAccordion(props: Partial) { const { heading, headingLevel, intro, items, openFirst, contactLabel, contactHref } = props as FaqAccordionProps; const H = headingLevel || "h2"; const list = (items ?? []).filter((item) => item?.question); return (

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

{intro}

: null} {contactLabel ? ( {contactLabel} ) : null}

{list.map((item, i) => (

{item.question}

{(item.answer || "") .split(/\n\s*\n/) .filter(Boolean) .map((para, j) => (

{para}

))}

); } 1f:T64f5,

/**
 * FAQ (Accordion) — questions that expand in place, built on native <details>, so it
 * needs no JavaScript and is keyboard and screen-reader friendly out of the box.
 * Usage: `<FaqAccordion {...faqAccordionExample} />`, or pass your own props. Every prop is optional.
 */

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

export type FaqAccordionProps = {
  /** Heading */
  heading: string;
  /** Heading level. Sets the page outline for screen readers and search. The look doesn't change. */
  headingLevel: Heading;
  /** Intro */
  intro: string;
  /** Questions */
  items: { question: string; answer: string }[];
  /** First question */
  openFirst: boolean;
  /** Help link text. Shown under the list. Leave blank to hide it. */
  contactLabel: string;
  /** Help link */
  contactHref: string;
};

/** Sample content: `<FaqAccordion {...faqAccordionExample} />` renders the block as previewed. Replace it with your own. */
export const faqAccordionExample: FaqAccordionProps = {
  heading: "Frequently asked questions",
  headingLevel: "h2",
  intro: "Everything you need to know before you register. Can't find an answer? Our front desk is happy to help.",
  items: [
    {
      question: "When does registration open?",
      answer: "Residents can register starting the first Monday of each season at 8 a.m. Non-resident registration opens one week later.",
    },
    {
      question: "Do you offer financial assistance?",
      answer: "Yes. Households that qualify can receive up to 75% off most programs.\n\nApply once a year online or at any community center. Decisions usually take five business days.",
    },
    {
      question: "What is your refund policy?",
      answer: "Withdraw at least seven days before a program starts for a full refund. Inside seven days we offer account credit instead.",
    },
    {
      question: "Are your facilities accessible?",
      answer: "All community centers are ADA accessible. Let us know about any accommodation you need when you register and we'll make arrangements.",
    },
  ],
  openFirst: true,
  contactLabel: "Contact our front desk",
  contactHref: "/contact",
};

export function FaqAccordion(props: Partial<FaqAccordionProps>) {
  const { heading, headingLevel, intro, items, openFirst, contactLabel, contactHref } = props as FaqAccordionProps;
  const H = headingLevel || "h2";
  const list = (items ?? []).filter((item) => item?.question);
  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 grid max-w-7xl grid-cols-1 gap-10 lg:grid-cols-12 lg:gap-16">
        <div className="lg:col-span-4">
          {heading ? <H className="text-3xl font-semibold tracking-tight text-balance text-neutral-950 sm:text-4xl">{heading}</H> : null}
          {intro ? <p className="mt-4 text-base leading-7 text-pretty text-neutral-600">{intro}</p> : null}
          {contactLabel ? (
            <a
              href={contactHref || "#"}
              className="mt-6 inline-flex min-h-11 items-center gap-1.5 font-semibold text-indigo-700 underline decoration-indigo-300 underline-offset-4 hover:decoration-indigo-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            >
              {contactLabel}
            </a>
          ) : null}
        </div>
        <div className="divide-y divide-neutral-200 border-y border-neutral-200 lg:col-span-8">
          {list.map((item, i) => (
            <details key={`${item.question}-${i}`} className="group" open={openFirst && i === 0 ? true : undefined}>
              <summary className="flex min-h-11 cursor-pointer list-none items-start justify-between gap-6 py-5 text-left text-base font-semibold text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:text-lg [&::-webkit-details-marker]:hidden">
                <span>{item.question}</span>
                <span aria-hidden="true" className="mt-0.5 grid size-6 shrink-0 place-items-center rounded-full bg-neutral-100 text-neutral-700 transition group-open:rotate-45 group-open:bg-indigo-600 group-open:text-white">
                  <svg viewBox="0 0 16 16" fill="currentColor" className="size-3.5">
                    <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
                  </svg>
                </span>
              </summary>
              <div className="space-y-4 pr-10 pb-6 text-base leading-7 text-neutral-600">
                {(item.answer || "")
                  .split(/\n\s*\n/)
                  .filter(Boolean)
                  .map((para, j) => (
                    <p key={j}>{para}</p>
                  ))}
              </div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

20:T1838,

Editor fields