BlogJanuary 2020

Learning GatsbyJS with WordPress and ACF

author
By Todd Wilson

A few months ago, I stumbled across an excellent video series on Gatsby & WordPress, by Jack Pritchard. This allowed me to follow along each section of the series as I progressed through the initial setup with WordPress.

Initially, I installed a WordPress instance locally using the Trellis bedrock project which uses composer to gather all of the required plugins that I would need. You can have a look at what I ended up going with, here’s the public repo (wjhm-bedrock).

Creating custom blocks and fields with ACF πŸ“¦

I use to develop custom WordPress themes and found using Advanced Custom Fields Pro to be invaluable at setting up customizations with Custom Post Types. In the same way, ACF enables you to create your own custom Gutenberg blocks with custom fields that can be exposed within the GraphQL data layer.

What I enjoyed about learning along side of the video series, was how it demonstrated adding custom blocks with fields, that can be rendered as custom ReactJS components. For my current site, I’m just parsing the entire content but this approach allows for greater flexibility and customization with Gutenberg blocks. πŸ’₯

Deploying to Netlify πŸš€

[build]
  publish = "public"
  command = "npm run build"
[build.environment]
  NPM_VERSION = "6.12.1"
  NODE_VERSION = "10.16.3"

JAMstack Deployments

With a WordPress plugin called JAMStack Deployments, you can specify the webhook and netlify status badge URL. It will also give you the option to select which updates will trigger this build hook. What I like about this is that when you save the badgeURL, you can get a netlify build status within the WordPress admin.

Future enhancements

I’ve learned a lot throughout this video series and found that working with WPGraphQL and WordPress allows for greater flexibility. It really is a different take on theme development for the WordPress community and I expect this to only gain more momentum. With the WPGraphQL for ACF plugin, this really opens up the possibilities for easier customization and integration.

I plan on revisiting a few things in this personal blog project:

  • Post tags: List out the post tags
  • Pagination: Provide links to navigate between posts.
  • Comments: Find a solution to allow for commenting.
  • Avatar: Add in Gravatar support with the post author information.
GatsbyJS
#100DaysOfGatsby – Personal Blog project βœ…
acf, advanced custom fields, gatsbyjs, gutenberg blocks, netlify, reactjs
logoCreated with Sketch.

Secure, Fast Browsing with Brave Rewards

Help support content creators and earn rewards by opting into privacy-respecting ads. We're now a verified Brave Creator that can receive tips.