Most of the setup has been done, just needs to be configured to work with MDX.

The following WP blocks require corresponding components for handling content and display.

Requirements:

• Paragraph
• Heading
• List (UL/OL)
• Quote
• PullQuote
• Table
• Image
• Gallery
• Code
• Preformatted
• Button/Buttons
• Media & Text (Columns)
• Separator
• Spacer
• Columns
• Cover
• Embed
• YouTube
• Vimeo
• Twitter

As a user, I want to log into WordPress from the frontend so that:

• I can post a comment with my account
• I can view protected content
• I can view my WooCommerce powered shopping cart

Requirements

• Create a authentication layer between the Frontend and Backend (oAuth, JWT, cookie, etc...)
• Leverage https://next-auth.js.org/ on the frontend
• Create a sign-in link/button on the frontend
  • Create a sign-in page
  • Create a sign-in form

Need to support comments for blog posts.

• Query comment via GraphQL
• Display a comment form on Posts
• Validate comment input data
• Send comment back to WordPress DB
• Support for nested (maybe 3 levels? deep)

Possible 3rd party package: https://github.com/disqus/disqus-react (however this locks client into Disqus)

The header should pull in nav menu items from WordPress.

Requirements

• Query WordPress via GraphQL
• Bring in nav menu and nested menu items
• Convert URLs to point at the frontend
• Display, with dropdown support

Create a card component.

Requirements:

• Title
• Body
• Timestamp
• Button with URL and Text
• Meta
• Avatar
• Image

Create sample data and fields for the following CPTs:

• Posts
• Pages
• Forms
• Comments
• Careers
• Events
• Portfolio
• Services
• Team Members
• Testimonials

Expand upon #154 to pull CPT archive meta title dynamically. Will require filtering WP GraphQL via graphql_resolve_field then calling wpseo_replace_vars() on $result['contentTypes'][ $type ]['archive']['title'] or adding custom seo field to CPT plural query; however, passing get_post_type_object( $type ) to wpseo_replace_vars() does not properly replace pt_plural so we'll need to figure out how that should be handled.

Create the Fifty/Fifty block from the Page Mockup.

Thanks for taking the time to file a bug report! Please fill out this form as completely as possible.

If you leave out sections there is a high likelihood it will be moved to our GitHub Discussions.

Not able to add theme to the Wordpress localwp

To Reproduce
1.Followed all the steps till setting up Wordpress using localwp.
2. Searched for a theme in admin dashboard.
3. Clicked on install theme
4. Getting the error "installation failed could not create directory"

Expected behavior
Theme should be installed for the wordpress

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome

Additional context
The localwp creates folder in C:\Users<USER>\Local Sites
The permissions of the folder are Readonly is it due to this?
Can you please let me know a way to change the permissions of the folder on windows

Need to support grabbing SEO data from Yoast, and bringing that data into posts, pages, and CPTs. The WP GraphQL Yoast plugin is installed and exposes this to GraphQL.

An example query for a single post:

query MyQuery {
  post(idType: DATABASE_ID, id: "12") {
    author {
      name
    }
    seo {
      metaDesc
      metaKeywords
      metaRobotsNofollow
      metaRobotsNoindex
    }
  }
}

Global settings query:

query MyQuery {
  seo {
    schema {
      companyName
      logo {
        sourceUrl
      }
      siteName
      siteUrl
      wordpressSiteName
    }
    social {
      facebook {
        url
        defaultImage {
          sourceUrl(size: FULL_WIDTH)
        }
      }
    }
  }
}

Hi guys, I'm using your repo as a reference for a WordPress and Next implementation. Thank you for all the work you are doing, it is a great contribution.

Description
I am having some issues fetching hierarchical posts. You are fetching posts by ID from the URI if it is hierarchical, from the SLUG if it is not here.

And then you are splitting the path here to return it in the getStaticPaths function.

