DEV Community

PageBuilder with ACF Flexible Content - Guide to Gatsby WordPress Starter Advanced with Previews, i18n and more

Henrik Wirth on December 19, 2019

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...

Read full post

Björn Potgieter • Jan 23 '20

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:

(node:14460) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated

But then it carries on compiling until I get this, the same error I got on my own version:

C:\Users\bjorn\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53
        throw ex;
        ^
Error writing tmp-portfolio/ template: Error: ENOENT: no such file or directory, open 'C:\Users\bjorn\www\gatsby-wp-advanced\.template-cache\tmp-portfolio\.js'

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?

Henrik Wirth • Jan 23 '20

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

Björn Potgieter • Jan 23 '20

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.

C:\Users\bjorn\AppData\Roaming\nvm\v10.18.1\node_modules\gatsby\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53
        throw ex;
        ^
Error writing tmp-portfolio/ template: Error: ENOENT: no such file or directory, open 'C:\Users\bjorn\www\blackalscozaV4\.template-cache\tmp-portfolio\.js'

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.

Björn Potgieter • Jan 23 '20

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.

Henrik Wirth • Jan 23 '20

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

Björn Potgieter • Jan 23 '20

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.

Ezra Hockman • Apr 8 '20

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!

Björn Potgieter • Apr 8 '20

Sorry, unfortunately not.

Henrik Wirth • Apr 9 '20 • Edited

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:

Error writing tmp-portfolio/ template: Error: ENOENT: no such file or directory, open 'C:\Users\bjorn\www\blackalscozaV4\.template-cache\tmp-portfolio\.js'
Error writing tmp-/new-page/ template: Error: ENOENT: no such file or directory, open '.template-cache/tmp-/new-page/.js'

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:

writing tmp-new-page/ template: open '.template-cache/tmp-new-page.js'

Maybe this helps to debug my code:

Go to create/utils.js
In Line 53 you find the function createPageWithTemplate
In line 64 add a console output like console.log(page.uri)
See what it outputs

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 to src/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.

Björn Potgieter • Apr 9 '20

Thanks Henrik. Have been a bit overloaded. Will get back to this in due time and will check out your suggestions.

Turbo Tobias • Apr 17 '20

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'

Henrik Wirth • Apr 18 '20

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.

James • Jan 13 '20

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 ;)

Henrik Wirth • Jan 13 '20

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...

James • Jan 13 '20

Hi Henrik,

Wow, that's awesome! Thank you so much. I'll definitely checkout that branch.

James

Henrik Wirth • Jan 14 '20

Let me know if it works and feel free to share your work. Always interested in what people build with this stack :)

James • Jan 15 '20

Tested it out with a custom ACF layout on a post.

Works marvellously ;)

Joel Hassan • Dec 24 '19

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?

Henrik Wirth • Dec 26 '19

Hi Joel,

Are you planning on extending it to cover expanding the page builder into a more complete one?

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.

Also, do you have any ideas on how to implement previews on the wp side?

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.

Joel Hassan • Dec 28 '19

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.

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.

pjs • Dec 19 '19

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.

Henrik Wirth • Dec 19 '19

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 🤷‍♂️

Ruben • Oct 28 '20

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?

Henrik Wirth • Oct 29 '20

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...

Ruben • Oct 29 '20

Thank you Henrik, I'll have a look at it!

cordial • Jan 9 '20 • Edited

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 -

So you seem to have created an individualTemplate page for each page that is created and created a 'page builder' with multiple layouts. In a small example site with Home, Contact, Team and About pages that share various components but each have components that are only shown on their respective page, does that mean that the wp-admin edit for each page will display all of the components that are used across all pages? Maybe this shows a lack of understanding on my part how the layouts work in flexible content, but they seem to be more like sections than layouts?

cordial • Jan 9 '20

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!

Henrik Wirth • Jan 9 '20

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 :)

Dusted • May 29 '20

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
}
}
}

Dusted • Jun 1 '20

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.

Henrik Wirth • Dec 20 '19

Actually forgot to update the site on Netlify.

Now it is up and running here: gatsby-starter-wordpress-advanced....

chesterros • Apr 29 '20 • Edited

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.

Henrik Wirth • May 2 '20

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...

chesterros • May 3 '20

Thank you! This working, great :)

Bulletninja • Dec 20 '19

Great inspiring post.
If i had the time / was more knowledgeable i'd do this but using grapesjs.com/ instead of wordpress.

Henrik Wirth • Dec 20 '19

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 :)

shlomiMyGenes • Sep 18 '22

Hi, like everyone said this has been very helpful and I learnt a lot.
cant wait for the next parts