 Good morning, everybody. My name's Jeff. Can everybody hear me okay in the back? Should I talk like that? This one this one closer. All right Gotcha. Okay. Um, like I said, my name is Jeff We're gonna be talking about Gutenberg blocks kind of what's underneath behind the scenes Stuff that you don't usually see when you're dragging and dropping blocks and playing with Gutenberg I work at automatic. So I've been there for about eight years and I work on Calypso which is the front end of wordpress.com. So I'm working and react most of the time with connections to the back end and So, you know, it's I've been learning Gutenberg just like the rest of you so thought I'd share some things that I've learned and Feel free to stop me if you have questions, especially when we get to the code stuff if there's anything you don't recognize Just let me know So by now you've all seen the block editor, you know You come in to the the wordpress editor and you can put in a Twitter block You can put in any sort of block and you know, it's what you see is what you get it drag it around and it's a nice little package It's a block. It's something it's a piece of content and you know, we're all pretty familiar with that by now It's it's only been there for I don't know a year How long is Gutenberg without not very long, but we're all pretty familiar with it by now and I'm sure we've all seen this thing pop up a bunch welcome to the wonderful world of blocks and There's the promise of Gutenberg bringing full-site customization The next round of the focus for wordpress is to bring all of these blocks together for basically revamping the customizer But I'm gonna talk a little bit about what's behind the scenes today So if you look at the the Gutenberg repository, there's a quote that's been there for a while That says Gutenberg is more than an editor While it's currently focused on building that block editor It doesn't end there So there's groundwork for a new model for wordpress core that will ultimately impact the entire publishing experience of the platform I don't usually like to read quotes in a talk, but I feel like this is pretty important So Gutenberg, it's more than just this block editor. It's a modern web framework for wordpress And it's something that you can use in your sites and things that are beyond websites I invite you to install the Gutenberg plugin if you haven't I know Gutenberg is Installed with wordpress core as is but install the plugin you'll get the latest and greatest and there's this cool demo if you haven't seen it so if you install the plugin you've got in the sidebar menu Gutenberg demo and You can just play with some of the stuff that you've seen kind of at the keynotes You can move stuff around see what the images do it gives you kind of a good overview of what's there And if you think about it, there's a lot going on with this screen right here there's a lot that's behind the scenes for making this possible and it's kind of cool that instead of keeping it all in Gutenberg and and Not opening it up to you to all of you and all and everybody else in the world These things are being published as packages and you can use them As you see fit so let's talk a little bit about that What's this talk about what are Gutenberg packages? What are some packages? What do they do? How can you use them in your own project? What are some of the other tools that came with Gutenberg that are now in wordpress core? And then how can you contribute to back you package development? How can you take something that you've learned or something that you see that maybe doesn't suit your needs or you think would be Other people would find useful. How can you give that back? What's it not about? It's not about how to create a Gutenberg block. It's not about how to Build a site composed of blocks It's not about the voyages of the Starship Enterprise if you want to learn about how to create a block Julian had a pretty good Workshop yesterday, so I invite you to watch that video if you didn't see it It's not taped Workshops aren't taped. Well see you the next time there's a workshop on how to build a block or go out and then check out the Handbook for building a block But this is kind of about how to do things outside the box in your own project if you have an existing Site or it's something that you want to use some of this and that's newly in wordpress So what's in the box now because of Gutenberg? There are third-party libraries like react and load ash that weren't here I give a talk at at work at bashville two years ago, and I talked about how to you know sneak react into your wordpress project And we don't have to do that anymore. It's in wordpress. You can just use it load ash similarly There is something called underscore that is in wordpress already, but now you can use load ash It's the newer version and there's packages which is what we're really going to talk about these wordpress packages or Gutenberg packages How are they built? How can you use them? So what are Gutenberg packages? It's modular code. It's reusable. It's it's a package just like any other package system You can take it and use it the source is in the Gutenberg code base under the packages directory You might have heard the term mono repo and they've kind of taken this approach with Gutenberg to kind of have everything that they might use in This vein in this sort of framework and have it in the Gutenberg repository and then package those up And then they can use them in other other places like wordpress core or like your own your own software they're managed by a tool called lerna and Learn it can get pretty complex, but it's just a way of taking these things and spitting them out in a format that can go into npm or other sort of package management systems and When there's a Gutenberg release Everything gets built and then they get pushed to npm if you're familiar with JavaScript development at all I'm sure you've used npm to install a package and that's where these live Then wordpress then includes these built copies of these packages Inside the WP includes JS disk directory and You can use them. So what sort of packages are there? There's all sorts of packages. There's data fetching state management presentation view layer ports of back-end PHP stuff that you'd expect In 2019 to be in the front end. They're there, too There's a lot of dev tools and etc. Etc. If you look at npm under the wordpress Organization, there's oodles and oodles of packages there for the using and Indeed if you look at the source of wordpress, this is the package JSON Which talk a little bit about in a little bit you can see that all of those packages at wordpress Blah blah blah. They're all being imported into wordpress itself. So The source lives in Gutenberg and wordpress imports them and you can do the same thing Here's the block editor handbook for one of these packages. It's called element and it's Interesting to note that elements kind of an abstraction layer on top of a react element And you can read all about it there. I just kind of wanted to show the handbook and what a package looks like there There are reasons if you read the page why they chose to create an abstraction layer on top of react But for the purposes of this talk, you don't really need to know that The block library itself is an npm you can install the block library and then register the core blocks and basically a non-wordpress context and There are software out there that have used the Gutenberg editor That are not wordpress. So I think that's pretty cool How can you get started using wordpress packages? First I suggest that you install wordpress locally and it's um, you know, it's kind of a matter of choice how you like to do that A lot of people like local by flywheel I Actually use the jetpack docker environment. It's pretty handy for for my day-to-day VVV is short for varying vagrant vagrants I think and a lot of people use that Gutenberg itself has a Docker environment that you can spin up You don't have to have anything installed on your system except for Docker and if you follow the instructions here It can help you get a local environment, but like I said, it's really kind of What you like to do with the kind of projects that you like to work on as to what your local environment might be it might be You actually install wordpress itself and that's you can do that if you want to Something else that you're going to need is node. It's anybody not familiar with node. It's It's a Way to run JavaScript locally and run scripts and do all sorts of stuff. It's kind of a Swiss army knife and It's kind of one of the first things I do want to set up a new computer is get my node environment I use a piece of software called in VM to manage that because different things that I contribute to required different versions of node and again, that's something that people have different different opinions and different Different pieces of software to manage their node versions and Then you can just use npm npm is a piece of software that comes with node typically that lets you install packages npm Used to be short for node package manager and you can think about it that way So like I said these scripts or these packages are in npm. You can just install them npm install at wordpress scripts It's kind of the basis of the demos. I'm going to be showing in a little bit that installs a Tool to help you run These tasks to build your files and that sort of thing and it's pretty useful ES Lent plug-in is another one that I wanted to call out because it It helps you to to do things WordPress style way a lot easier if you have an ES Lent plug-in in your Editor it can show you where things are not to the WordPress coding standards and you can even use tools to automatically Make them to WordPress coding standards. It just saves a lot of time. I'll show that often a little bit and npm install word at WordPress dot dot dot all of those packages. That's pretty much how you install them Is there any questions about anything so far? Cool This goes to the scripts that I was talking about at WordPress scripts if you go to Might not be able to see that list if we can zoom in developer wordpress.org block editor packages package scripts set up or you can just Google for WordPress block editor handbook scripts or at WordPress slash scripts This shows you how to use Some helpers to help you do things like build and do some lending the main one that we want to talk about is build and start There so I would suggest you at least have those two Because after you have that in place in your package.json file, you can just run npm run start and it's pretty handy And it will keep rebuilding your files Cool. Okay, so I'm going to show off some code on how you can actually do this sort of thing Please feel free to stop me if anything doesn't look familiar if you don't understand the syntax That sort of thing if you want to follow along You can go to the github repo JBLZ slash WCAVL 2019 And here's the repo that I just Told the link to First file we're going to look at is just your basic entry point for your plugin This can look like any plugin in WordPress. This just had to be something in place for me to do a demo And what I'm doing here is for these demos. I'm just looking for a particular post ID and then For the repo it was github.com slash JBLZ W or slash WCAVL 2019 Yes, thank you. Cool There's the repo cool, so What I'm gonna do for the first demo is I'm gonna look for this particular post ID and run this demo one And if you look at demo one, I'm in queuing some styles and scripts and running this function here for registering a bunch of these These packages scripts that exist in The WP includes JS disk directory like I mentioned before and this is on the reposts I don't feel like you need to copy any of it down And then I'm just in queuing a JavaScript file just like you would probably be used to is anybody not familiar with WP and Q script and WP and Q style Those are if you are It's just a way to take a script or a style Which is which is just a file and then send them to the browser at an appropriate time Rather than just taking your JavaScript and writing it directly into PHP So this is a way to get a JavaScript file or a CSS file into the browser and It's noteworthy to to mention that this is not a Built JavaScript file. It's just plain. I'll show it in a minute and It has some dependencies and if you look at the dependencies for it We're including something called WP polyfill That is one of the packages that's available to you that that lets you have broader browser support It's not kind of a silver bullet But if someone is coming in with an old version of Internet Explorer something like that It'll probably still work if you have this or another polyfill to Bring it up to modern JavaScript standards There's a package called nux which stands for new user experience It's a way to focus attention and show guided tours and that sort of thing There's auto P Which is a port from the PHP side of WordPress That takes whenever it sees a block of text and has a new line in it. It will add paragraph tags around it Date there's a date script, which is another port from PHP Element is the element. I showed you before Which is the abstraction on top of react I 18 n is short for internationalization It's a way to localize your UI for various audiences word count is self-explanatory And escape HTML is a way to prevent troublesome characters from getting into your browser and causing trouble with cross-site scripting and that sort of thing so now we can take a look at the JavaScript file that is loading and Before I show off the demo. Let's take a look at that Let's look at it in an editor. That's a little nicer All right, so this is just straight JavaScript. It's not compiled and It's wrapped in a function that wraps around this global WP object and You're probably familiar if you've done any front-end JavaScript with WordPress this Global WP object houses most things that are WordPress specific that you can use and then up at the top I'm destructuring out these scripts so we can just use them locally And those kind of relate one-to-one with the packages that I showed you before auto P date element escape HTML I'll show them show you how we're going to use them I've got a block of text that's maybe from an API. I'm looking for an element at a particular place and Doing some stuff. I'm doing a word count on it adding an event listener wrapping in internationalization functions and the rest I'll come back to you after I do the demo First off the plug-in is not activated. So you can see it's just an empty page if we go and look at The editor for it. There's nothing special going on. It's just a regular page type post There's nothing in the content. There's just a title and As you see there's nothing there, but if I activate the plug-in That JavaScript file is going to kick in it's going to look for that element there It's going to take that block of text Wrapping it in WP auto P to get the paragraph tags You can see it adds paragraphs around where there were spaces here That is the the NUX Tor I can't remember what you call this particular widget, but it attaches this sort of element to Another element on the page and I added a little Little delay so you can watch it's not there until you scroll down Up there it is and it's styled pretty horribly, but at least it's style, right? New user experience so The welcome to the wonderful world of blocks pop-up thing that I showed you at the beginning is I think it's part of that And the button handler works and it's doing a date format and we look back at the code Yeah, there there are properties for that. It's not implemented here, but you can You can keep track of the state of that Yeah, that's really annoying, but it will come back because I haven't implemented that part And So a couple things to kind of point out is this is how you call the auto P. It's a little weird because You import it as auto P and then you have to call auto P auto P And then it's in kind of the same thing with escape HTML escape HTML That's kind of a gotcha there That's lowercase and that's uppercase and they all have different functions and then that you can use But the escape HTML is making sure that sneaky scripts don't get into your stuff from an API or something like that This is your internationalization localization function to wrap a string for translation so if we had If we were trying to target multiple markets or something like that multiple locales We could have translations for engage that were local to wherever we are On the back end and we could load those and it would show and all of that stuff Let's see is there anything else? Nope. I think that's pretty much it for demo one. Oh the word count So you can see it's counting it and then just saying Appending to this string it has that number of words and if we look back at the page Move this out of the way. There are 215 words in that ridiculous Star Trek Ipsum that I found on the web Cool so that is Kind of an example of something that I would probably only do kind of as a last resort if you have an existing Script that you don't really want to convert to like a built JavaScript file If you don't have a built environment if you have other constraints and you're loading from Ascidian that you can't affect you can then go in and do this sort of thing without having this big build environment but the Kind of the beauty of that at WordPress scripts Thing that I showed you before with the build and the start is it gets you a lot of stuff for free that Otherwise would have taken a lot of setup Webpack environment a webpack is a way to build your JavaScript it gets Everything this WP scripts binary can do for you So it's kind of cool. I'll show you that and In your terminal You can just run Yes, thank you That better You can just run npm run start and you see it's going out. It's looking for It's looking for some configurations. I'm using the default webpack configuration. I've not customized anything It's just what's built-in to WP scripts And it's looking for files in a particular place So as long as you put the files in a particular place for your JavaScript entry It kind of does everything else for you and you can go in and let's see. I'll page down a little bit so you can see I'll go in and edit demo 2 Which is just the hello world for using Using this from a build script so set a one Exclamation point will do three and if you look back here, it's going to pick up automatically that I've Edited that file and build your whole app again just the parts that need to be built. You see it only built that source demo to index It's pretty smart about knowing if something has a dependency on another module. It needs to rebuild that So it's kind of cool So it helps with that feedback loop. It kind of makes it more like you're just Loading a JavaScript file and you're just editing that so you don't have to go out and run the compile script again so the entry for our built demos is in See how am I on time as an index.js just inside source and It's nice to separate out your dependencies like this So if you look at the WordPress source and the Gutenberg source I'm you're going to have things like external dependencies which are not part of WordPress proper They're things that we've imported Internal dependencies. These are particular to the demo that I'm giving today and if you look other places let's look at for You'll have WordPress dependencies, which these are the packages. These are things that you're importing from npm or Scraping off the WP global or that sort of thing. So it's nice to have those in place So you can kind of see what's going on Let's just talk about demo to for now I'm just importing it from a directory that's relative to the current one and This is just a little bit of an illustration to show that you know Your app can be dynamic and you can switch based on a number of things and I'm passing Demo to from the PHP script For the built demo Just letting it know this is demo number two for this particular page And if you look back here, if it's demo number two, it's going to render a demo two If you're not familiar with this syntax here This is called JSX it is a way to make writing JavaScript components and particularly react components a lot more like writing HTML it helps with composition You can do things like adding foo equals R and That'll automatically get sent to this component as a prop or a property So it will know that whatever wants to display a demo to also wants foos to be bar if that makes any sense probably doesn't While I'm live editing to show you something cool I added a a new line added some spaces and You're probably familiar with WordPress coding standards that that wouldn't fly so when I hit save watch what it does Puts it right back and this is part of the ES lint Package that I showed before I've also got a piece of software in my editor called prettier Which takes those ES lint standards and then applies them on save and that's all customizable per your editor So I invite you to look at ES lint. It makes that sort of thing so much easier. You can just paste stuff in Do all sorts of stuff? I Can even do like oh, I forgot that this doesn't need to have a demo to closing and it will get rid of that and Just make it a self-closing element and as you can see it looks a lot like html and it's meant to And all the time I'm doing this it's rebuilding my app in the background So let's look at the demo to on the front end just for the hello world and This was it with the The plug-in disabled when I reload it's just gonna say hello world because that's all that we've told it to do here This is a react component. It's a functional component that takes no properties and just spits out a div that says hello world That's pretty simple If anybody doesn't understand this syntax This is just a function short function syntax that takes this one takes no arguments, but if it took arguments We could put arguments in either arguments or We could destructure them with arg1 arg2 But this one doesn't use them. So there's no sense and in the background you can see it's been building all of this stuff and if you take a look at What actually gets sent it's build JavaScript Let's take a look at demo 3. There's only one more after this. So I have a couple of minutes for questions same thing demo 3 is just switching on a particular page number post post ID for a page minimal Dependencies load ash like I mentioned before it's it's a functional programming Kind of helper utility library that's another Swiss Army knife. It's really good if I invite you to take a look at the docks for load Ash, it's really useful on the front end get is a way to Get deep properties of an object without worrying about Errors if you've ever tried to do like X dot y dot z and you get a weird error this helps you get around that and you can specify a default value so in this demo, we're gonna do some fetching so we're importing the API fetch package and You've already seen the escape HTML. We've already seen the Internationalization functions I've got a post ID that I'm gonna try to fetch and Here's the fetcher function to do it and All I'm doing is calling the rest API for pages and this post ID and After the rest ID our rest API comes back then I take the post do some massaging of it and Use the get function from load ash to get deep into that post object that comes back from the rest API and get what I really want is this title rendered for a title and link for link and Content rendered for content if you look at the shape of the rest API, that's how it comes back and then I'm taking and looking for Looking for particular elements and then just plopping the results in and this is not the best way to do it And that's what demo 4 is for to show you the best way to do it or the better way to do it and There's a button and when I click it it's going to fetch the thing and it's gonna put the stuff in these It's any of that unclear. I kind of went pretty quickly through it right here. Yeah. Yeah so Okay, right here This is just a string if it's probably hard to see on there But this is a a newer kind of string and JavaScript that uses a back back tick instead of a single quote Yeah, so if you take a look at this self-closing syntax if we take out that slash and we can put Stuff in here and then close h3. It'll keep it But that's just it's a shorter way and there's less code to store If there's no stuff in there, it'll get rid of it and just do the self-closing syntax I don't think that's valid HTML by the way to have an h3 that's self-closing I think it'll probably work, but it's not really valid Anyhow On to the demo. Let's see if this works Clicking and it's getting this post over here there It's a regular post. It's getting the title and the the content over the REST API and just plopping plopping in into this div that's there and If we go over here and change Change that there's coffee in this nebula to Art Tuvix And we reload this actually we didn't even need to reload could just click it again It's gonna go out and get the new title and the link that's there and same content and That's all happening over the REST API So any questions about that? There's really no data flow or anything there the package part of it is the API fetch and Internationalization around the button and escaping the HTML and escaping this attribute and link Again, this is not really how you do it. I just wanted to show off some of those functions All right one more demo and it's kind of the same same sort of thing it's going to reach out to The if I can type it's going to reach out to the REST API and get a post and Instead of just kind of taking the response and plopping it in We're going to do some things the data flow way if you're familiar with redux package it's a way to Take something as far as data flow and break it down into Discrete actions that have a particular action type and then sometimes data attached to those actions and Typically those actions are just a regular JavaScript object if you've heard of Programming model called event sourcing It's kind of the same thing. So you send an event which is an action Something is listening to that action to when it comes in and saying am I interested in this action? Yes, okay. Well, then I need to update my data that I know about from the data that you sent me And I'll show you that part in a minute but This is kind of the meat of that and What it's really doing is loading this door file And if anybody doesn't know about what I just did I just did it reflexively and visual studio code and a couple other editors you can hold down the command button whoops and Hover over things like the packages variables and go to them so I just held down command and clicked on store and Helps me get to this other file that I'm talking about really quickly without having to find it So this one the only dependency we're using is get from lodash and then WordPress dependencies We're combining reducers and registering store This is a data store and WordPress is kind of opinionated on how it's doing this I mean, it's it goes into detail in the handbook that it's not just redux. There are some decisions that they've made for WordPress itself for How to make it appropriate and how to make it less likely to break And a little bit better of a developer experience than just raw redux So these are the actions. I was talking about There's one called fetch post which tells the store that I'm fetching a post It tells it what the post ID is and so it can store that And if the post comes back as an error, I can tell it. Oh, that was an error So that the store knows that I got an error And if we get data back that is valid then I can say that I received it and send that post data through to the store These are reducer functions and you can think about a reducer function as Something that takes an initial state whenever your application loads So for this one the error whenever your application loads that error is going to be null. It's not going to have any value it's going to be null and Whenever one of those actions comes in It doesn't matter what kind of action it is if it sees any action It's going to process this function. So it's saying okay. What type of action is it if it's one of these three then it's interested in that action It's going to take some sort of action. Otherwise. It's just going to return the original state And so I'm showing here how you can have kind of Discreet nodes of data for your state and reducers. So there's the error there's the fetching state whether or not you're fetching from the API and what the data actually are whenever you get them back and Whenever we register the store We can combine the reducers into one So we're going to be able to say okay error is That result from the error reducer fetching is the result from the fetching reducer likewise and then there's a Concept called selectors which is a way to reach into that state Get that particular piece of state As a function and I'll show you how to use that on the react side on the element side So this is just getting the error that's getting the fetching state and that's getting the post data And you could get as particular as you wanted in here you could say oh, I just want the ID You could add a selector just for that here. It's kind of a lot to go through for a demo But let's look at the code And there are these helper functions in this package called WordPress data That's one of the medius parts of of Gutenberg if you look at the source there's a lot going on here with with function composition with Using these sorts of data flow pieces So it's a lot to learn There's a function composed to so When we return our React component because that's what we're Returning here is a demo for react component. We are composing with select and With dispatch and then calling all of those on this react component And what with select does is it takes it's a function that takes select and then returns the value of those selectors in this object as properties for the wrapped object and it's It's kind of a lot to wrap your head around. There's something called a higher order component which Is composed of lower order components And I'll show you how that works in a second But basically the content is going to be in your properties title link the error state and the is fetching state are going to be in Your properties and with dispatch is how you piece into the actions. So We're calling fetch post it's going to dispatch that fetch post action and then when we receive data we're going to Dispatch the receive post and if we get an error we're going to dispatch receive post error and This is the actual react component that is wrapped with all of those things and There's a button and when it is clicked. It's going to do this fetch John Belias And guess what I'm going to return Which does those things and that gets pieced to the properties of this react component and There's an error. It's going to tell you there's an error if there's not then it's going to tell you if it's fetching or not and If there's a title it's going to print out the title if there's content It's going to dangerously set the inner HTML for the content So this is kind of important You have to be able to trust where you're getting your data if you're going to just pop things into react otherwise Sanitize them run them through escape, but if we ran this through escape it wouldn't work. I'll show you why So that's demo 3 Demo 4 did you see it for a second fetching fetching and when it comes back? It gets that results and We got John Belias Let's change it so it gets an error so it's rebuilding in the background. I can just go ahead and reload That should not have worked. Is it still building? Live demo Maybe I did it too quickly or maybe it's cached. We'll stop this and start it again. See if that works yeah, so it got an error back and it's just Jason stringifying the error that we got back. He could probably do something a little bit more elegant than that in your actual app See if it will library build again cool. All right So anybody have any questions about this and I don't believe you if you say no because I Do I have questions You don't have to get as deep into Selectors and dispatchers, but it's I think it's a concept that you're gonna see a lot more going forward I think that the developer experience is probably gonna get better around it There are already some helpers that kind of help you do some of the stuff without piecing it together in your components But they use generator functions, and I didn't want to bother with those Back to demo 3 I wanted to show off that you could do other things other than just images of course And do demo videos. This is just a embedded YouTube and in a Gutenberg block someone put this song over the discovery I Think that's pretty much it for the demo. Does anybody have any code questions before I talk about Contributing cool, so all of this is still pretty new I gave a talk like I said two years ago, and none of this was in WordPress, but now it is and it's still getting better And you can help make it better. So if you see something that doesn't work quite right or if that Developer experience doesn't work for you think you can make it better. Please help make it better This is it's a very active project you can see it's a lot of JavaScript. There's 3% PHP in Gutenberg So fresh and new it's exciting This is the past month. There have been 226 merge pull requests and if you take a look at the activity graph I think that is probably The lead up to the merge into core So if you see something say something there's if you go to WordPress slash Gutenberg on GitHub You can go to new issue and there's these helpful templates to help you file a bug report or help request or feature request please do and That's it. Any questions if not, I'll be at the happiness bar