All of that makes perfect sense. But I'm seeing that if you have a URI for example people/name, you return the path as an array ['people', 'name'] and then in the params attribute of getStaticProps here, it receives only slug: ['name']

For some reason in the background I am losing one of the parameters.

Notes
I found some discussions that could be related, I add the references in case they are useful:
vercel/next.js#14150
vercel/next.js#11272
vercel/next.js#11738

I would like to know if it was something that you were also experiencing or maybe I am doing something wrong. Thanks

Build the Paragraph field from GravityForms out.

• Text area input component
• GravityForm field to translate GF available props to Text Area component. Note: Not all props may be necessary
• Setup Textarea validation https://github.com/jquense/yup. Check Storybook Molecules > GravityForms > Fields for more details.

Add support for WordPress menus.

https://docs.wpgraphql.com/getting-started/menus/#queries

Example query to get the "Primary" menu::

query MyQuery {
  menu(id: "bmF2X21lbnU6Ng==") {
    name
    menuItems {
      edges {
        node {
          url
          label
        }
      }
    }
  }
}

Archive settings via Yoast (e.g., Settings for Team Members archive): https://nextjsdevstart.wpengine.com/wp-admin/admin.php?page=wpseo_titles#top#post-types

Singular post type SEO settings are available via GraphQL with the WP GraphQL Yoast SEO add-on; however, post type archive settings are not currently exposed: ashhitch/wp-graphql-yoast-seo#81

Note: Blog archive SEO settings are not included in Yoast settings but instead can be pulled from the WP posts page.

The WordPress backend the WebDevStudios team is using for development at https://nextjs.wpengine.com/ is running WP GraphQL version 0.9.1 while the latest version at the time this issue is being written is 0.12.1.

This update adds the locations field in the menus query, which is relevant to #4

Rather than deal with GraphQL JWT stuff...let's leverage Application Password support, now standard in WordPress 5.6 and WP GraphQL.

Requirements

• Start by reading the official Integration Guide
• View WP GraphQL's application password PR #1529 (merged back in Oct)
• Then use the generated user/pass located in 1password --> Next.js Starter --> WordPress Application Password
• Finally, create an authenticated connection using Apollo

Need to support possible custom fields. The WP GraphQL ACF plugin is installed.

• https://docs.wpgraphql.com/extensions/wpgraphql-advanced-custom-fields/

Example query:

query MyQuery {
  post(id: "12", idType: DATABASE_ID) {
    acf_whatiminto {
      book
      music
      television
      fieldGroupName
    }
  }
}

Enable the settings on an ACF field:

It's showing colors that don't exist. Should only show black and white.

Create a connection between Gravity Forms in WordPress and Formik

Requirements

• User creates a form in WordPress, and drops it into a page via Gutenberg
• Front-end queries the page (already done) and displays the form via Formik
• Each field from Gravity Forms needs to be matched up with Formik
• Submissions need to go back into WordPress (partner w/ @ravewebdev on this)

Investigate some options for querying WordPress.

Why?

One of the biggest pain points during the OB/BRI project was querying data via GraphQL. While it was great to query exactly what we wanted, it was also a huge PITA. If the client changes field requirements, Rebekah had to update dozens of queries. Also, even with heavy in-memory caching like Redis? WordPress + WP GraphQL would fall flat on its face and throw 5xx errors during builds.

Axios

This works. It's easy. It's fast and cheap. But there's no caching, and it can make WordPress fall on its face during a build.

Apollo Client

Built for GraphQL queries and also can handle global state management. It also supports in-memory caching.

Relay

Like Apollo, handles queries and state management. I've read that it's more complex to setup and maintain.

SQL

Query MySQL directly? Everything listed above is just middleware. Why not take advantage of database built for this sort of thing.

Server Components

While this tech is just in the planning stages, it's interesting. https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

Need to support and route to Custom Post Types. Both CPTUI and WP GraphQL CPTUI plugins are installed.

