Gatsby WordPress Themes is a new collaborative project led by Zac Gordon with help from Jason Bahl, Rich Tabor, Muhammad Muhsin, and Alexandra Spalato. The group is working together to port popular themes for use with Gatsby, the React-based static site generator that uses GraphQL for its data layer.
Known for its performance and ease of deployment, Gatsby has captured developers’ attention and was one of the rising stars of the React ecosystem throughout 2018. Using WordPress as a headless CMS, developers can pull data into Gatsby and enjoy the scalability, speed, and security that comes with serving static files.
Although static site generators have been around for awhile, the current Gatsby craze seems to be rooted in the fact that the project uses React, Webpack, and modern JavaScript and CSS.
“WordPress devs love Gatsby because it lets them throw away the entire old school PHP based WordPress theming system and built sites with React and GraphQL,” Gordon said.
“Gatsby devs are finding a new interest in WordPress because by default you have to edit Gatsby content in Markdown. WordPress gives a much richer editing experience.”
Jason Bahl, creator of the WPGraphQL project, is a technical advisor for the Gatsby WP Themes project. He was inspired to collaborate with the team because he thinks Gatsby has a lot of benefits for WordPress sites.
“The end result of a Gatsby site is a static site with no live Database connection,” Bahl said. “Just HTML and JavaScript files, so performance is better than even the most highly cached WordPress sites, and security is better because there’s no live database connection to be compromised.
“Also, Gatsby is fully React. With Gutenberg in core, WordPress developers are writing a LOT more React. Using Gatsby as the presentation layer for a site allows for components to be re-used across the admin and the theme, where now developers need to create React components for Gutenberg and PHP template partials for the ‘regular’ theme rendering.”
Regular WordPress theme are not immediately compatible with Gatsby, since the entire theme has to be built with React, but developers can use the same styles.
“We are taking a distinctly different direction than the WordPress themes on the Gatsby themes repo currently,” Gordon said. “We are going to base all of our themes on the WP GraphQL plugin. The default Gatsby themes now work on a wrapper on top of the REST API and don’t have live GraphQL endpoints, so they are limited.”
Gatsby WordPress Themes Project Partners with Theme Shops to Offer Free and Commercial Gatsby Themes
The Gatsby WordPress Themes project will offer a combination of free and commercial Gatsby themes. Gordon is partnering with theme shops that are open to his team doing the heavy lifting of porting popular themes over to Gatsby.
“The first two theme partners are Rich Tabor of CoBlocks and ThemeBeans, who is licensing us his super clean and Gutenberg perfect ‘Tabor’ premium theme,” Gordon said. “Then we have Leland Fiegel, a fellow DC WP chap and long time friend, from Themetry. They specialize in themes on WordPress.com, which means they are also battle tested. They have licensed us their great business theme Belmont.”
Gordon said the first versions of the Gatsby themes are targeted towards business and brochure sites that might have a couple pages laid out in Gutenberg and possibly a news/blog section and contact page.
“Since headless sites don’t work with a lot of plugins by default, the V1 of all the themes will be super opinionated and focused (but 100% extendable),” Gordon said.
“The final set of themes are from the WordPress default themes collection. We will have a detailed article showing how we ported the Twenty Nineteen theme over to a Gatsby theme and that will be the first of the default themes we do.”
Although this initiative is aimed at simpler WordPress sites, creating and maintaining a Gatsby site isn’t necessarily going to be well-suited to beginners.
“As far as the target audience, I think any WordPress site that doesn’t have super fast moving content – like the average marketing site or documentation site is perfect for Gatsby,” Bahl said.
“Gatsby does have a ‘Build’ step, where it collects ALL the data needed for the entire site, then outputs the content in the static Gatsby site. So even changing a typo on a post would require the ENTIRE SITE to rebuild, which can take anywhere from a few seconds to several minutes, which may not be acceptable for sites that need content live FAST (like a newspaper).
“But for your average WordPress site, waiting two minutes for your changes to be live in production is acceptable. Many heavily cached WordPress sites already experience a delay in content being live anyway.”
Gordon said he doesn’t believe Gatsby is the right fit for all WordPress sites but for certain projects it “can be a really cool approach both in terms of development experience and gains in speed and security.”
The group is aiming to have its first themes released for WordCamp Miami in mid-March and plans to release more as they make new partnerships and see an actual demand. Gordon is actively looking for more theme shops to bring on board.
“Zac will be primarily maintaining the Gatsby themes, though I’ll help where I’m needed,” ThemeBeans founder Rich Tabor said. “We’re still in the very initial stages of development.
“Overall, it’s a super interesting idea. Static site generators are increasing in popularity and Gatsby is pretty much leading the pack in terms of performance and ease-of-use — both of which WordPress is not particularly well-known for (but is making strides to improve).”
