Expose Gutenberg Blocks to the Headless WordPress GraphQL Endpoint
The same problem occurs as the previous lesson with the blocks that Gutenberg exposes in our API with the GraphQL endpoint.
In this lesson, we will show how to expose the Gutenberg Block data to the GraphQL layer by adding the wp-graphql-gutenberg plugin. There are a couple of things to note about the plugin. Whenever you use a new block type in your editor, you will have to update the blocks registry in the plugin so that it properly exposes the data in GraphQL. Also, when you query for block data you will need to be explicit in the attributes that you request. This behavior is different from REST where REST will serve you all the data available.
Instructor: [0:00] If we look at the schema for one of our post types chairs, for example, we'll see that we've got some content. We got access to the content, which is that HTML rendered blob that we normally expect to get, but we don't have access to the blocks.
[0:14] We install the module to expose the blocks to the RESTful API, and we need to do the same if we want to expose the blocks to the GraphQL API. I'm going to use the module WP GraphQL Gutenberg. It's not available in the WordPress directory, so we're going to download the zip file, go to our plugins, add new and upload that plugin, and then install, and then activate the plugin.
[0:39] We have a new menu item here of GraphQL Gutenberg, let's have a look at it. This manually tracks which blocks are being used in your posts and pages. If you add a new block, if you change and use a different block, you need to press Update in here, to update the block registry.
[0:55] If we turn to our GraphQL IDA, when the schema loads, you'll see we have these extra options, our blocks and our blocks JSON. For each block, we can get its name. All of the attributes we can get in the RESTful API, we can get here as well.
[1:08] Then we can also get the inner HTMLs. Let's see what we get when we do that. Blocks. For the core lists, we have these attributes as well as the actual original list. By default, a RESTful API sends all of the data.
[1:21] For a GraphQL API, we have to request any attributes that we want for a particular block explicitly. Let's look at a different block that we might call. If we had an image block, we'll want some of its attributes, like the alignment and the alt text, and the anchor, and the caption. We maybe want all of these.
[1:38] Then, we'll see for this image block, I have all of these attributes, including the image, and I can build up the image block.
[1:44] For each block that we allow our editors to use, our GraphQL query needs to correctly gather and request any of the attributes that we want to use.