https://docs.wpgraphql.com/getting-started/custom-post-types/

I created a sample CPT called, "Team" and setup CPTUI + WP GraphQL CPTUI + ACF field

Enable CPT in GraphQL:

Enable ACF fields:

Example query:

query MyQuery {
  team_members {
    edges {
      node {
        title
        content
        acf_team_member_title {
          title
        }
      }
    }
  }
}

Over the holiday break, I discovered Next SEO which is an awesome package to manage all aspects of SEO, including JSONLD.

Requirements

• Refactor codebase and hook up next-seo
• Setup defaults for site name, site description, open graph, etc...
• Setup defaults for pages and blog posts
• Setup JSONLD

Right now we're loading unoptimized images straight from WordPress. It would be great if we could incorporate support for Next Image.

Next Image would solve a few problems which would increase PageSpeed scores:

1. Reduce CLS
2. Convert images to an optimized format (.webp for example)
3. Serve up responsive images

This isn't straightforward because Next Image requires both the height/width attribute. We would also need to remove (or rename) our <Image /> component since it shares the same name as the Next <Image /> component.

Because the height/width aren't being sent via blockJSON, we'd need to do an additional WP GraphQL query to retrieve the media attributes via the image ID SOURCE_URL (which is being sent via blockJSON).

Requirements

• Create a new "Media" query, based on media ID
• Replace our <Image /> component with Next.js <Image />
• Pass in media attributes (height, width, alt)

Example Query

    query getMediaById($url: ID!) {
      mediaItem(id: $url, idType: SOURCE_URL) {
        mediaDetails {
          height
          width
        }
      }
    }

I would like some sort of front-end authentication/single sign-on so users can perform actions.

User Stories

As a user, I want to be able to register for an account on the front-end, via my existing social media, Google, Microsoft, or WordPress.com accounts.

As a user, I want to be able to log into my account from the front-end.

As a user, I want to be able to log out from the front-end.

As an administrator, I want to be able to perform administrative tasks on registered users in the WordPress dashboard.

Future User Stories

These items will be for a future Github issue. Please keep them in mind when working on this issue.

As a user, I want to be able to see restricted content after I log in.

As a user, I want to be able to favorite/like blog posts or content.

As a user, I want to be able to view my favorited/liked blog posts in a central location like a dashboard.

As a user, I want to be create and curate lists of my favorites.

Related Technologies

• Auth0 - A very popular, paid "auth-as-a-service" provider for SSO. They do offer a free tier, have robust documentation, and even have (experimental) Next.js support and support open-source.

• Next Auth - An alternative to Auth0, which has native support for Next.js, and supports OAuth, Active Directory, and JWT.

Due to some challenges with passing in field defaults on complex inputs such as Checkbox groups or Select inputs, the current solution feature needs refactored.

Issue

Currently, fields defaults get mapped by checking all fields from GravityForms for a default value . The problem is that not all fields have a direct defaultValue property. Fields such as Checkboxes have this value stored elsewhere such as checkboxChoices.

Note: This bug is likely to occur on other fields.

