henrikwirth/gatsby-starter-wordpress-twenty-twenty

A port of the WordPress Twenty Twenty theme to Gatsby.

gatsby-starter-wordpress-twenty-twenty's Issues

wp-block-cover not functioning as expected

Possibly after upgrading from gatsby-source-wordpress-experimental to gatsby-source-wordpress v4, but now the wp-block-cover block is no longer functioning as expected. Before, the background-image was added to the div with class wp-block-cover, but now the background-image is added to an <img> and <picture> child of the div with class wp-block-cover__image-background, the background image does not cover the container, and the div with class wp-block-cover__inner-container is a sibling to the div with class wp-block-cover__image-background rather than a child, putting it below the background.

TypeError: Cannot read property 'menuItems' of null

Expected Behavior

yarn start builds and launches the website

Actual Behavior

Error message in browser:
TypeError: Cannot read property 'menuItems' of null

Steps to Reproduce the Problem

1. Clone the repo
2. Copy .env.example file to .env and change Environment variables to location to a WordPress instance that has wpgraph-ql plugin installed
3. Run yarn then yarn start

Specifications

• Version: 0.0.1
• Platform: MacOs Catalina
• Subsystem: Brave Browser

Author and Category Archives don't seem to have posts on them

I'm getting an odd issue where my category archives and author archives show no posts sometimes and sometimes works. It seems that there are no post nodes available to show within the map of the archive.js file. Has anyone seen this issue?

your menu button is does not meet accessibility standards.

looks like a problem with a show-modal class on the menu that needs to be removed with the menu is closed.

TypeError: Cannot read property 'replace' of undefined

Full error:

Cannot read property 'replace' of undefined



  TypeError: Cannot read property 'replace' of undefined
  
  - process-node.js:118 find
    [gatsby]/[gatsby-source-wordpress-experimental]/src/steps/source-nodes/create-nodes/process-node.js:118:65
  
  - Array.find
  
  - process-node.js:108 pickNodeBySourceUrlOrCheerioImg
    [gatsby]/[gatsby-source-wordpress-experimental]/src/steps/source-nodes/create-nodes/process-node.js:108:34
  
  - process-node.js:221 fetchNodeHtmlImageMediaItemNodes
    [gatsby]/[gatsby-source-wordpress-experimental]/src/steps/source-nodes/create-nodes/process-node.js:221:21
  
  - process-node.js:477 replaceNodeHtmlImages
    [gatsby]/[gatsby-source-wordpress-experimental]/src/steps/source-nodes/create-nodes/process-node.js:477:44
  
  - process-node.js:816 processNodeString
    [gatsby]/[gatsby-source-wordpress-experimental]/src/steps/source-nodes/create-nodes/process-node.js:816:18
  
  - process-node.js:856 processNode
    [gatsby]/[gatsby-source-wordpress-experimental]/src/steps/source-nodes/create-nodes/process-node.js:856:31
  
  - create-nodes.js:42 
    [gatsby]/[gatsby-source-wordpress-experimental]/src/steps/source-nodes/create-nodes/create-nodes.js:42:12
  
  - index.js:163 run
    [gatsby]/[p-queue]/dist/index.js:163:29
  

not finished source and transform nodes - 10.474s
not finished  gatsby-source-wordpress  fetching nodes - 10.385s - 114 total
not finished  gatsby-source-wordpress  creating nodes - 6.844s
not finished  gatsby-source-wordpress  MediaItem - 6.845s - fetched 40
not finished Generating image thumbnails - 6.184s

Seems to hangup around the 40th media file. Error surfaced after updating blog posts for the first time.

Open Graph tags

Have you had any issues with social media platforms displaying the correct images?

Password protected posts included in query, but inaccessible

Password protected posts are included in the post query and displayed at the beginning of the search results. However, they are inaccessible and break the blog roll page.

On the blog roll page...

Error: TypeError: Cannot read property 'uri' of undefined

src/components/PostMeta.js:19

  16 | </span>
  17 | <span className="meta-text">
  18 |   By{" "}
