I recently had the opportunity to chat with Jason Bahl, creator of WPGraphQL. He was the perfect person to connect with while developing a project that relies heavily on WPGraphQL not only because he’s the founder and creator but he’s also now a part of the Gatsby team.
The project we’re creating is a new site for Shifter and there was a specific question we’re curious about answering. That question was: How does Gutenberg work with Gatsby?
There’s no clear answer for this, yet. There are a few approaches out there and maybe this one gets added to the pile. Either way, we had a few ideas and put them to practice.
Some Background
If you’re a WordPress user running a recent version you have probably been introduced to Gutenberg. It’s the new block editor for WordPress that’s highly customizable, extendable, and for better or worse has revolutionized the editing experience.
For this example, let’s focus on blog posts. Out of the box, Gutenberg offers tools similar to move page builders such as columns, embeds, buttons, and more. It can do a lot more too by adding extensions or creating custom blocks. If you’re developing a site with Gatsby, WordPress and Gutenberg you’ll quickly realize a crucial piece is missing. Gutenberg related CSS.
While the editing experience and output of Gutenberg can be complex, it simply just adds HTML markup to the_content field in your block post. How that renders on the page depends on the stylesheets which don’t exist on your Gatsby site.
Possible Solutions
After giving this some thought, I had three possible solutions.
- Just point to the necessary Gutenberg related CSS and import it into my SCSS file which supports remote files.
- Install it somehow with NPM and import it from there. Yeah, this option sounds.. ridiculous.
- Fetch the CSS I need with WPGraphQL.
I settled on the last one before realizing this feature isn’t available in WPGraphQL. Not to worry though, because WPGraphQL is extendable! If you have an idea for a custom use case the core plugin can be extended in a lot of different ways. Checkout the WPGraphQL docs site for more info on what you can do.
WPGraphQL Enqueue
I started sketching an idea for something I decided to call WPGraphQL Enqueue.
My objective was to use what WordPress already offers in Core and expose that data to WPGraphQL. The data I wanted to get was enqueued scripts and styles.
Focusing on enqueued scripts and styles offers a few advanced. By adding plugins or themes that properly registered styles and scripts it would automatically make those assets available in the schema. That includes the default block editor CSS and any extensions I may add.
I reached out to Jason about this idea and he was kind enough to walk me through getting it started. Following the docs on the WPGraphQL site we were able to create a demo and it seems promising.
This project is open-source and available on GitHub. It’s in development as we hope others will find it useful. Our roadmap for this project is to build it out for this specific use case but also in a way others may find it helpful.
If you’re using WPGraphQL with Guttenberg we hope it’s a valuable tool to extend the default functionality.
Beyond that, there is another question we have. How do page builders work with Gatsby?
We’re a huge fan of page builders because they’re all of a sudden awesome and easy to use. Whether you’re developing with Elementor, Setka, and many others, they offer a ton of benefits for creating visual content with ease.
Most page builders technically work in the same way Gutenberg does. So, could the same solution be applied? That’s a maybe but we’ll see after this first release.
For more information on how WPGraphQL Enqueue was developed enjoy this pair programming session with myself, Daniel Olson, and Jason Bahl.