defaults = {}
// {fieldId: default value prop}
Object.assign(defaults, {[getGfFieldId(field.node.id)]: field.node.defaultValue }

Solution

This feature should be dynamic and flexible. Similar to how field validation is handled, we should be able to pass in default values for each specific field type.

Describe the bug
A recent plugin update caused the Gravity Forms block to break / not display on the FE. When echoing block attributes, the following errors display:

Cannot query field "choices" on type "PasswordField".
Cannot query field "allowsPrepopulate" on type "PostContentField".
Cannot query field "allowsPrepopulate" on type "PostContentField".
Cannot query field "allowsPrepopulate" on type "SignatureField".
Cannot query field "allowsPrepopulate" on type "SignatureField".

Block query needs to be updated accordingly.

To Reproduce
https://nextjs-wordpress-starter-develop.vercel.app/contact

• Contact Us form does not display

Expected behavior
Contact Us form should display on Contact page.

Screenshots

Our custom permalink structure seems to be causing weird errors when querying by slug/URI: wp-graphql/wp-graphql#1639. When attempting to query a non-existent post, GraphQL is throwing an error instead of returning null.

Once this is fixed, getPostTypeStaticProps should be refactored, specifically regarding pageData.error:

• We should not be returning the notFound prop if an actual error is encountered. In that case, we should remove the early notFound returns, which will pass error and errorMessage along to _app.js, which will render the Error component.
• If a post is actually not found, getPostTypeStaticProps should receive (from whichever getter function) no error but a null value for the post prop (I believe this is already the case but should be confirmed). Then we can use notFound, e.g.:

if (!error && !post) {
    return {
        notFound: true
    }
}

This will then render the 404 page, but actual errors will show the Next.js error component instead.

Describe the bug
After following the Backend Setup wiki and the Frontend Setup wiki, I get this error when running npm run dev.

TypeError: Object(...) is not a function
    at MyDocument.render (webpack-internal:///./pages/_document.js:14:99)
    at d (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:35:231)
    at bb (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at exports.renderToStaticMarkup (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:51:446)
    at renderDocument (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/render.js:3:715)
    at renderToHTML (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/render.js:56:103)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at async /Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:107:97
    at async /Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:100:142
    at async DevServer.renderToHTMLWithComponents (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:132:387)
    at async DevServer.renderErrorToHTML (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:134:327)
    at async DevServer.renderErrorToHTML (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/server/next-dev-server.js:34:1204)
    at async DevServer.renderToHTML (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:133:1281)
TypeError: Object(...) is not a function
    at App (webpack-internal:///./pages/_app.js:137:123)
    at d (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
    at bb (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at exports.renderToString (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/render.js:54:851)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:135:19)
    at loadGetInitialProps (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/render.js:54:1142)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at async /Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:107:97
    at async __wrapper (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/lib/coalesced-function.js:1:330)
    at async DevServer.renderToHTMLWithComponents (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:132:387)
    at async DevServer.renderToHTML (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:133:522)
event - build page: /[...slug]
wait  - compiling...
event - compiled successfully
(node:22406) ExperimentalWarning: AbortController is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
TypeError: Object(...) is not a function
    at MyDocument.render (webpack-internal:///./pages/_document.js:14:99)
    at d (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:35:231)
    at bb (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at exports.renderToStaticMarkup (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:51:446)
    at renderDocument (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/render.js:3:715)
    at renderToHTML (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/render.js:56:103)
    at async /Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:107:97
    at async /Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:100:142
    at async DevServer.renderToHTMLWithComponents (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:132:387)
    at async DevServer.renderErrorToHTML (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:134:327)
    at async DevServer.renderErrorToHTML (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/server/next-dev-server.js:34:1204)
    at async DevServer.renderToHTML (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:133:1281)
    at async DevServer.renderToHTML (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/server/next-dev-server.js:34:578)
    at async DevServer.render (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:72:236)
Error: Response not successful: Received status code 500
    at new ApolloError (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/@apollo/client/errors/errors.cjs.js:31:28)
    at /Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/@apollo/client/core/core.cjs.js:1490:19
    at /Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/@apollo/client/utilities/utilities.cjs.js:958:69
    at new Promise (<anonymous>)
    at Object.error (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/@apollo/client/utilities/utilities.cjs.js:958:21)
    at notifySubscription (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/zen-observable/lib/Observable.js:140:18)
    at onNotify (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/zen-observable/lib/Observable.js:179:3)
    at SubscriptionObserver.error (/Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/zen-observable/lib/Observable.js:240:7)
    at /Users/micopanaga/Local Sites/nextjs/app/nextjs-wordpress-starter/node_modules/@apollo/client/utilities/utilities.cjs.js:946:68
    at Array.forEach (<anonymous>) {
  type: 'ApolloError',
  graphQLErrors: [],
  networkError: {
    name: 'ServerError',
    response: { size: 0, timeout: 0 },
    statusCode: 500,
    result: {
      code: 'internal_server_error',
      message: '<p>There has been a critical error on this website.</p><p><a href="https://wordpress.org/support/article/debugging-in-wordpress/">Learn more about debugging in WordPress.</a></p>',
      data: [Object],
      additional_errors: []
    }
  }
}

WP error logs shows this

[19-Feb-2021 14:11:30 UTC] PHP Fatal error:  Uncaught WPGraphQLGutenberg\Blocks\RegistryNotSourcedException: Client side block registry is missing. You need to open up gutenberg or load it from WPGraphQLGutenberg Admin page. in ~/nextjs/app/public/wp-content/plugins/wp-graphql-gutenberg/src/Blocks/Registry.php:41
Stack trace:
#0 ~/nextjs/app/public/wp-content/plugins/wp-graphql-gutenberg/src/Schema/Types/BlockTypes.php(253): WPGraphQLGutenberg\Blocks\Registry::get_registry()
#1 ~/nextjs/app/public/wp-includes/class-wp-hook.php(287): WPGraphQLGutenberg\Schema\Types\BlockTypes->WPGraphQLGutenberg\Schema\Types\{closure}(Object(WPGraphQL\Registry\TypeRegistry))
#2 ~/nextjs/app/public/wp-includes/class-wp-hook.php(311): WP_Hook->apply_filters(NULL, Array)
#3 ~/nextjs/app/public/wp-includes/plugin.php(484): WP_Hook->do_action(Array)
#4 ~/nextjs/app/public/wp-content/plugins/wp-graphql/src/Regis in ~/nextjs/app/public/wp-content/plugins/wp-graphql-gutenberg/src/Blocks/Registry.php on line 41
[19-Feb-2021 14:11:32 UTC] PHP Fatal error:  Uncaught WPGraphQLGutenberg\Blocks\RegistryNotSourcedException: Client side block registry is missing. You need to open up gutenberg or load it from WPGraphQLGutenberg Admin page. in ~/nextjs/app/public/wp-content/plugins/wp-graphql-gutenberg/src/Blocks/Registry.php:41
Stack trace:
#0 ~/nextjs/app/public/wp-content/plugins/wp-graphql-gutenberg/src/Schema/Types/BlockTypes.php(253): WPGraphQLGutenberg\Blocks\Registry::get_registry()
#1 ~/nextjs/app/public/wp-includes/class-wp-hook.php(287): WPGraphQLGutenberg\Schema\Types\BlockTypes->WPGraphQLGutenberg\Schema\Types\{closure}(Object(WPGraphQL\Registry\TypeRegistry))
#2 ~/nextjs/app/public/wp-includes/class-wp-hook.php(311): WP_Hook->apply_filters(NULL, Array)
#3 ~/nextjs/app/public/wp-includes/plugin.php(484): WP_Hook->do_action(Array)
#4 ~/nextjs/app/public/wp-content/plugins/wp-graphql/src/Regis in ~/nextjs/app/public/wp-content/plugins/wp-graphql-gutenberg/src/Blocks/Registry.php on line 41
[19-Feb-2021 14:12:18 UTC] PHP Fatal error:  Uncaught WPGraphQLGutenberg\Blocks\RegistryNotSourcedException: Client side block registry is missing. You need to open up gutenberg or load it from WPGraphQLGutenberg Admin page. in ~/nextjs/app/public/wp-content/plugins/wp-graphql-gutenberg/src/Blocks/Registry.php:41
Stack trace:
#0 ~/nextjs/app/public/wp-content/plugins/wp-graphql-gutenberg/src/Schema/Types/BlockTypes.php(253): WPGraphQLGutenberg\Blocks\Registry::get_registry()
#1 ~/nextjs/app/public/wp-includes/class-wp-hook.php(287): WPGraphQLGutenberg\Schema\Types\BlockTypes->WPGraphQLGutenberg\Schema\Types\{closure}(Object(WPGraphQL\Registry\TypeRegistry))
#2 ~/nextjs/app/public/wp-includes/class-wp-hook.php(311): WP_Hook->apply_filters(NULL, Array)
#3 ~/nextjs/app/public/wp-includes/plugin.php(484): WP_Hook->do_action(Array)
#4 ~/nextjs/app/public/wp-content/plugins/wp-graphql/src/Regis in ~/nextjs/app/public/wp-content/plugins/wp-graphql-gutenberg/src/Blocks/Registry.php on line 41
[19-Feb-2021 14:12:19 UTC] PHP Fatal error:  Uncaught WPGraphQLGutenberg\Blocks\RegistryNotSourcedException: Client side block registry is missing. You need to open up gutenberg or load it from WPGraphQLGutenberg Admin page. in ~/nextjs/app/public/wp-content/plugins/wp-graphql-gutenberg/src/Blocks/Registry.php:41
Stack trace:
#0 ~/nextjs/app/public/wp-content/plugins/wp-graphql-gutenberg/src/Schema/Types/BlockTypes.php(253): WPGraphQLGutenberg\Blocks\Registry::get_registry()
#1 ~/nextjs/app/public/wp-includes/class-wp-hook.php(287): WPGraphQLGutenberg\Schema\Types\BlockTypes->WPGraphQLGutenberg\Schema\Types\{closure}(Object(WPGraphQL\Registry\TypeRegistry))
#2 ~/nextjs/app/public/wp-includes/class-wp-hook.php(311): WP_Hook->apply_filters(NULL, Array)
#3 ~/nextjs/app/public/wp-includes/plugin.php(484): WP_Hook->do_action(Array)
#4 ~/nextjs/app/public/wp-content/plugins/wp-graphql/src/Regis in ~/nextjs/app/public/wp-content/plugins/wp-graphql-gutenberg/src/Blocks/Registry.php on line 41

I can fix this issue by going to WP Dashboard > GraphQL Gutenberg, then press "Update" button

We can probably add this in the Backend Wiki.

To Reproduce
Steps to reproduce the behavior:

1. Follow the Backend and Frontend Wiki steps.
2. Run npm run dev and see the error.

On blog posts, activate ISR.

Pass in the revalidate key.

export async function getStaticProps({preview = false}) {
  const allPosts = await getAllPostsForHome(preview)
  return {
    props: {allPosts, preview},
    revalidate: 60
  }

We need some custom validation for the GravityForms phone field.

This field is treated as an input with type="tel". However, we need validation to occur on the input to let users know if the phone number format is correct or incorrect.

See Yup String Validation for ideas on different types of inputs.

I'm thinking using regex patterns might be a great solution here. See Yup.string().matches()

We will need options for

• International
• US

When I run yarn dev, I'm getting the following failure.

I wonder if this is a result of updating WP GraphQL on the WordPress Backend (#16)

[
  {
    message: 'Cannot query field "sourceUrl" on type "NodeWithFeaturedImageToMediaItemConnectionEdge".',
    extensions: { category: 'graphql' },
    locations: [ [Object] ]
  },
  {
    message: 'Cannot query field "name" on type "NodeWithAuthorToUserConnectionEdge". Did you mean "node"?',
    extensions: { category: 'graphql' },
    locations: [ [Object] ]
  },
  {
    message: 'Cannot query field "firstName" on type "NodeWithAuthorToUserConnectionEdge".',
    extensions: { category: 'graphql' },
    locations: [ [Object] ]
  },
  {
    message: 'Cannot query field "lastName" on type "NodeWithAuthorToUserConnectionEdge".',
    extensions: { category: 'graphql' },
    locations: [ [Object] ]
  },
  {
    message: 'Cannot query field "avatar" on type "NodeWithAuthorToUserConnectionEdge".',
    extensions: { category: 'graphql' },
    locations: [ [Object] ]
  }
]
Error: Failed to fetch API
    at fetchAPI (webpack-internal:///./lib/api.js:36:11)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async getAllPostsForHome (webpack-internal:///./lib/api.js:73:16)
    at async getStaticProps (webpack-internal:///./pages/index.js:110:20)
    at async renderToHTML (/Users/sal/wds/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/render.js:26:109)
    at async /Users/sal/wds/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:76:329
    at async __wrapper (/Users/sal/wds/nextjs-wordpress-starter/node_modules/next/dist/lib/coalesced-function.js:1:330)
    at async DevServer.renderToHTMLWithComponents (/Users/sal/wds/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:99:365)
    at async DevServer.renderToHTML (/Users/sal/wds/nextjs-wordpress-starter/node_modules/next/dist/next-server/server/next-server.js:100:255)
    at async DevServer.renderToHTML (/Users/sal/wds/nextjs-wordpress-starter/node_modules/next/dist/server/next-dev-server.js:34:578)

@itsamoreh Please begin building out Jennifer's design system in Storybook, using Atomic Design principles. Jennifer is available for questions and feedback.

Invision: https://projects.invisionapp.com/d/main#/projects/prototypes/20933084/screens?scrollOffset=0

Requirements

• Leverage tailwind.config.js
• Dark mode support (via media query)
• Mobile, Tablet, and Desktop breakpoints (via media query)

Categories, tags, and authors are displayed-- but are not linked to an archive page.

• https://docs.wpgraphql.com/getting-started/categories-and-tags/
• https://docs.wpgraphql.com/getting-started/users/

Create:

• Author archive
• Category archive
• Tag archive

Example query to get all posts written by: [email protected]

query MyQuery {
  user(id: "[email protected]", idType: EMAIL) {
    posts {
      edges {
        node {
          title
          slug
        }
      }
    }
  }
}

Example query to get all posts in "Blog" category:

query MyQuery {
  category(id: "blog", idType: SLUG) {
    slug
    posts {
      edges {
        node {
          author {
            name
          }
          title
          slug
          date
          excerpt
          featuredImage {
            sourceUrl(size: LARGE)
          }
        }
      }
    }
  }
}

Example query to get all posts tagged with "nextjs":

query MyQuery {
  tag(id: "nextjs", idType: SLUG) {
    slug
    posts {
      edges {
        node {
          author {
            name
          }
          title
          slug
          date
          excerpt
          featuredImage {
            sourceUrl(size: LARGE)
          }
        }
      }
    }
  }
}

While working on #233, I stumbled to a problem that the REST API routes provided by NextJS Auth isn't working. Upon tracing down the issue, I found out that the problem is with our usage of /api folder. Vercel uses /api folder for serverless functions which conflicts to what we have in /api folder since those functions aren't really serverless functions. More info regarding this here - https://vercel.com/docs/serverless-functions/introduction

Also as a consequence of doing this change, we also notice a lot faster build time. From about 10 mins to 3 mins.

Need to support routing to and displaying WordPress pages.

https://docs.wpgraphql.com/getting-started/pages/

Example query:

query MyQuery {
  page(id: "12", idType: DATABASE_ID) {
    title(format: RENDERED)
    author {
      name
    }
    slug
    content
    seo {
      metaDesc
      metaKeywords
      metaRobotsNofollow
      metaRobotsNoindex
    }
  }
}

This is a complex component which should be thoroughly documented.

The following details need to be included

1. "GravityForm" component
2. "How to Add Fields"
3. "Field Schema Validation"
4. "Field defaults"

If multiple posts of different types have the same slug (not full URI), querying by slug can return unexpected results: wp-graphql/wp-graphql#1695

When/if this issue with GraphQL is addressed, we should test to ensure it is resolved on our end.

Verification

• Create a post, page, and team member with the same title/slug, but with different content to make it clear which post is which.
• Run a single post query by slug, single page query by uri, and single team query by slug.
• Each query should return the post of the appropriate post type instead of pulling a matching post of a different post type.

Originally posted by @ravewebdev in #33 (comment)

Please put together a list of the most common blocks used on a client project. We'll build those out.

• Create list of common blocks used on projects
• Leverage Block Manager for disabling obscure blocks

Need to support WordPress settings https://docs.wpgraphql.com/getting-started/settings/

Example query:

query MyQuery {
  allSettings {
    generalSettingsTitle
    generalSettingsDescription
    readingSettingsPostsPerPage
  }
}

Will need to figure out how to query customizer data.

Build the Paragraph field from GravityForms File Upload field.

• File upload component
• GravityForm field to translate GF available props to File Upload component. Note: Not all props may be necessary
• Setup File Upload validation https://github.com/jquense/yup. Check Storybook Molecules > GravityForms > Fields for more details.

Sometimes an “Internal Server Error” encountered on a post is due to the WP GraphQL Gutenberg plugin not properly parsing comments (and/or “unsupported” blocks): pristas-peter/wp-graphql-gutenberg#63

When/if this issue with WP GraphQL Gutenberg is fixed, we should test to ensure HTML comments and "unsupported" blocks do not break FE rendering of posts.

Originally posted by @ravewebdev in #33 (comment)

There is currently no indication about the terms of use and distribution of this code.
It should include a license since it seems it has a bit of traction

@dcooney I figured we could start this integration while it's fresh.

I've already configured WPEngine Dev and pushed indices.

https://www.algolia.com/apps/VBT1SP5704/explorer/browse/wds_dev_searchable_posts

Algolia credentials are in 1password --> Next.js Starter

Requirements

• Instant Search in Header (with history would be great...if it's not too much)
• Search results page w/ Facets

The initial payload is 494KB (and well over 500KB on the blog index!). Would love to start working on reducing this and cleaning up the the <ContextProviders /> in _app.js

To help investigate options, I've installed Next Bundle Analyzer and pushed it to the main branch. To analyze run this command: ANALYZE=true npm run build.

Requirements

• Look into reducing the initial JS payload
• Look into reducing (or combining) <ContextProviders />
• Discuss findings with team

Because we're using blockJSON from WP GraphQL, we'll need to set up a block handler to display Gutenberg and ACF blocks in React components.

Requirements

• Install the Block Manager plugin, so we can turn off unused blocks @gregrickaby
• Setup the folder structure in /components/blocks/ @gregrickaby
• Setup initial props and components displaying raw JSON @gregrickaby
• Wire up the raw JSON with actual components from the design library @itsamoreh

Add Algolia? This issue will take some investigation.

Here is the Algolia example:
https://github.com/vercel/next.js/tree/master/examples/with-algolia-react-instantsearch

Please create content that's written for someone who has almost no experience with headless WordPress and very little experience with React or Next.js.

Please follow the outline in the sidebar of the wiki .

Set up a headless WordPress theme. This will serve as the project's "plugin" and have the following:

Requirements

• Gutenberg block registration and support
• Redirects users to Jamstack front-end
• ACF JSON sync
• Custom Post Type/Taxonomy registration
• Post thumbnails and the usual theme setup

Hi everyone! My team and I have been following your progress and are very thankful for your hard work. This repo is amazing and exactly what the entire WP community needs to push the adoption of NextJS and headless development. We will do our best to find issues that we can help with and submit PRs in the future.

This issue is more of a suggestion to contact WP Engine about their serverless hosting solution that is set to launch in the near future. They are building out some features that you all could help with or take from. I think there is a ton of overlap on what is in this repo and what they are working on.

https://github.com/wpengine/headless-framework