> 19 |   <Link to={author.uri}>
  20 |     {author.firstName
  21 |       ? author.lastName
  22 |         ? author.firstName + " " + author.lastName

On the password protected posts after replacing the call to author object with arbitrary links and text...

Error: TypeError: Cannot read property 'description' of undefined

src/components/AuthorBio.js:7

   4 | 
   5 | const AuthorBio = ({ author }) => {
   6 |   author = author?.node
>  7 |   if (!author.description) return null
   8 | 
   9 |   const description = author.description.replace(/(\r\n|\n|\r)/gm, "<br/>")
  10 |

gatsby-source-wordpress error

When running gatsby-develop, this error is received:

ERROR

gatsby-source-wordpress The "url" argument must be of type string. Received null

GraphQL request to null failed.

Please ensure the following statements are true

• your WordPress URL is correct in gatsby-config.js
• your server is responding to requests
• WPGraphQL and WPGatsby are installed in your WordPress backend

using only template without WP integration

Hi, i want to use the termplate only without the Wordpress intergration, it's possible?

Thanks for this, possible fixes/improvements

Hello Henrik,

Thanks for this awesome starter! I checked out the project, and here are some possible fixes/improvements:

• TypeError: Cannot read property 'allWpPost' of undefined. in createCategories.js:40 - occurs when a category does not have any posts in it

• encoding issues - the title of my WP site is Muhammad's Personal/Tech Blog About but in the Gatsby version it occurs as Muhammad's Personal/Tech Blog. Also present in post titles.

• hardcoded WP links can be replaced to their Gatsby counterparts (if possible)

Again, thanks for all your hard work on this! Cheers ✌️

comments

Do you know when comments feature will be available?

Is wordpress.com supported?

I have a blog: https://ajulusthoughts.wordpress.com and i am not sure if it is supported. Also does this support image covers? eg. on homepage: Image + Description?

WordPress submenu item not showing

Please add a submenu function as soon as possible & how can I added a social share button in blog post.
For Google AdSense how it will work with this stater.

thanks

I added Tags, they work, but I can't get them to render on posts

First off, thank you for sharing some of your code you are developing for your thesis. Lately, I have been hacking a bunch of Gatsby github repos related to WordPress, and yours is literally the first plug-in-play code I've encountered with gatsby-source-wordpress 4.0. You made it incredibly simple to get started: I just added my WordPress url in gatsby-config and it was away we go.

Almost everything else I have encountered elsewhere is too dated for my low entry level so I always seem to get to a cul-de-sac of issues that have never been quite satisfactory for doing current Wordpress/Gatsby.

I wanted to let you all know that I was able to partially get Tags to work by simply taking the code you have for /src/components/PostCategories.js, copying it as /src/components/PostTags.js , then doing find-and-replace for "Categories"|"Tags", "categories"|"tags", "category|tag". I also added these new lines to gatsby-node.js to account for where the new file is located and its create runtime seqencing:

const createTags = require(`./create/createTags`)

and

await createTags(props, { perPage })

This seemed to have worked out fine. All pages with tags created in WordPress show up nicely in a wordcloud I created in WordPress which creates an index for each tag and the posts associated with it. And the links all work.

If you'd like to see the code for yourself, it is at https://github.com/stevewil/starter.git (version02).

Here is my issue: I want to render each post's tags something like Categories are now rendered on each post.

When I went into /src/templates/types/posts.js I noticed this line:
<PostCategories categories={categories} />

So using the method I used previously with Categories, I added an additional line like this:
<PostTags tags={tags} />

I also added this line near the top:
import PostTags from "../../components/PostTags"

And I added tags to the const:

const {
    title,
    content,
    featuredImage,
    categories,
    tags,
    excerpt,
    databaseId,
    author,
    date,
  } = page

After saving and re-running gatsby develop, Categories render what they are supposed to, but Tags do not. Tags seem to be rendering nothing:
https://stevewil.tinytake.com/tt/NTIyOTM0Ml8xNjM1NDYyOA

I'm wondering if you might have any insight into how I can render tags on posts?

NEWB Question / Issue

Hey, I'm completely new to this world of Gatsby, and I'm trying to wrap my head around a Wordpress theme so I can see real life how to use this... However, I'm stuck.

I have a local Wordpress environment I'm using for a source, so please ignore the "SSL" errors, but the other areas, I don't even have a clue :(

Interface field WpHierarchicalContentNode.wpParent expected but WpMediaItem does not provide it.
I know what Interfaces are, and I understand the errors "Meaning" but I don't have a clue where to look, or how this is an issue. Maybe you can point me in the right direction?

roberts-mbp:gatsby-starter-wordpress-twenty-twenty robert$ gatsby develop
success open and validate gatsby-configs - 0.028s
success load plugins - 0.573s
success onPreInit - 0.012s
success initialize cache - 0.036s
success copy gatsby files - 0.032s
success onPreBootstrap - 0.007s

ERROR

(node:53333) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use node --trace-warnings ... to show where the warning was created)

⠀
info gatsby-source-wordpress

This is either your first build or the cache was cleared.
Please wait while your WordPress data is synced to your Gatsby cache.

Maybe now's a good time to get up and stretch? :D

success gatsby-source-wordpress ingest WPGraphQL schema - 0.469s
success createSchemaCustomization - 0.637s
success gatsby-source-wordpress Taxonomy - 0.149s - fetched 3
success gatsby-source-wordpress ContentType - 0.225s - fetched 0
success gatsby-source-wordpress Menu - 0.236s - fetched 1
success gatsby-source-wordpress Tag - 0.234s - fetched 4
success gatsby-source-wordpress Category - 0.292s - fetched 4
success gatsby-source-wordpress TermNode - 0.243s - fetched 8
success gatsby-source-wordpress Comment - 0.312s - fetched 0
success gatsby-source-wordpress Post - 0.294s - fetched 2
success gatsby-source-wordpress MenuItem - 0.322s - fetched 5
success gatsby-source-wordpress Page - 0.327s - fetched 5
success gatsby-source-wordpress User - 0.353s - fetched 2
success gatsby-source-wordpress MediaItem - 1.284s - fetched 46
success gatsby-source-wordpress creating nodes - 1.292s - awaiting async side effects - 5 additional nodes fetched
success gatsby-source-wordpress fetching nodes - 1.727s - 80 total
success gatsby-source-wordpress fetch root fields - 0.053s
success source and transform nodes - 1.835s
graphql-compose: Delete field 'WpMediaItem.wpParent' with type 'WpHierarchicalContentNodeToContentNodeConnectionEdge', cause it does not have fields.
graphql-compose: Delete field 'WpPage.wpParent' with type 'WpHierarchicalContentNodeToContentNodeConnectionEdge', cause it does not have fields.
success building schema - 0.376s

ERROR #11321 PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

Interface field WpHierarchicalContentNode.wpParent expected but WpMediaItem does not provide it.

Type WpHierarchicalContentNodeToContentNodeConnectionEdge must define one or more fields.

Interface field WpHierarchicalContentNode.wpParent expected but WpPage does not provide it.

Type WpNodeWithRevisionsToContentNodeConnectionEdge must define one or more fields.

13 |
14 | exports.createPages = async (props) => {

15 | const { data: wpSettings } = await props.graphql(/* GraphQL */ `
| ^
16 | {
17 | wp {
18 | readingSettings {

File: gatsby-node.js:15:44

Error: Interface field WpHierarchicalContentNode.wpParent expected but WpMediaItem does not provide it.
Type WpHierarchicalContentNodeToContentNodeConnectionEdge must define one or more fields.
Interface field WpHierarchicalContentNode.wpParent expected but WpPage does not provide it.
Type WpNodeWithRevisionsToContentNodeConnectionEdge must define one or more fields.

• graphql-runner.js:95 GraphQLRunner.validate
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/query/graphql-runner.js:95:44

• graphql-runner.js:161 GraphQLRunner.query
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/query/graphql-runner.js:161:25

• create-graphql-runner.js:33 Object.graphql
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/bootstrap/create-graphql-runner.js:33:37

• gatsby-node.js:15 Object.exports.createPages
  /Users/robert/Sites/gatsby-starter-wordpress-twenty-twenty/gatsby-node.js:15:44

• api-runner-node.js:256 runAPI
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/utils/api-runner-node.js:256:37

• From previous event:

• api-runner-node.js:258 runAPI
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/utils/api-runner-node.js:258:22

• api-runner-node.js:375 Promise.catch.decorateEvent.pluginName
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/utils/api-runner-node.js:375:15

• From previous event:

• api-runner-node.js:374
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/utils/api-runner-node.js:374:12

• timers.js:458 processImmediate
  internal/timers.js:458:21

• From previous event:

• api-runner-node.js:368
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/utils/api-runner-node.js:368:11

• From previous event:

• api-runner-node.js:275 module.exports
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/utils/api-runner-node.js:275:12

• index.js:417 module.exports
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/bootstrap/index.js:417:9

• develop-process.js:459 async module.exports
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/commands/develop-process.js:459:7

failed createPages - 0.052s
success createPagesStatefully - 0.042s
success onPreExtractQueries - 0.002s
success update schema - 0.024s

**ERROR

Interface field WpHierarchicalContentNode.wpParent expected but WpMediaItem does not provide it.

Type WpHierarchicalContentNodeToContentNodeConnectionEdge must define one or more fields.

Interface field WpHierarchicalContentNode.wpParent expected but WpPage does not provide it.

Type WpNodeWithRevisionsToContentNodeConnectionEdge must define one or more fields.**

Error: Interface field WpHierarchicalContentNode.wpParent expected but WpMediaItem does not provide it.
Type WpHierarchicalContentNodeToContentNodeConnectionEdge must define one or more fields.
Interface field WpHierarchicalContentNode.wpParent expected but WpPage does not provide it.
Type WpNodeWithRevisionsToContentNodeConnectionEdge must define one or more fields.

• query-compiler.js:203 extractOperations
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/query/query-compiler.js:203:20

• query-compiler.js:177 processQueries
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/query/query-compiler.js:177:7

• query-compiler.js:97 compile
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/query/query-compiler.js:97:19

• index.js:461 async module.exports
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/bootstrap/index.js:461:3

• develop-process.js:459 async module.exports
  [gatsby-starter-wordpress-twenty-twenty]/[gatsby]/dist/commands/develop-process.js:459:7

not finished Downloading remote files - 1.648s
not finished extract queries from components - 0.406s

Searching

Hi Henrik,

You re killing it. We were working on this integration and it is really looking good.

Are you going to add search feature and which time do you think the final version is going to be released?