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

examples/next/render-blocks-pages-router/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/next/render-blocks-pages-router/.nvmrc

@@ -0,0 +1 @@
+lts/*

examples/next/render-blocks-pages-router/README.md

@@ -0,0 +1,71 @@
+# 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 components
+- 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 a fake request to get a 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`](https://github.com/wpengine/wp-graphql-content-blocks) and [`WPGraphQL`](https://wordpress.org/plugins/wp-graphql/) 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 another package manager
+
+### Clone the repository
+
+```bash
+git clone https://github.com/wpengine/hwptoolkit.git
+cd examples/next/render-blocks-pages-router
+```
+
+### Install dependencies
+
+```bash
+npm install
+```
+
+### Start the development server
+
+```bash
+npm run dev
+```
+
+http://localhost:3000/ should render the blocks as shown below.
+
+![Animated screenshot, scrolling down and revealing the blocks supported by this example rendered on the page.](./public/screenshot.gif)

examples/next/render-blocks-pages-router/eslint.config.mjs

@@ -0,0 +1,20 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+});
+
+const eslintConfig = [
+  ...compat.config({
+    extends: ["eslint:recommended", "next/core-web-vitals"],
+  }),
+];
+
+export default eslintConfig;

examples/next/render-blocks-pages-router/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

examples/next/render-blocks-pages-router/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;