Apply suggestions from code review

Author: ahuseyn

examples/next/wp-theme-rendered-blocks/README.md

@@ -56,20 +56,22 @@ import '@/styles/globals.css';           // Optional custom app styles
 
 1. Node.js 18.18 or later
 2. npm or another package manager
-3. WPGraphql
-4. HWP Global Stylesheet Plugin
+3. WPGraphql (included in wp-env setup)
+4. HWP Global Stylesheet Plugin (included in wp-env setup)
+5. [Docker](https://www.docker.com/) (if you plan on running the example see details below)
+
+**Note** Please make sure you have all prerequisites installed as mentioned above and Docker running (`docker ps`)
 
 ### Clone the repository
 
 ```bash
 git clone https://github.com/wpengine/hwptoolkit.git
-cd examples/next/render-blocks-pages-router
 ```
 
 ### Install dependencies
 
 ```bash
-npm install
+`cd hwptoolkit && npm install`
 ```
 
 ### Build and start the application

examples/next/wp-theme-rendered-blocks/example-app/package.json

@@ -7,7 +7,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "prettier": "prettier --write ."
+    "prettier": "prettier --write .",
+    "styles:fetch": "node scripts/fetchWpGlobalStyles.js"
+
   },
   "dependencies": {
     "@wordpress/base-styles": "^5.21.0",

examples/next/wp-theme-rendered-blocks/example-app/scripts/fetchWpGlobalStyles.js

@@ -1,6 +1,5 @@
 const fs = require('fs');
 const path = require('path');
-const fetch = require('node-fetch'); // make sure node-fetch is installed
 
 async function fetchWpGlobalStyles(endpoint, outputPath = 'styles/hwp-global-styles.css', types = ['variables', 'presets', 'styles', 'base-layout-styles']) {
     const typeEnums = types.map(type => type.toUpperCase().replace(/-/g, '_'));
@@ -41,3 +40,5 @@ async function fetchWpGlobalStyles(endpoint, outputPath = 'styles/hwp-global-sty
         console.error('Error fetching global styles:', error.message);
     }
 }
+
+fetchWpGlobalStyles("http://localhost:8888/graphql")

examples/next/wp-theme-rendered-blocks/package.json

@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "description": "An example headless WordPress application using Global Styles from WordPress using WPGraphQL.",
   "scripts": {
-    "example:build": "pnpm run wp:images:unzip && pnpm run example:dev:install && pnpm run wp:start && pnpm run wp:db:import && pnpm run example:start",
+    "example:build": "pnpm run example:dev:install && pnpm run wp:start && pnpm run wp:db:import && pnpm run example:start && pnpm run example:styles:fetch",
+    "example:styles:fetch": "cd example-app && pnpm run styles:fetch",
     "example:dev:install": "cd example-app && npm install && cd ..",
     "example:start": "pnpm run wp:start && pnpm run example:dev",
     "example:stop": "pnpm run wp:stop",