docs: Next.js WP Theme rendered blocks #115

whoami-pwd · 2025-03-25T14:22:17Z

Provides an example of fetching WP Global Stylesheet:

An example WP Plugin
An example WP Global Stylesheet Fetching Script
Description in READM.md

moonmeister

Looks like a good start. Do folks need to include https://developer.wordpress.org/block-editor/reference-guides/packages/packages-base-styles/ ??

pnpm-lock.yaml

plugins/hwp-global-stylesheet/hwp-global-stylesheet.php

examples/next/render-blocks-pages-router/scripts/fetchWpGlobalStyles.js

moonmeister

This should be its own example, not a modification of a previous example. Thanks.

moonmeister

looking good, I'm not seeing a wp-env setup though.

colinmurphy

@whoami-pwd

This looks good but there isn't any details on how to setup with wp-env in your README. 🚀

whoami-pwd · 2025-04-15T15:06:47Z

@whoami-pwd

This looks good but there isn't any details on how to setup with wp-env in your README. 🚀

@colinmurphy Sure, readme instructions added. Thank you!

colinmurphy

@whoami-pwd

LGTM 🚀 🚀 🚀

moonmeister

did a quick review of the JS. didn't do any actual testing but in general looks good. I left some quick notes on things I'd do different. That said none are deal breakers.

moonmeister · 2025-04-18T03:11:32Z

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

+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, '_'));


does this really need RegEx or can it just do standard string replaces?

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

ahuseyn

Nice script and example @whoami-pwd 🚀🚀

Build failed for me, so I've suggested the fixes related to it.
Suggested changes to the readme.
Added a script to run the style fetching and included it to the wp-env setup flow.

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

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

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

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

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

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

josephfusco

@whoami-pwd This looks good, I can help migrate this to from commonJS to ESM before merging in.

josephfusco · 2025-04-18T13:55:01Z

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

+    "https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
+    "https://github.com/wp-graphql/wpgraphql-ide/releases/latest/download/wpgraphql-ide.zip",


Using the latest versions is good; we might want to consider pinning to a specific version of each plugin to mitigate examples breaking on future updates.

@josephfusco That's a good point.

I created this task here as we also need to consider a few other things - #148

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

colinmurphy

@whoami-pwd @ahuseyn

Looks good to me 🚀 🚀 🚀

One small thing (not a blocker) is once the PR is merged, lets create a follow on PR to add the example into the example README.

colinmurphy · 2025-04-23T18:10:27Z

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

+    "https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
+    "https://github.com/wp-graphql/wpgraphql-ide/releases/latest/download/wpgraphql-ide.zip",


@josephfusco That's a good point.

I created this task here as we also need to consider a few other things - #148

colinmurphy · 2025-04-23T18:23:35Z

Also tested locally and looks great ❤️

whoami-pwd added 3 commits March 24, 2025 14:02

Adds WP plugin example for the stylesheet exposure.

a496e09

Provides CLI command.

4d3c0a5

Updates readme.

9951d2c

whoami-pwd changed the title ~~Example: Next.js WP Theme rendered blocks~~ feat: Next.js WP Theme rendered blocks comand Mar 25, 2025

whoami-pwd marked this pull request as ready for review March 27, 2025 09:46

whoami-pwd requested a review from a team as a code owner March 27, 2025 09:46

moonmeister requested changes Mar 27, 2025

View reviewed changes

pnpm-lock.yaml Outdated Show resolved Hide resolved

plugins/hwp-global-stylesheet/hwp-global-stylesheet.php Outdated Show resolved Hide resolved

examples/next/render-blocks-pages-router/scripts/fetchWpGlobalStyles.js Outdated Show resolved Hide resolved

whoami-pwd and others added 5 commits April 3, 2025 17:45

Reverts pnpm-lock.yaml changes.

c6d504e

Updates JS example.

e62df79

Moves the plugin to the example folder.

671d3ba

Merge branch 'main' into example-wp-theme-rendered-blocks

ac1d7b4

Fixes lock typo.

72324e6

whoami-pwd requested review from moonmeister, josephfusco and ahuseyn April 3, 2025 16:20

whoami-pwd changed the title ~~feat: Next.js WP Theme rendered blocks comand~~ feat: Next.js WP Theme rendered blocks Apr 3, 2025

