BlockRenderer System, Creating New Style, and Auto Load

1. Guide to Creating a New Style Variant for a Block

To add a new design or style to an existing block (e.g., adding style-3 to the ProductShowcase block):

1. Go to the styles folder of that component (e.g., src/modules/home/components/ProductShowcase/styles/).
2. Create a new file named style-3.tsx and code your new custom design.
3. The parent component automatically loads and renders the new style based on the block.style field!
4. In the Strapi panel, style fields are standard text inputs (Text) with no manual schema or enum setup required; simply enter style-3 directly into the style field.
5. Dynamic and Custom Design: The unique UI codes for this style are placed inside the section tag.

import React from "react"
import { ProductShowcaseProps } from "../types"
 
export default function ProductShowcaseStyle3({ block, products }: ProductShowcaseProps) {
  return (
    <section className="py-12 bg-gradient-to-r from-gray-900 to-black text-gray-900 dark:text-white">
      <h2 className="text-xl font-bold mb-6">{block.title}</h2>
    </section>
  )
}

2. Adding & Syncing Styles via Strapi Dashboard

All style additions and removals are managed directly through the Storefront Management dashboard in the Strapi Admin panel — no manual terminal scripts needed:

1. 1. In Strapi Admin, open Storefront Management from the left sidebar.
2. 2. Select the component group from the dropdown menu (e.g. FeaturesBlock).
3. 3. In the Styles Inspector, preview installed and available styles with live visual previews.
4. 4. Click + Add to Storefront (Queue) to queue a new style or Remove Style (Queue) to stage removal.
5. 5. Click the Update Storefront button.
6. 6. Strapi automatically synchronizes the latest settings preset, dispatches the component updates to GitHub Actions CI/CD, and deploys the updated Storefront container to your server!

3. Implementing BlockRenderer Code

The BlockRenderer/index.tsx file is the heart of the system. This function receives a block object from Strapi whose __component field determines exactly which React component should be rendered.

• block.__component: The unique key returned by Strapi, e.g., "ui.features-block" or "ui.product-showcase-block".
• Each case in the switch: Maps a Strapi block to a specific React component.
• default: return null: If a block is unknown, it is silently ignored and displays no error in the UI.
• BlockAnimateWrapper: Applies an entrance animation wrapper uniformly for all blocks.

import React from "react"
import ProductShowcaseBlock from "./ProductShowcaseBlock"
import FeaturesBlock from "./FeaturesBlock"
import BlockAnimateWrapper from "./BlockAnimateWrapper"
 
 
export default async function BlockRenderer({ block, region, countryCode, index }) {
  let BlockContent: React.ReactNode = null
 
  switch (block.__component) {
    case "ui.product-showcase-block":
      BlockContent = <ProductShowcaseBlock block={block} region={region} countryCode={countryCode} />
      break
    case "ui.features-block":
      BlockContent = <FeaturesBlock block={block} />
      break
    default:
      return null
  }
 
  return <BlockAnimateWrapper index={index}>{BlockContent}</BlockAnimateWrapper>
}