Display Cover – Gatsby

gatsby-node.js

const path = require("path");
const { assignIds } = require("@webdeveducation/wp-block-tools");
exports.createPages = async ({ actions, graphql }) => {
  const pageTemplate = path.resolve("src/templates/page.js");
  const { createPage } = actions;

  const { data } = await graphql(`
    query AllPagesQuery {
      allWpPage {
        nodes {
          databaseId
          blocks
          uri
        }
      }
    }
  `);
  for (let i = 0; i < data.allWpPage.nodes.length; i++) {
    const page = data.allWpPage.nodes[i];
    let blocks = page.blocks;
    blocks = assignIds(blocks);
    createPage({
      path: page.uri,
      component: pageTemplate,
      context: {
        blocks,
      },
    });
  }
};

page.js

import React from "react";
import { BlockRendererProvider } from "@webdeveducation/wp-block-tools";

const Page = (props) => {
  console.log("Page props: ", props);
  return <BlockRendererProvider allBlocks={props.pageContext.blocks} />;
};

export default Page;