diff --git a/.github/workflows/e2e-next-faustwp-example.yml b/.github/workflows/e2e-next-faustwp-example.yml index f98bfa6ce..a0b47813d 100644 --- a/.github/workflows/e2e-next-faustwp-example.yml +++ b/.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: ./ diff --git a/.github/workflows/nextjs-bundle-analysis.yml b/.github/workflows/nextjs-bundle-analysis.yml index e65cb8d7b..a6f5c968d 100644 --- a/.github/workflows/nextjs-bundle-analysis.yml +++ b/.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 diff --git a/examples/next/faustwp-getting-started/components/ContentWrapper/ContentWrapper.module.scss b/examples/next/faustwp-getting-started/components/ContentWrapper/ContentWrapper.module.scss index 1fe0634c7..52dc3bd9d 100644 --- a/examples/next/faustwp-getting-started/components/ContentWrapper/ContentWrapper.module.scss +++ b/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; - } - } } diff --git a/examples/next/faustwp-getting-started/components/EntryHeader/EntryHeader.module.scss b/examples/next/faustwp-getting-started/components/EntryHeader/EntryHeader.module.scss index bed8bec82..88fa39eeb 100644 --- a/examples/next/faustwp-getting-started/components/EntryHeader/EntryHeader.module.scss +++ b/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); diff --git a/examples/next/faustwp-getting-started/components/Header/Header.module.scss b/examples/next/faustwp-getting-started/components/Header/Header.module.scss index e26ce301a..92fcfd15a 100644 --- a/examples/next/faustwp-getting-started/components/Header/Header.module.scss +++ b/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); diff --git a/examples/next/faustwp-getting-started/components/Hero/Hero.module.scss b/examples/next/faustwp-getting-started/components/Hero/Hero.module.scss index 2b713d4a1..c04443d32 100644 --- a/examples/next/faustwp-getting-started/components/Hero/Hero.module.scss +++ b/examples/next/faustwp-getting-started/components/Hero/Hero.module.scss @@ -1,4 +1,4 @@ -@import "styles/breakpoints"; +@import "../../styles/breakpoints"; .component { text-align: center; diff --git a/examples/next/faustwp-getting-started/components/NavigationMenu/NavigationMenu.module.scss b/examples/next/faustwp-getting-started/components/NavigationMenu/NavigationMenu.module.scss index c7623f924..5c88210e6 100644 --- a/examples/next/faustwp-getting-started/components/NavigationMenu/NavigationMenu.module.scss +++ b/examples/next/faustwp-getting-started/components/NavigationMenu/NavigationMenu.module.scss @@ -1,4 +1,4 @@ -@import 'styles/breakpoints'; +@import '../../styles/breakpoints'; %visible { visibility: visible; diff --git a/examples/next/faustwp-getting-started/components/NavigationMenu/NavigationMenuClassesFromWP.module.scss b/examples/next/faustwp-getting-started/components/NavigationMenu/NavigationMenuClassesFromWP.module.scss index 78e921337..bae5abdb1 100644 --- a/examples/next/faustwp-getting-started/components/NavigationMenu/NavigationMenuClassesFromWP.module.scss +++ b/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 { diff --git a/examples/next/faustwp-getting-started/fragments/LayoutQuery.js b/examples/next/faustwp-getting-started/fragments/LayoutQuery.js new file mode 100644 index 000000000..4e36d272a --- /dev/null +++ b/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 + } + } + } +`; diff --git a/examples/next/faustwp-getting-started/next.config.js b/examples/next/faustwp-getting-started/next.config.js index b886fe7ab..5707faef7 100644 --- a/examples/next/faustwp-getting-started/next.config.js +++ b/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'], diff --git a/examples/next/faustwp-getting-started/package.json b/examples/next/faustwp-getting-started/package.json index 0314ba25b..25ded783f 100644 --- a/examples/next/faustwp-getting-started/package.json +++ b/examples/next/faustwp-getting-started/package.json @@ -10,23 +10,23 @@ "start": "faust start" }, "dependencies": { - "@apollo/client": "^3.10.4", - "@faustwp/cli": "^3.3.4", - "@faustwp/core": "^3.3.4", + "@apollo/client": "^3.14.0", + "@faustwp/cli": "^3.3.6", + "@faustwp/core": "^3.3.6", "@wordpress/base-styles": "^6.15.0", - "@wordpress/block-library": "^9.10.0", + "@wordpress/block-library": "9.10.0", "classnames": "^2.5.1", - "graphql": "^16.8.1", - "next": "^15.2.4", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "sass": "1.77.3" + "graphql": "^16.12.0", + "next": "^16.1.6", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "sass": "1.97.3" }, "devDependencies": { "next-secure-headers": "^2.2.0" }, "engines": { - "node": ">=18", + "node": ">=20.9", "npm": ">=8" } } diff --git a/examples/next/faustwp-getting-started/wp-templates/category.js b/examples/next/faustwp-getting-started/wp-templates/category.js index cee90fe1b..8de7a62be 100644 --- a/examples/next/faustwp-getting-started/wp-templates/category.js +++ b/examples/next/faustwp-getting-started/wp-templates/category.js @@ -1,106 +1,99 @@ import { gql } from '@apollo/client'; +import { useFaustQuery } from '@faustwp/core'; import * as MENUS from '../constants/menus'; -import { BlogInfoFragment } from '../fragments/GeneralSettings'; import { - Header, - Footer, - Main, - Container, - EntryHeader, - NavigationMenu, - Post, - FeaturedImage, - SEO, + Header, + Footer, + Main, + Container, + EntryHeader, + Post, + FeaturedImage, + SEO, } from '../components'; +import { GET_LAYOUT_QUERY } from '../fragments/LayoutQuery'; + +const GET_CATEGORY_QUERY = gql` + ${FeaturedImage.fragments.entry} + query GetCategory($uri: String!) { + nodeByUri(uri: $uri) { + ... on Category { + name + posts { + edges { + node { + id + title + content + date + uri + ...FeaturedImageFragment + author { + node { + name + } + } + } + } + } + } + } + } +`; export default function Component(props) { - const { title: siteTitle, description: siteDescription } = - props?.data?.generalSettings; - const primaryMenu = props?.data?.headerMenuItems?.nodes ?? []; - const footerMenu = props?.data?.footerMenuItems?.nodes ?? []; - const { name, posts } = props.data.nodeByUri; + const { generalSettings, headerMenuItems, footerMenuItems } = + useFaustQuery(GET_LAYOUT_QUERY); + const { nodeByUri } = useFaustQuery(GET_CATEGORY_QUERY) ?? {}; - return ( - <> - -
-
- <> - - - {posts.edges.map((post) => ( - - ))} - - -
-