If you are still following this series, you learned a lot of basics in the previous parts and are pretty well informed about the creation of Gatsby...
For further actions, you may consider blocking this person and/or reporting abuse
Thank you Henrik. this has been very helpful! I learnt a lot.
I kept running into an error though. So eventually I cloned your part-7-posts branch (seems like the latest), but I still run into the same error. I'm not sure how to solve it.
The first error I get is this, but I've seen it on other sites too, it's something to do with NPM:
But then it carries on compiling until I get this, the same error I got on my own version:
It seems to happen on different pages each time. I am using an existing WP install. I did not put the pageBuilder blocks on all the pages, just one page to test on. So don't know if it could be that?
The posts branch is a little special and is just done because someone asked for that in the comments. It is not explained in the tutorial though.
The deprecation warning comes from the node.js version you are using. It shouldn't effect your build. I get the same.
Not sure why it has problems afterwards. Maybe you could try to downgrade to another node version with github.com/tj/n
Hi Henrik. I got nvm up and running. So I'm using node 10.18.1 and npm 6.13.4. I cleared my Gatsby cache, reinstalled node_modules, etc etc. But I still run into that issue.
Look, it's not a huge pain. It was working fine up until the 6th part of your tutorial. As you said it's probably a Windows issue then.
Just thought I'll give you feedback.
Thanks Henrik. I notice the version manager is not supported on Windows. There is an upgrade available. I tried it now, but still no luck.
When I get a chance later I'll manually uninstall and reinstall Node 10. I'm on 12.14.1 LTS now. I see that deprecation warning seems to be common and people just downgrade to make it go away.
Ah, if you are on windows, it could be an issue with my code and the paths I'm using when creating the templates. Haven't tested it on Windows yet, sorry. But yeah, maybe try the Node version first. Maybe this can help? github.com/coreybutler/nvm-windows
Ah, the Windows path actually makes sense if you look at that error.
Thanks for that link. I see there is bit of a process involved, so I'll have to make time for it a bit later. Have some work to catch up on.
Thanks for your time and effort Henrik. Much appreciated.
I'm experiencing the same issue (I'm on a Mac):
/Users/me/sites/gatsby-starter-wordpress-advanced/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
throw ex;
^
Error writing tmp-/new-page/ template: Error: ENOENT: no such file or directory, open '.template-cache/tmp-/new-page/.js'
Were you ever able to get that sorted? Thanks!
Sorry, unfortunately not.
Sorry, that I can't help more, but my time will be super limited for the next 1-2 months :/
But from what I can see in your error messages:
It seems to be a path problem. First of all both have a slash or backslash (Windows) in front of the
.js
So for Björn it seems to be the only problem.For you Ezra, it seems there is more going on. The path should rather look like this:
Maybe this helps to debug my code:
create/utils.js
createPageWithTemplate
console.log(page.uri)
My guess is, that your page.uri has a slash before and/or after. This will lead to problems in this setup. You'd need to make sure it does not include slashes. Actually when I look at it, it might make more sense to use
page.slug
instead. For that you would need to add it tosrc/templates/page/data.js
.You would also need to be sure though, that there is no duplication of a slug. Otherwise it will overwrite the template from the duplication.
Thanks Henrik. Have been a bit overloaded. Will get back to this in due time and will check out your suggestions.
Did anyone find a solution to this? I am having the same issue. I'm on a Windows PC:
C:\Users\Tobias\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53
throw ex;
^
Error writing tmp-/ template: Error: ENOENT: no such file or directory, open 'C:\Users\Tobias\Desktop\Gatsby\gatsby-starter-wordpress-advanced.template-cache\tmp-.js'
Hi guys, I updated the code and tutorial. There were some path issues with the new WPGraphQL version. I tested it now on my Windows PC and it works for me. Checkout the master or part-7 branch and see if it solves your issues now.
Hi Henrik, this is a great series, I really appreciate your work in sharing this with us.
How would I extend this if I wanted to use ACF page builder fields on posts in addition to pages?
Eagerly awaiting the next one ;)
Hi James,
glad you enjoy the series. First of all you would need to add the pageBuilder to your Posts with ACF like so:
Then it is a similar process like with the pages. I created a branch to make it more easy for you. Checkout the last commit to see the changes. There are quite a few, but it is basically just to ensure certain functions or certain data work with either posts or pages.
I only tested it really quickly, so there is a high chance, that something still needs some tweaking.
henrikwirth/gatsby-starter-wordpre...
Hi Henrik,
Wow, that's awesome! Thank you so much. I'll definitely checkout that branch.
James
Let me know if it works and feel free to share your work. Always interested in what people build with this stack :)
Tested it out with a custom ACF layout on a post.
Works marvellously ;)
Hi Henrik, thanks again for the series. Are you planning on extending it to cover expanding the page builder into a more complete one? Also, do you have any ideas on how to implement previews on the wp side?
Hi Joel,
What exactly would you consider a more complete page builder? Do you mean just more ACF layouts, that together make it possible to design a more or less complete website?
If that is of interest, I surely could build some standard sections within this starter project. Its pretty simple to add layouts yourself though, which I wanted to teach with this tutorial. So everyone can built it to their needs.
I do. I already managed to implement previews in a personal project. It's possible to use the posts's draft data for it. So the idea is to have some sort of
preview.js
page, that uses Apollo GraphQL queries to dynamically fetch from your WordPress GraphQL endpoint. The way I wrote the queries with template strings, give you the possibility to reuse those queries for your dynamic content (with some little refactoring).I want to talk about previews in one of the upcoming tutorial parts. I can't tell you when though, as my time is limited at the moment.
Yeah, I had to familiarise myself with ACF - I initially thought that it would work like drag-and-drop page builders such as elementor :)
Thanks for the preview tips and looking forward to any upcoming parts.
Fantastic series, Henrik! I have learnt a lot - I am currently attempting to migrate one of my WP sites over to Gatsby and Headless WP. It is great fun working with Gatsby, but it is easy to hit roadblocks along the way.
Really glad you enjoy the series pjs. I feel you. In the beginning I had a lot of troubles adapting to this way of developing a front-end. There is so much to figure out. Thats why I thought the tutorial might save some peeps from sleepless nights 🤷♂️
Hello Henrik,
Thank you for writing up these series of tutorials, very comprehensive!
I have a question regarding your starter, would it be possible to migrate from the gatsby-source-graphql plugin to gatsby-source-wordpress-experimental? I have attempted to do this myself but as a beginner I cannot make heads or tails of what is needed to rewrite the queries, resulting in some frustrating errors while trying to run my dev server.
Could you point me in the right direction?
Hi Ruben. Sadly, this stack is already pretty old now. I have an example gatsby theme, that uses the new experimental version, but I don't have much time right now for a new tutorial on it. Here is the link, maybe it explains itself a bit.
github.com/henrikwirth/gatsby-star...
Thank you Henrik, I'll have a look at it!
Hi. Firstly, this is a great set of tutorials, thanks. I am left a tad confused with this last however one regarding how the layouts display in wp-admin and have a (sorry rather long winded) question -
Ahh, ive just set this up myself and now I see. It really is a full blown page builder, damn that's clever, when I usually make sites using ACF and themes I tend to just use the content types required, this gives a lot more flexibility. good work!
It is such a long tutorial and introduces so many custom approaches that I can totally understand if one gets lost. Thats why I actually wanted to make an explanation video for it, but I really don't have the time at the moment.
Glad you worked it out though. It is still not a full blown page builder, more like a section builder actually. But I feel it serves most of my purposes and it is dynamic enough :)
Thanks Henrik, great tutorial - easy to follow and helped me build my first Gatsby+Wordpress site, albeit just one page!
To help me go one step further, do you have any examples where the field type is Post Object and it's set to Select multiple values?
If it's just one value, the graphQL below works and I can render the value in the template. However, if I select multiple objects, graphQL returns NULL. Do you know if this is incorrect graphQL or do I have to grab all the array values within Gatsby? Thanks in advance!!
... on WPGraphQL_Page_Pagebuilder_Layouts_PickFeaturedCards {
fieldGroupName
featuredCards {
... on WPGraphQL_Page {
id
title
}
}
}
Looks like it's an unsolved issue: github.com/wp-graphql/wp-graphql-a....
Solution, for now at least, is to use a repeater rather than multiple objects.
Actually forgot to update the site on Netlify.
Now it is up and running here: gatsby-starter-wordpress-advanced....
Thank you Henrik, great tutorial.
Could you add blog category pages to the repository? Unfortunately, I can't handle it for two days. I'd appreciate it.
Hi Chesterros,
I won't have time for that for the next 2 months, but there are a couple of projects out there, that do that already. So you could take them as example and work it inside my approach.
github.com/zgordon/twentynineteen-...
github.com/staticfuse/staticfuse/t...
These are two examples that have categories.
And I just made another project, that uses the new gatsby-source-wordpress@v4 plugin.
github.com/henrikwirth/gatsby-star...
Thank you! This working, great :)
Great inspiring post.
If i had the time / was more knowledgeable i'd do this but using grapesjs.com/ instead of wordpress.
Well, if thats a tool, that serves your needs, then thats great. There is so much technology out there, so it is hard to keep up with everything ... and really, there is no need for it most of the time.
That being said, trying out Gatsby can be a lot of fun if one has the time to do so :)
Hi, like everyone said this has been very helpful and I learnt a lot.
cant wait for the next parts