moonmeister requested changes Apr 3, 2025

View reviewed changes

whoami-pwd added 4 commits April 7, 2025 12:46

Moves plugin to the separate example folder.

7b73aa3

Restores original versions of the example.

add904e

Provides example files.

b40ab65

Resets files

0760b8e

whoami-pwd force-pushed the example-wp-theme-rendered-blocks branch from 5b32846 to 0760b8e Compare April 7, 2025 11:40

whoami-pwd requested a review from moonmeister April 7, 2025 11:41

whoami-pwd mentioned this pull request Apr 7, 2025

example: Blocks rendered with WP Theme styles #64

Open

moonmeister reviewed Apr 7, 2025

View reviewed changes

moonmeister changed the title ~~feat: Next.js WP Theme rendered blocks~~ docs: Next.js WP Theme rendered blocks Apr 8, 2025

whoami-pwd added 2 commits April 11, 2025 17:29

Provides the wp-env configuration.

7b62e79

Provides the wp-env configuration.

644ceba

whoami-pwd requested a review from moonmeister April 11, 2025 15:32

colinmurphy requested changes Apr 14, 2025

View reviewed changes

Updates the README.md.

71abfa9

whoami-pwd requested a review from colinmurphy April 15, 2025 15:05

colinmurphy previously approved these changes Apr 15, 2025

View reviewed changes

moonmeister previously approved these changes Apr 18, 2025

View reviewed changes

ahuseyn reviewed Apr 18, 2025

View reviewed changes

josephfusco previously approved these changes Apr 18, 2025

View reviewed changes

moonmeister assigned moonmeister and ahuseyn and unassigned moonmeister Apr 22, 2025

Apply suggestions from code review

c07baf2

ahuseyn dismissed stale reviews from josephfusco, moonmeister, and colinmurphy via c07baf2 April 23, 2025 13:09

ahuseyn added 3 commits April 23, 2025 15:30

fix: pnpm to npm

e54bb4d

fix: fetchWpGlobalStyles cjs to esm

3310fc5

docs: minor fixes

e2bc7ee

ahuseyn requested review from colinmurphy, josephfusco and moonmeister April 23, 2025 13:35

colinmurphy approved these changes Apr 23, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: Next.js WP Theme rendered blocks #115

docs: Next.js WP Theme rendered blocks #115

whoami-pwd commented Mar 25, 2025 •

edited

Loading

moonmeister left a comment

moonmeister left a comment

moonmeister left a comment

colinmurphy left a comment

whoami-pwd commented Apr 15, 2025

colinmurphy left a comment

moonmeister left a comment

moonmeister Apr 18, 2025

ahuseyn left a comment

josephfusco left a comment

josephfusco Apr 18, 2025

colinmurphy Apr 23, 2025

colinmurphy left a comment

colinmurphy Apr 23, 2025

colinmurphy commented Apr 23, 2025

		"https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
		"https://github.com/wp-graphql/wpgraphql-ide/releases/latest/download/wpgraphql-ide.zip",

docs: Next.js WP Theme rendered blocks #115

Are you sure you want to change the base?

docs: Next.js WP Theme rendered blocks #115

Conversation

whoami-pwd commented Mar 25, 2025 • edited Loading

moonmeister left a comment

Choose a reason for hiding this comment

moonmeister left a comment

Choose a reason for hiding this comment

moonmeister left a comment

Choose a reason for hiding this comment

colinmurphy left a comment

Choose a reason for hiding this comment

whoami-pwd commented Apr 15, 2025

colinmurphy left a comment

Choose a reason for hiding this comment

moonmeister left a comment

Choose a reason for hiding this comment

moonmeister Apr 18, 2025

Choose a reason for hiding this comment

ahuseyn left a comment

Choose a reason for hiding this comment

josephfusco left a comment

Choose a reason for hiding this comment

josephfusco Apr 18, 2025

Choose a reason for hiding this comment

colinmurphy Apr 23, 2025

Choose a reason for hiding this comment

colinmurphy left a comment

Choose a reason for hiding this comment

colinmurphy Apr 23, 2025

Choose a reason for hiding this comment

colinmurphy commented Apr 23, 2025

whoami-pwd commented Mar 25, 2025 •

edited

Loading