DEV Community

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

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...
Collapse
 
ibjorn profile image
Björn Potgieter

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?

Collapse
 
henrikwirth profile image
Henrik Wirth

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

Collapse
 
ibjorn profile image
Björn Potgieter

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.

Collapse
 
ibjorn profile image
Björn Potgieter

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.

Thread Thread
 
henrikwirth profile image
Henrik Wirth

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

Thread Thread
 
ibjorn profile image
Björn Potgieter

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.

Thread Thread
 
ezraihi profile image
Ezra Hockman

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!

Thread Thread
 
ibjorn profile image
Björn Potgieter

Sorry, unfortunately not.

Thread Thread
 
henrikwirth profile image
Henrik Wirth • 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:

  1. Go to create/utils.js
  2. In Line 53 you find the function createPageWithTemplate
  3. In line 64 add a console output like console.log(page.uri)
  4. 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.

Thread Thread
 
ibjorn profile image
Björn Potgieter

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

Thread Thread
 
turbotobiasdk profile image
Turbo Tobias

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'

Thread Thread
 
henrikwirth profile image
Henrik Wirth

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.

Collapse
 
jimmy2 profile image
James

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

Collapse
 
henrikwirth profile image
Henrik Wirth

Hi James,

glad you enjoy the series. First of all you would need to add the pageBuilder to your Posts with ACF like so:

ACF Rules

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

Collapse
 
jimmy2 profile image
James

Hi Henrik,

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

James

Thread Thread
 
henrikwirth profile image
Henrik Wirth

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

Thread Thread
 
jimmy2 profile image
James

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

Works marvellously ;)

Collapse
 
joelhassan profile image
Joel Hassan

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?

Collapse
 
henrikwirth profile image
Henrik Wirth

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.

Collapse
 
joelhassan profile image
Joel Hassan

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.

Collapse
 
pjs profile image
pjs

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.

Collapse
 
henrikwirth profile image
Henrik Wirth

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

Collapse
 
sid0rv profile image
Ruben

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?

Collapse
 
henrikwirth profile image
Henrik Wirth

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

Collapse
 
sid0rv profile image
Ruben

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

Collapse
 
cordial profile image
cordial • 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?
Collapse
 
cordial profile image
cordial

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!

Collapse
 
henrikwirth profile image
Henrik Wirth

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

Collapse
 
dusted profile image
Dusted

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

Collapse
 
dusted profile image
Dusted

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.

Collapse
 
henrikwirth profile image
Henrik Wirth

Actually forgot to update the site on Netlify.

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

Screenshot

Collapse
 
chesterros profile image
chesterros • 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.

Collapse
 
henrikwirth profile image
Henrik Wirth

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

Collapse
 
chesterros profile image
chesterros

Thank you! This working, great :)

Collapse
 
bulletninja profile image
Bulletninja

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

Collapse
 
henrikwirth profile image
Henrik Wirth

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

Collapse
 
shlomimygenes profile image
shlomiMyGenes

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