Skip to content

chore: Update starter example #2268

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ahuseyn wants to merge 5 commits into
base: canary
Choose a base branch
from
Draft

chore: Update starter example #2268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab802c4
update packages
ahuseyn Feb 18, 2026
517657b
Merge remote-tracking branch 'origin/canary' into update-starter-example
ahuseyn Feb 18, 2026
03f7079
migrate example into Nextjs v16
ahuseyn Feb 18, 2026
3e37265
implement multiple queries into starter example
ahuseyn Feb 18, 2026
b58566c
revert @wordpress/block-library upgrade, due to npm issue
ahuseyn Feb 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
208 changes: 104 additions & 104 deletions examples/next/faustwp-getting-started/components/ContentWrapper/ContentWrapper.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
2 changes: 1 addition & 1 deletion examples/next/faustwp-getting-started/components/EntryHeader/EntryHeader.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import 'styles/breakpoints';
@import '../../styles/breakpoints';

.component {
color: var(--wpe--color--white);
Expand Down
2 changes: 1 addition & 1 deletion examples/next/faustwp-getting-started/components/Header/Header.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import 'styles/breakpoints';
@import '../../styles/breakpoints';

.component {
color: var(--wpe--header--color);
Expand Down
2 changes: 1 addition & 1 deletion examples/next/faustwp-getting-started/components/Hero/Hero.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "styles/breakpoints";
@import "../../styles/breakpoints";

.component {
text-align: center;
Expand Down
2 changes: 1 addition & 1 deletion examples/next/faustwp-getting-started/components/NavigationMenu/NavigationMenu.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import 'styles/breakpoints';
@import '../../styles/breakpoints';

%visible {
visibility: visible;
Expand Down
2 changes: 1 addition & 1 deletion ...faustwp-getting-started/components/NavigationMenu/NavigationMenuClassesFromWP.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
26 changes: 26 additions & 0 deletions examples/next/faustwp-getting-started/fragments/LayoutQuery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
}
}
`;
8 changes: 6 additions & 2 deletions examples/next/faustwp-getting-started/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down
18 changes: 9 additions & 9 deletions examples/next/faustwp-getting-started/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
Loading
Loading