The static blocks are a more useful feature in Magento 2. You can manage static content like photos, videos, URL links, formatting content, etc. These static blocks can also be rendered on the pages of the PWA storefront. You can get single and more than one static block content using only one single component in PWA Studio. Let’s get an idea of how to call and render Magento 2 static blocks in the PWA storefront.

Step 1: Import CmsBlockGroup component

import CmsBlockGroup from "@magento/venia-ui/lib/components/CmsBlock";

Step 2: Render static block using identifiers prop

<CmsBlockGroup identifiers={'<cms_block_identifier>'} />

You need to add your static block’s identifier in place of <cms_block_identifier>.

You can send two types of values in identifiers prop:
1. String
2. Array

To get multiple static blocks content you need to send static blocks identifier in JSON Array format like below:

<CmsBlockGroup identifiers={['first_sample_block', 'second_sample_block']} />

We have created a small example as follows:
File Path: src/targets/local-intercept.js

module.exports = targets => {
    targets.of("@magento/venia-ui").routes.tap(routes => {
        routes.push({
            name: "MyCustomCmsBlock",
            pattern: "/customcmsblock",
            path: require.resolve("../components/CustomCmsBlock/customCmsBlock.js")
        });
        return routes;
    });
};

File Path: src/components/CustomCmsBlock/customCmsBlock.js

import React from "react";
import CmsBlockGroup from "@magento/venia-ui/lib/components/CmsBlock";

const CustomCmsBlock = () => {
    return (
        <CmsBlockGroup identifiers={['first_sample_block', 'second_sample_block']} />
    );
};

export default CustomCmsBlock;

Output:

Single Static Block

Multiple Static Blocks

We hope this blog may understandable and useful to you. You can email us at mage2developer@gmail.com if we missed anything or want to add any suggestions. We will respond to you as soon as possible. Happy to help 🙂