chore: Update starter example (#2268)

* update packages

* migrate example into Nextjs v16

* implement multiple queries into starter example

* revert @wordpress/block-library upgrade, due to npm issue

* upgrade node version in for the bundle analysis workflow

* add default values to the queries

* fix(ci): resolve Next.js 16 CI failures for starter example

Pin @wordpress/block-library to exact 9.10.0 to prevent SCSS import
breakage in E2E tests, add --webpack flag to bundle analysis build
for Turbopack compatibility, and drop Node 18 from E2E matrix to
match engines requirement.

* fix(starter): remove dead :global block to fix CSS Modules purity error

The :global(.component *) block in ContentWrapper.module.scss targeted
the literal un-mangled class .component, while ContentWrapper.js applies
the mangled CSS module class — so these styles never matched. The block
styles already work via global.scss importing _blocks.scss. Simply
removing the dead :global block fixes the Next.js 16 purity error
without needing any webpack overrides.

---------

Co-authored-by: Joe Fusco <hello@josephfus.co>

Author: ahuseyn

.github/workflows/e2e-next-faustwp-example.yml

@@ -14,7 +14,7 @@ jobs:
       PR_BRANCH: ${{github.event.pull_request.head.ref}}
     strategy:
       matrix:
-        node: ['18', '20', '22']
+        node: ['20', '22']
     defaults:
       run:
         working-directory: ./

.github/workflows/nextjs-bundle-analysis.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install bundle analyzer dependency globally
         run: npm install -g @next/bundle-analyzer
@@ -79,7 +79,7 @@ jobs:
 
       - name: Build Next.js example app
         working-directory: ${{ matrix.next-dir }}
-        run: npm run build
+        run: npm run build -- --webpack
 
       # Here's the first place where next-bundle-analysis' own script is used
       # This step pulls the raw bundle stats for the current bundle

examples/next/faustwp-getting-started/components/ContentWrapper/ContentWrapper.module.scss

@@ -2,133 +2,4 @@
 	max-width: var(--wpe--content--max-width);
 	margin: 0 auto;
 	line-height: 1.6875;
-
-	:global {
-		// Scope WordPress block styles within ContentWrapper.
-		@import 'styles/blocks';
-
-		* {
-			max-width: 100%;
-		}
-
-		figure {
-			margin-left: 0;
-			margin-right: 0;
-		}
-
-		h1,
-		h2,
-		h3,
-		h4,
-		h5,
-		h6 {
-			margin: 4.8rem 0;
-		}
-
-		strong {
-			font-weight: 700;
-		}
-
-		a {
-			color: var(--wpe--link--color);
-			text-decoration: underline;
-
-			&:hover,
-			&:focus {
-				color: var(--wpe--link--color);
-				text-decoration: none;
-			}
-		}
-
-		li {
-			font-size: 1.6rem;
-		}
-
-		img {
-			display: block;
-			height: auto;
-			max-width: 100%;
-		}
-
-		.alignleft {
-			display: inline;
-			float: left;
-			margin-right: 1.5em;
-		}
-
-		.alignright {
-			display: inline;
-			float: right;
-			margin-left: 1.5em;
-		}
-
-		.aligncenter {
-			clear: both;
-			display: block;
-			margin-left: auto;
-			margin-right: auto;
-		}
-
-		code,
-		pre {
-			color: var(--color-white);
-			background: var(--color-black);
-		}
-
-		code {
-			padding: 0.25rem 0.5rem;
-		}
-
-		pre {
-			max-width: 100%;
-			overflow: auto;
-			padding: 1rem;
-		}
-
-		blockquote {
-			border-top: 1px solid var(--color-black);
-			border-bottom: 1px solid var(--color-black);
-			font-style: italic;
-			margin-top: 0;
-			margin-left: 0;
-			margin-right: 0;
-			padding: 4rem 1rem 4rem;
-			text-align: center;
-
-			&::before {
-				content: '”';
-				display: block;
-				font-size: 6rem;
-				line-height: 0;
-				margin: 2rem 0;
-			}
-
-			> *:last-child {
-				margin-bottom: 0;
-			}
-		}
-
-		table {
-			border-collapse: collapse;
-			width: 100%;
-		}
-
-		thead th {
-			border-bottom: 1px solid var(--wpe--color--border);
-			padding-bottom: 0.5em;
-		}
-
-		th {
-			padding: 0.4rem 0;
-			text-align: left;
-		}
-
-		tr {
-			border-bottom: 1px solid var(--wpe--color--border);
-		}
-
-		td {
-			padding: 0.4em;
-		}
-	}
 }

examples/next/faustwp-getting-started/components/EntryHeader/EntryHeader.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/breakpoints';
+@import '../../styles/breakpoints';
 
 .component {
 	color: var(--wpe--color--white);

examples/next/faustwp-getting-started/components/Header/Header.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/breakpoints';
+@import '../../styles/breakpoints';
 
 .component {
 	color: var(--wpe--header--color);

examples/next/faustwp-getting-started/components/Hero/Hero.module.scss

@@ -1,4 +1,4 @@
-@import "styles/breakpoints";
+@import "../../styles/breakpoints";
 
 .component {
 	text-align: center;

examples/next/faustwp-getting-started/components/NavigationMenu/NavigationMenu.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/breakpoints';
+@import '../../styles/breakpoints';
 
 %visible {
 	visibility: visible;

examples/next/faustwp-getting-started/components/NavigationMenu/NavigationMenuClassesFromWP.module.scss

@@ -1,7 +1,7 @@
 // Classes in this file can be optionally added to menu items from within WordPress.
 // Appearance --> Menus --> Screen Options --> CSS Classes
 
-@import 'styles/breakpoints';
+@import '../../styles/breakpoints';
 
 .button {
 	a {

examples/next/faustwp-getting-started/fragments/LayoutQuery.js

@@ -0,0 +1,26 @@
+import { gql } from '@apollo/client';
+import { BlogInfoFragment } from './GeneralSettings';
+import { NavigationMenu } from '../components';
+
+export const GET_LAYOUT_QUERY = gql`
+	${BlogInfoFragment}
+	${NavigationMenu.fragments.entry}
+	query GetLayout(
+		$headerLocation: MenuLocationEnum
+		$footerLocation: MenuLocationEnum
+	) {
+		generalSettings {
+			...BlogInfoFragment
+		}
+		headerMenuItems: menuItems(where: { location: $headerLocation }) {
+			nodes {
+				...NavigationMenuItemFragment
+			}
+		}
+		footerMenuItems: menuItems(where: { location: $footerLocation }) {
+			nodes {
+				...NavigationMenuItemFragment
+			}
+		}
+	}
+`;

examples/next/faustwp-getting-started/next.config.js

@@ -7,10 +7,14 @@ const { createSecureHeaders } = require('next-secure-headers');
 module.exports = withFaust({
   reactStrictMode: true,
   sassOptions: {
-    includePaths: ['node_modules'],
+    includePaths: ['node_modules', '.'],
   },
   images: {
-    domains: [getWpHostname()],
+    remotePatterns: [
+      {
+        hostname: getWpHostname(),
+      },
+    ],
   },
   i18n: {
     locales: ['en'],