feature-content-blocks

@evolve-storefront/feature-content-blocks · v1.0.0 · Storybook ↗

Renders the CMS blocks a page is composed of — campaign banners, columns, teasers, promos, USP bands, product, category, brand and article lists, rich text, FAQs, tips and video.

Get started

1. Install the package with the peer dependencies it needs. It comes from the Evolve registry, which needs a one-time sign-in.

   pnpm add @evolve-storefront/feature-content-blocks @labdigital/graphql-fetcher @tanstack/react-query graphql next-intl react

   Requirements5

   @labdigital/graphql-fetcher	>=3
   @tanstack/react-query	>=5
   graphql	>=16
   next-intl	>=4
   react	>=19

2. Import its styles in the stylesheet where you load Tailwind. Without them the components render unstyled.

   @import "@evolve-storefront/feature-content-blocks/styles.css";

3. Wrap your app in ContentAudienceProvider. Setup lists its props.

4. Add its translations to your message files with evolve messages.

Then render it on a page:

// app/[locale]/[...slug]/content-page.tsx
import { ContentBlocks, defaultBlocks, PageHeading } from "@evolve-storefront/feature-content-blocks/content-blocks";
import { contentPageQueryOptions } from "@evolve-storefront/feature-content-blocks/queries";
import type { ClientFetcher } from "@labdigital/graphql-fetcher";
import { QueryClient } from "@tanstack/react-query";

export async function ContentPage({ gqlClient, path }: { gqlClient: ClientFetcher; path: string }) {
  const page = await new QueryClient().fetchQuery(contentPageQueryOptions({ gqlClient, path }));
  if (!page) return null;
  return (
    <main>
      <PageHeading page={page} />
      <ContentBlocks blocks={page.body} registry={defaultBlocks} headingLevel={2} />
    </main>
  );
}

Components

What you place on your pages. Each one has a preview, its props, and how to change its layout.

ContentAudienceShows its children only to their audience.

ContentBlocksRenders a list of CMS blocks.

Hooks

3 hooks to read and change the data yourself, for when you build your own UI. All hooks

More in this package

• Setup and server: what the package needs in your project.
• Advanced: graphql documents, data and cache helpers, other functions and constants, types.