Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 36 additions & 3 deletions src/pages/docs/how-to/rendering-blocks/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,40 @@ export default {
};
```

### C. Import Fragments
### C. Update the `_app.js` file

Next, we update the `_app.js` file like so:

```js {3-6, 13-20} title="pages/_app.js"
import { useRouter } from "next/router";
import "../faust.config";
import { FaustProvider } from "@faustwp/core";
import "@/styles/blocks.scss";
import { WordPressBlocksProvider, fromThemeJson } from "@faustwp/blocks";
import blocks from "../wp-blocks";

export default function MyApp({ Component, pageProps }) {
const router = useRouter();

return (
<FaustProvider pageProps={pageProps}>
<WordPressBlocksProvider
config={{
blocks,
}}
>
<Component {...pageProps} key={router.asPath} />
</WordPressBlocksProvider>
</FaustProvider>
);
}
```

Here, we import our custom blocks from the `wp-blocks` module, which contains all the block components tailored for our WordPress content. These imported blocks are then passed into the `WordPressBlocksProvider` as part of its configuration.

The provider uses this mapping to dynamically render the appropriate block components based on the data coming from WordPress.

### D. Import Fragments

Then in your template queries, you will need to pass the provided fragment entries. here's an example of how to do that using the `front-page` template:

Expand Down Expand Up @@ -100,7 +133,7 @@ Component.query = gql`
`;
```

### D. Rendering Blocks
### E. Rendering Blocks

Now that you have all the queries ready, you can render the blocks using the provided `flatListToHierarchical` method and `WordPressBlocksViewer`:

Expand Down Expand Up @@ -130,6 +163,6 @@ export default function Component({ loading, data }) {
}
```

## 3. ALl done!
## 3. All done!

run `npm run dev` and navigate to your front page to see the blocks rendered! For Further customization, you can [override blocks](/docs/how-to/override-blocks/) or [create custom blocks](/docs/how-to/custom-blocks/).