feat: Blocks rendering in Next.js (pages/mocked graphql calls)

[ahuseyn]

Example: Rendering WordPress Blocks in Next.js

This example demonstrates rendering WordPress Blocks with JSX in a Next.js project. The example includes 16 block components across various categories. Example includes a utility to convert flat blocks data from GraphQL (GQL) response into the hierarchical data structure. Passing this data into BlockRenderer component generates the WordPress content by matching the appropriate blocks and using a default block when block implementation is missing. Default block is also customizable component. Example also gives an option to provide custom HTML parser to render HTML content.

Features

• 16 sample block component
• Custom HTML parser option
• Default block for fallback
• Custom default block option
• Utility to form inline CSS
• Utility to convert flat GQL data into hierarchical data
• GraphQL fragments for each block

Important notes

• This example does not require a working WordPress instance, it uses fake request to get prefetched GQL response
• If you have a working WordPress instance you can easily connect it to this example. For the details check the pages/index.js file.
• You will need to have wp-graphql-content-blocks and WPGraphQL plugins installed if you want to connect it to a WordPress instance.

Project structure

/
├── public/
│   ├── post.json                       # Example GraphQL post data
├── pages/
│   ├── index.js                        # Home page to showcase all blocks
├── components/
│   ├── Caption.js                      # Component for figcaption and caption elements
│   ├── DefaultBlock.js                 # Default block to render if there's no corresponding block
│   ├── BlockRenderer.js                # Component to render to render blocks
│   ├── blocks/
│   │   ├── CoreAudio.js                # Audio block component
│   │   ├── CoreButton.js               # Button block component
│   │   └── ...                         # Other block components
├── utils/
│   ├── flatListToHierarchical.js       # Convert GraphQL data into hierarchical
│   ├── getInlineStyles.js              # Parse inline styles
├── package.json                        # Project dependencies and scripts

Installation and Setup

Prerequisites

1. Node.js 18.18 or later
2. npm or other package manager

Clone the repository

git clone https://github.com/wpengine/hwptoolkit.git
cd examples/next/render-blocks-pages-router

Install dependencies

npm install

Start the development server

npm run dev

[ahuseyn]

@moonmeister do you think it's fine enough or am I missing something? If you think it satisfies the ticket, we can open it for review.

[theodesp]

Awesome!

[josephfusco]

@ahuseyn Nice work! I left some minor suggestions.

[ahuseyn]

Thanks @theodesp and @josephfusco. I've committed your suggestions.

[colinmurphy]

@ahuseyn PR looks awesome 🚀

I added 2 small suggestions in the README.

Also happy to help out with setting up wp-env if that is something you want to use 😄

[ahuseyn]

@ahuseyn PR looks awesome 🚀

I added 2 small suggestions in the README.

Also happy to help out with setting up wp-env if that is something you want to use 😄

Thanks @colinmurphy. For this example we've decided to go with mock graphql requests, but I'm planning to add your wp-env implementation to Apollo example and other future examples.
Note: I'm going to apply your suggestions as well.

[colinmurphy]

LGTM 🚀 🚀 🚀

[colinmurphy]

@ahuseyn PR looks awesome 🚀
I added 2 small suggestions in the README.
Also happy to help out with setting up wp-env if that is something you want to use 😄

Thanks @colinmurphy. For this example we've decided to go with mock graphql requests, but I'm planning to add your wp-env implementation to Apollo example and other future examples. Note: I'm going to apply your suggestions as well.

No worries. Happy to help once we have the other PR merged aswell for WP ENV and we can workout next steps :)