Gatsby Launches New WordPress Integration, Expanding Support for Headless Architecture

The Gatsby source WordPress plugin, Gatsby Cloud’s official WordPress integration, has been marked stable as of v4 and has been released to the public. The plugin sources data from WordPress for headless setups that use Gatsby on the frontend. It is a complete rewrite of Gatsby’s previous source plugin and works in combination with the WPGatsby plugin to integrate content preview and incremental builds from Gatsby Cloud.

After going into public beta last year, the new source plugin was updated to enable the following:

Users add a WPGraphQL-enabled endpoint to gain access to WordPress content in Gatsby’s data layer for use in React templates

Optimizes links and images within the content HTML with gatsby-image and gatsby-link

Restricts image processing and optimization to images referenced in published content, so large media libraries don’t slow down build times

Automatically enables access to data from any WPGraphQL extension, integrating the site with other WordPress plugins

WPGraphQL is required as part of the setup. It turns any site into a GraphQL server, making the content easier to fetch. For the past 18 months, Gatsby has supported the development and maintenance of WPGraphQL to a stable 1.0 release. WP Engine recently hired its maintainer, Jason Bahl, to continue funding the project and expand on its own headless WordPress initiatives. This ensures that WPGraphQL will continue to have a strong future for use in decoupled projects.

“During the beta period, we were excited to see developer teams we admire adopt the Gatsby WordPress integration for their projects,” Gatsby marketing manager Hashim Warren said. “Teams from Facebook, Bluehost, and Apollo used Gatsby’s WordPress integration to create accessible, scalable, and easy-to-update web experiences.” All of these sites and more were using Gatsby + WPGraphQL in production before the new Gatsby Source WordPress plugin was officially stable, so it has been tested extensively during the beta period.

The rewritten plugin is better at bridging the gap to make Gatsby frontends less of a trade-off for developers who are working with editorial teams. It improves build times to be under 10 seconds for medium-sized sites.

The complexity of editing and rebuilding Gatsby sites has been one of the chief deterrents for content creators adopting headless architecture. It imposes a more complicated workflow that the Gatsby Cloud product is designed to fix. This is how Gatsby monetizes its WordPress integration – by making the workflow more like what traditional WordPress provides out of the box.

In recruiting potential headless customers, Gatsby emphasized the lower hosting costs of its stack. Gatsby Cloud is free for small, personal sites but limits users to 100 Real-Time Edits/month. In fact, all of the commercial plans have upper limits on the number of editors and how many times users can perform real-time edits.

Decoupled architecture still falls squarely within the realm of developers. Gatsby’s Cloud product is one way that developers who choose Gatsby for the frontend can make their sites more user-friendly for editorial teams. Developers who are interested in exploring the new integration can get a quick start by checking out Gatsby’s official WordPress starter.