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..36e0573dd 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,133 @@ max-width: var(--wpe--content--max-width); margin: 0 auto; line-height: 1.6875; +} - :global { - // Scope WordPress block styles within ContentWrapper. - @import 'styles/blocks'; +:global(.component *) { + // Scope WordPress block styles within ContentWrapper. + @import '../../styles/blocks'; - * { - max-width: 100%; - } + * { + max-width: 100%; + } - figure { - margin-left: 0; - margin-right: 0; - } + figure { + margin-left: 0; + margin-right: 0; + } - h1, - h2, - h3, - h4, - h5, - h6 { - margin: 4.8rem 0; - } + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 4.8rem 0; + } - strong { - font-weight: 700; - } + strong { + font-weight: 700; + } - a { - color: var(--wpe--link--color); - text-decoration: underline; + a { + color: var(--wpe--link--color); + text-decoration: underline; - &:hover, - &:focus { - color: var(--wpe--link--color); - text-decoration: none; - } + &:hover, + &:focus { + color: var(--wpe--link--color); + text-decoration: none; } + } - li { - font-size: 1.6rem; - } + li { + font-size: 1.6rem; + } - img { - display: block; - height: auto; - max-width: 100%; - } + img { + display: block; + height: auto; + max-width: 100%; + } - .alignleft { - display: inline; - float: left; - margin-right: 1.5em; - } + .alignleft { + display: inline; + float: left; + margin-right: 1.5em; + } - .alignright { - display: inline; - float: right; - margin-left: 1.5em; - } + .alignright { + display: inline; + float: right; + margin-left: 1.5em; + } - .aligncenter { - clear: both; - display: block; - margin-left: auto; - margin-right: auto; - } + .aligncenter { + clear: both; + display: block; + margin-left: auto; + margin-right: auto; + } - code, - pre { - color: var(--color-white); - background: var(--color-black); - } + code, + pre { + color: var(--color-white); + background: var(--color-black); + } - code { - padding: 0.25rem 0.5rem; - } + code { + padding: 0.25rem 0.5rem; + } - pre { - max-width: 100%; - overflow: auto; - padding: 1rem; - } + 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; - } + 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; } - table { - border-collapse: collapse; - width: 100%; + > *:last-child { + margin-bottom: 0; } + } - thead th { - border-bottom: 1px solid var(--wpe--color--border); - padding-bottom: 0.5em; - } + table { + border-collapse: collapse; + width: 100%; + } - th { - padding: 0.4rem 0; - text-align: left; - } + thead th { + border-bottom: 1px solid var(--wpe--color--border); + padding-bottom: 0.5em; + } - tr { - border-bottom: 1px solid var(--wpe--color--border); - } + th { + padding: 0.4rem 0; + text-align: left; + } - td { - padding: 0.4em; - } + 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..5d415f92d 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", "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..dcfbe1a59 100644 --- a/examples/next/faustwp-getting-started/wp-templates/category.js +++ b/examples/next/faustwp-getting-started/wp-templates/category.js @@ -1,106 +1,98 @@ 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) => ( - - ))} - - -
-