 So I'm talking about Gutenberg GraphQL in government anybody heard of Gutenberg by chance So yeah, who am I? I'm a senior WordPress engineer at Digital First Media in Denver Denver native been there my whole life WordPress developer now for about a decade full-time love WordPress open source in general I created and maintain a WordPress plug-in WP GraphQL, which is part of what I'm talking about today Free and open source if you want to check it out So back in February I worked for about three months February through May on a government project I'm not going to talk about the particular government agency but as a government project that was moving to WordPress and at the time Gutenberg was tentatively going to launch in April of this This year, so we're like let's go all in on Gutenberg. Let's let's build the site on Gutenberg So that they're prepared for the future. So first thing we tackled was the home page And I want to talk a little bit about that So we used Gutenberg has a feature called block templates where you can lock templates So you could build blocks create a template lock it so that users can't drag and drop the blocks It's just fixed to what you want it to be So this example we had like a home page hero block where they could edit in Gutenberg But they couldn't drag it and drop it around it was always the first block Then we had a recent news block where they could curate news or just have it pull recent news from the post And then a leadership block where they could highlight leadership of the government agency So I want to look at just the home page so you could go do this for your own Gutenberg sites if you wanted to So this is an example of a wissy wig, you know in Gutenberg You can edit it looks like what you're what you're working on And here's the code to do that if you wanted to do it So on pH this back in the PHP side of your WordPress theme or plug-in you had a filter allowed block types This tells Gutenberg what block types to allow on the given template So in our case we're gonna filter if the template is home dot PHP Only allowed these few posts are these few block types So in our case we had home page hero curated posts curated staff And then you set this property template lock all and Gutenberg is gonna treat it As if it's locked so the user can't drag and drop around so you can create these fixed templates So I know there's a lot of hesitation on Gutenberg. Well, maybe people have too much control So you can kind of take some of that away if you want to So that's one way to do it. I want to look at one one small block This is just a prototype of a block that I built for a production site for the government site This is just an example of it. It's not the real one So we had this curated post block Where they could either toggle between recent posts and it would just auto pull in three recent posts Or they could search for specific posts curate them in There's a hundred ways to do it. This is one approach So over on the on the right side, you'll notice the block inspector has three fields So here we'll go ahead and add the curated post block on the right side I can search for posts select one and in real time You'll see it updates so I can preview what what this post is going to be So I just want to walk through how to build a block like this And one approach that I took for it So this first part we have the this called an inspector in Gutenberg. You have these inspector controls and What's happening behind the scenes you have a block that has these attributes. It's a JavaScript block This block is going to make an HTTP request to talk to WordPress to get some sort of information in our case We're searching for posts and in response we want Posts to populate the list of potential posts to select in my case. I'm using plug-in graph WP graph QL So the block makes a graph QL request to WordPress Says hey, I want a list of results of posts matching the keyword that I typed in so that I can populate this select box Graph QL is obviously our WP graph QL is a WordPress plug-in. So it's PHP uses PHP to execute against my sequel All right, get to your data sends it back up to your block And then Gutenberg has a concept on the block level called set attributes so I can take the IDs of these posts that I'm selecting in the post picker and set the IDs on my block and then in real-time my block can Rerender those results. So this is an example of a graph QL query to search posts if you're using WP graph QL so I can Nice thing about graph QL is it's very declarative. You say upfront what you want and you'll get a response exactly what you want back So here I can say I want to search posts and I have a variable called keyword. That's a string That's what I'm going to expect as the user types as they're typing I send this request that uses what they've typed as that variable and then in response I want the ID of the post the title of the post and the date of the post You can see as I'm typing in the preview what I what is being rendered is the title and the date So those are the attributes I need back so I can specify with graph QL the specific attributes I want back I get it and then I can render it in my component This is a tool called graphic whole that you can use to You know debug things with graph QL. You could test your queries test mutations things like that So graph QL similar to rest in that you get you send a HTTP request to wordpress and you get a JSON response back Big difference is you you specify very explicitly up front what you want to have returned It's not implicit where you just hit an endpoint and get something back So this is an example of that in action So I can take this query that specifies what I want for my component I can go to this tool test it make sure it's behaving the way I want it and then I can go implement it So then we have another query to render The as my content is changing from the post that I pick. I have another query that takes those post IDs queries data back from wordpress that I can render my blocks. So this query here Takes those IDs that I set for my post picker Tells graph QL. I want these as my variables these three IDs or however many IDs are selected I want to search for posts and in this case I can set arguments in graph QL I say I want exactly three posts returned and then I can filter my graph QL request I want post where it matches these IDs that I passed and I want it ordered by those IDs in ascending order And in response, I'm going to get that data and I can render those posts You'll see this is this dot dot dot post fields. That's called the fragment of a query in React or view or component-based development This allows you to write fragments of data that you want from the API and couple it with your component itself So in this case, we have a post card a card component that renders the post We have a couple pieces of data We need to render to that component such as the featured image source URL the title of the post the excerpt and the link of the post and So when we're building our component we can specify our data dependencies at the same level as our markup that renders the data So you don't have to have this like spaghetti code of like trying to figure out in one part of your application How to get the data how to wire it up together and then prepare it for your component you can specify right at the component level Here's what I want and then as your application grows Let's say we added a new field that we wanted you can just add it right here to your graph QL fragment And then you don't have to like search your app and figure out where all this logic to fetch data lives So we can take a look if we're building this component with a fragment We need the source URL for a featured image. So now we can render it because we have that data We need the title in the excerpt and then we need the link So graph QL is going to respond with just that set of data. It's not going to send us the whole post object It's not going to send us the whole media item object. It's just going to send us these fields that we asked for If you have multiple of the same block or even multiple different blocks graph QL is this concept of query batching so Where with rest you're going to hit End point and end point and end point you can't really hit like seven end points with one request Easily that I know of at least With graph QL you can send an array of requests and get one each make one HTTP request and get one HT Response as an array back. So in this case, I have two blocks that say hey I want to get these curated posts so I can render them and if we look at the actual request. It's one HTTP request one response two different queries and then my client my react application to take that data and render it I Think I'm about out of time. So I've got some links to resources WP graph QL website the tool WP graphical I used a client tool called Apollo client, which is a client that talks to graph QL Graph QL.org is the main graph QL spec website graph kills a spec that's been implemented in PHP Java Scala JavaScript like anything you can think of pretty much and then for my examples I use create good and block I'll also tweet out later. I'll put a repo for the actual block Plug-in on github under my name Jason ball Thank you