 Which is somewhat coy. We're going to be talking about Gutenberg Basically the entire day, but we didn't want to put Gutenberg in the title because we figured a lot of people would turn away and not know So we're talking about the future of WordPress development, which for the immediate future means Gutenberg development So we're going to show off lots of cool things with that We've got some practical code examples in the afternoon, which I'm going to be showing off how to create your very first Gutenberg block My name is Brian Richards. By the way, I probably should have started with that Beside me here are the other speakers. I'm going to pass the mic to them We wanted to get all of our faces up here because for the three of us who aren't presenting We'll be around the room. So if you get stuck or need help, which will probably only really happen in the afternoon Flag us down put up your hand. We'll come and see if we can help you get unstuck wherever you are So my name is Brian. I'm I'm leading the very first session after lunch for creating your first block I'm going to skip Greg. He can introduce himself because he's speaking first Howdy y'all my name is Zach Gordon and I'm going to be talking after Greg today So he's going to do a high-level introduction Into what's coming down the pike with Gutenberg and beyond and then I'm going to begin transitioning us into the Code sessions that we're doing in the afternoon explaining all the high-level libraries that ship with Gutenberg how to access them what a basic Block looks like from a you know programming level and a user interface level and then we'll kick it off To Brian and Josh. I also want to say Andrew right there. Can you raise your hand my friend? He could also answer your questions and anybody else played around with Gutenberg block development already a little bit Okay Triple J all the way in the backhand up to ask him all your questions So yeah, I'll be sitting in the back if you get stuck or have anything happy to help Hi everybody, I'm Josh Pollack I'm going to be following Brian this afternoon. So he's going to be showing like a basic block with a Maybe like one editable control And then I'm going to kind of take something similar Paste it into a more sophisticated setup with webpack and everything and then show how to you know use Fancy area six syntax how to use JSX how to break your Block plug-in up into smaller components that can be reused how to make stuff actually show up in the front end So kind of we're gonna end on how to start getting advanced and that should get you towards More experimentation when you get home and play with the stuff. So I'm gonna hand it off to Greg One more thing Sorry Because I have my we have lots of documented resources that will be sharing You should take notes because those are always better, right? You can learn from your own notes But if you get stuck and like you just can't progress during the day Feel free to just close your laptop and follow along And all of our resources will get linked and shared out to all of you via email So you can repeat this lesson on your own as many times as you want from home at your own pace And it's also being live-streamed and recorded. So everything is going to be super well documented for you And so now to Greg to kick things off. Thank you So hello everyone today We are going to take a peek into the future for WordPress development and learn about all the changes that the year 2018 will bring and before we start let me introduce introduce myself. My name is Gzegorz Jukowski But you can also call me Greg I work at the automatic and I'm extremely lucky to be on the team Which is fully focused on WordPress core development and Before we discuss the upcoming changes in WordPress, let's talk a bit about history to understand Better why there was an interesting how users interact and add content into the WordPress initial work on offer started in nearly 2003, which is over 15 years ago and The very first integration with with editor, which is the way of presenting content inside the editor Exactly the same as user will see on the website Was brought into WordPress into two-point-all release which was a long long ago at the end of the year 2005 it was powered by tiny mc engine and It's still present there as of today. In fact the page you see hasn't changed much since then But There was needs to come up with much more advanced solutions because WordPress was evolving from the blogging platform into a fully advanced Website builder and that's why some new content were introduced Things like short codes custom fields meta Metapost attributes and custom post times and this all brings those change to WordPress that it's Whenever someone was editing the content, they didn't quite see the same representation as the user browsing the website and There was There need to fix that arrived So some plug-in started to fix that this is example how the same short code that you've seen before Is transforming sign that tiny mc editor by the jetpack plug-in There also was new concept introduced like embeds, which basically magically transform your link into the preview of some external content and No, there's also customizer which is a completely different story and has its own user interface Which differs completely from whatever you've seen before and there's also another concept you need to learn when you are developing WordPress like widgets and Also, there is a whole different story with editing Your website where do you have sort of direct manipulation of data? But in fact you have all those forms on the site of your page when you enter your data as you can see all that started to be very disconnected different and that's why a few years back discussion has started how to fix that and There were many Places where those discussions started on work comes on slack on forums, etc, etc and The outcome of that is was that Matt and more than I can ounce Gutenberg project at the World Camp US in 2016 and This is the new editing and publishing experience for WordPress But this is it's important to mention that that is only the first phase because the next one coming next is customization and The idea behind the Gutenberg is to unify all the concept we just discussed under the umbrella term block and There is also reference to my mystery meet inside this quote you've seen before It all it's all about those embeds or plugins that change something inside the editor which user isn't aware of or can have an issue to recreate on another website and It's also very important to mention that Gutenberg is perhaps the largest change the workplace experience in its history So that's why we have full-day workshops dedicated mostly to Gutenberg This is how the new editor looks like when you open it inside your browser At this screen there are two blocks So here you have paragraph and the other one on the pages And but there can be different kind of blocks. So anything you add to your website likes Galleries images lists head headers stuff like this. This all will be Represented as its own independent block Also the key here Placeholders are key here because User needs to know how to input the data like it should be intuitive you need to guess look inside the toolbars to provide The way to to change your content and I have very important things that there needs to be Identical representation inside the editor and also when the user visits your website and There is also this idea that every block can provide Very basic customizations like change for fonts colors and stuff like this and At the moment the jack-and-drop is supported for files, but we are also Very fine the development of having jack-and-drop support for blocks So you will be able to move them inside the editor. It will be very handy if you want to reorganize your content As I said the key point is to have straightforward intuitive way of creating contact content Very important part is accessibility here to be able to Interact with war press for people with some disabilities Also mobile devices are very Like everyone is using mobile devices to browse the pages. So this editor also works on mobile devices So this is very important because what we have now it's quite Hard to manage and Maybe let me show it in action And you just need to mirror the screen so first big before I Start I have an The old post prepared which was written with the classic editor. Oh, yes, sure. Thank you Actually can do a full screen Okay That's quite unexpected Ah, this part the black one is not that important So this is like this is whatever you see in the old editor, which is If you see visual representation, it looks sort of this to achieve that you need to provide very very strange tricks with HTML source code and On the page it looks Like this It's a sort of similar Now let's open the same inside Gutenberg So as you can see this the same content is here. We have also a Possibility to change the source code and it looks exactly the same but what we have here is one big block and There is a functionality which allows to convert those The single block into multiple blocks as you can see here and as I'm navigating you have you see Paragraphs. This is image This is heading all of them have Here different toolbars. So if you can see this is everything created to header there are also some Things that allow you to change everything and it's reflected automatically on your page. You can also go With full screen There are many things like this and there is also this concept of sidebar Which provides advanced settings as you can see on the right side There are additional features like drop cup. So in this block, let me scroll it to better present this The first letter is bigger now. You can also change the font size You can change also the background You can make it this way and you can see now that there is there are some hints like this one is for activity Which tells you that this is probably not the best idea to do it like this So you can change it. You can also go full screen and it looks like this and When you probably preview this page This looks like this. Oh No At the moment it's like this about I guess it might scale with the font size, but I'm not the designer So I have no idea Okay, and I think I would like to show it's like I have this There's There are different places to insert new content. So as you can see here at the bottom I'm now starting to Type and I will provide a footer and now I want to have it centered and also want to have much wider and Maybe let's also change the to make it like this and What I can do also is Gutenberg. I can store it inside database and Convert it to shared block give it and give it a name and The same block will be available to insert using Inserter if I go here. I have the same block was even Nicer about this if I change something here and save it will also change another one and Let me go also to the Create a new post now so I have Prepared some content which is inside external document. I Can copy it and as you can see all the links are preserved So we want to have supper for markdown for Google Docs Most of them are working already, but it will improve now. I want to make this content look a bit nicer There is also this con concept on transforming blocks. You can transform blocking to something different in this case Let's change it to To the cover image, which is completely new concept and let's add some nice background I Can change also the deeming also make it full screen to look my much better You can also decide said Jack and drop some images like this and This Congress automatically inside the gallery and again You have still the lot of possibilities. What to do is this guy romantic why they're change the columns Like every block can have their own set of Settings and I think that is what you can move those blocks. So it's quite easy. You can also Select multiple blocks and do some transformation like this you can turn into least also, there's the couple of placeholders. I Mean inserted so you can also insert from the top of your side the same footer we saw before and I think I wanted to present this Slash inserted so you can start typing slash and then you will have Some hints what you can add here So in this case I added columns, which is still experimental But it allows you to nest blocks inside and you can also add images here and You can do like right do completely different things In here another thing a nice feature that I would like to show which To show it I need to switch to another post Because I don't have too many headers It's double a table of content as you can see here. You can see the outline of your Content also when you change that to something different it will automatically update and also gives hints if there is something that is Not working as it should be Okay Let's get to the technical part, which is probably something you most expect the most The technical review can be fine on the link, but the idea for the post content And how it's short inside the database it is still using HTML and it uses HTML commas as the the market demarcation inside the Content to Make explicit the difference between individual blocks There is also this concept we will talk about this today of static and dynamic blocks So basically static is something that contains only html code But dynamic blocks is something if you want to provide for instance the list of latest post so it changes Very frequently to do that we have we provide PHP solution which allows you to Render on the PHP site and display on the page Also want to mention that all of that you have seen is JavaScript base so on the client It's all driven by the JavaScript code and is using rest API The one that was introduced to versions back to WordPress Those solutions to provide HTML always exist because there are businesses which rely on SEO on or for instance web haulers needs to be still supported So you are fine on the front end side just the admin part is javascript based There are also a couple of Libraries that are used behind the scenes that in my opinion they are and that important because we built on purpose Abstraction layer of a react and reacts just to make sure that there will be no repeat the history that WordPress depends on legacy versions of software is like jQuery backbone. They are outdated and They cannot be updated because of backward compatibility issues. There are also WordPress packages, which we are Publishing And this is just because want we want to have this We want to out to use for all the plug-in developers everything that core uses And there are also a couple of tools. There are advanced tools which for plugging them on unnecessary, but Might be helpful. I listed some of them, but the most important part play Role plays here WordPress again, which is using to load assets. It passes bootstrap data like users settings and so on And and also Gutenberg is built with the modules. There are like in my opinion two types of modules one are low-level Which will be also published as independent packages for external usage like internationalization date utus, but they are also higher or higher Concepts like blocks components editor everything That might be also useful I Said that before I want to repeat that again The fact that we are using react doesn't mean you will be using the future It's just the best tool for two. They think we wanted to have at the moment and This is very important in my opinion because This editor is built on components which are composable and we want to make sure that HTML becomes there like Implementation details and it's not the main factor you discuss when you are building your plugins and It also I was to build your plugins By composing those components like it's quite similar to how you build with something with leg lego pieces And also we talk about about those blocks. Let's Take a look how it looks behind the scenes so Everything is rubbed like and cute by php Which provides JavaScript HTML and CSS but HTML part is pretty tricky because it's contained inside the JavaScript code and CSS is Sort of inside so in the core it's sort of inside also JavaScript, but it's then put outside of it We will talk about about it a little bit more because The next session will cover that in depth. I'm just leaving the link here for future reference I will share those slides later so you can catch up with something and this is this is example of this very simple block from core which is separator and in like basically we will talk about it in much more today, but I want to a fuzzy that Every block has its own name to be represented and there are two concept edit Function or component is something that is displayed inside the editor and there is also safe This is something that your representation from editor is serialized into HTML representation and also blocks are composed out of components again like lego pieces and You can see also here that there are low-level components which are glued together and bundled by higher Level components and then by the block itself. This is part of the edit Function which is meant to display this representation inside the editor and There is also some basics up or for teams During the demo you saw the Gutenberg starter team which should be a backbone for creating Teams it still have some rough edges, but it will for sure be improved in the future and here's the link for the team There's also some basic teaming support using add team support function for colors alignment this full full screen alignment and There's also very interesting Concepts of templates which will evolve during the customization phase at the moment it works using code and Basically it allows to set a couple of blocks with predefined attributes and Placeholder Prompt there is also an option to log so when you use this kind of Code then you will have when you open your editor. We will see Editor filled with some blocks which you just need to fill in and then that's all you need to do for the content which is similar concept to see custom post times Another important thing for plug in development will be extensibility and we want to have a Introduce a structure for that because at the moment everyone can update basically everything inside But we want to have a common flows for the things you do. That's why there will be More many in the top which will allow you to add your own action or Reference to the another concepts which is sidebar, so you will be able to put or your Management of some advanced concept inside the star toolbar on the right side, which on mobile takes full screen and There's also a concept of screen takeover if you want to have some configuration and like this this will be pretty handy and As I said, we want to have like fluent flows which will be reputable between plugins and There are also another Features coming up next up, but this will be after the initial release for sure, which is Block comments or block annotations So we'll be ever like in Google Docs comment on the editing content so people can share some opinions and There's also proof of concept for collaborative editing at the moment. It works for two peers using p2p protocol so this will allow to Basically look at the blog that someone else editing and then you will could edit the same content using many peers and Also, let's talk a bit about the future and So the first important part match pros hasn't happened yet, but it can be matter of days or weeks I don't know about there are some initial discussions happening And couldn't make it's not a page page reader yet, but it might be calm We know it's like still under exploration. There are lots of ongoing talks about that, but definitely it will be possible to create the same way as you could create content templates for your for your pages We want to explore it before There was an issue is react paint and close in the past that's we explore different frameworks like view preact and In the future, maybe it will be possible to use something different and that would be supported by the core, but As I said before we don't want to Lockdown us with any framework and maybe in the future. This will be also Ported to the front and because all you all you saw before is only inside the admin interface But there everything that is displayed outside is just the plain HTML content, which is not The best in many cases There's also another important things because do we introduce a lots of advanced tuning and Also, there will be new apis. That's why you want to have starter teams and usable scripts. What's that? So we as I said, it's very hard to start JavaScript project You need to have a knowledge about the tools and stuff like this First of all, we want to provide a way to work with JavaScript Using the same code you would write today inside your plug-ins, but using our apis and But some people for sure will do some advanced thing Advanced Work and they need to have support for the whatever we have so Ideas Borrowed from the JavaScript community all the major frameworks have they all cli tools and also Warpets have WPC li and It's possible as of today. You will see it later to generate your like the scaffold of your block using command line and Another thing is their position you are started work on which It's also used by core and the idea is that whatever core use this also available for the plug-in developers So they could use the same tooling and then the same Configuration we have but there for the plug-in development at the moment We have support for unit testing which is maybe not the most important part But we are working on other things and especially on the build, which is quite complex if someone is aware of that and Also, we have those shared packages So the idea is that all the building blocks that are used inside the WordPress will be available For everyone Also, we will talk about later. I will just keep it now. I have those slides How you can get involved, but probably you can repeat that at the end of the day and Also during during the conference. I will be at the Gutenberg boot which will be there and People will be able to interact with Gutenberg and I am happy to help answer your questions During the conference. Also today is a great moment to ask anything you want and Yeah, that's all I've got We probably we will do our best to answer your technical questions throughout the day But if you have anything related to the presentation now, so I'm just gonna ask if you have a question that you can do it into the mic for the live stream So raise your hand if you have a question for Greg. Yes This this is currently live yes Can you tell me what Or how Gutenberg will affect page builders like beaver builder divi, etc As far as I know they they we are in touch with some Some page builders so they want to build auto on top of Gutenberg. So they will exist They will transform all the code base just to be compatible with whatever we provide and sort of This will help to shape them to have common api's then they can depend upon so Is there a way to restrict certain features like Styling and changing font colors, etc to certain users Nope I mean I saw a plug in which which restricts blocks so Every block has a lot of settings and you can restrict them for given roles and Also for the front-end display But like individual things there is there are a couple of ways of to modify your blocks. We We are going We are already using Implementation of hooks hooks, which is basically Ported from php which we all to do sort of things like that Yeah, Greg. I was gonna ask couldn't we use the filter that runs on the save to like Validate say like if there was a control for you know font size and say, you know Hey, if it's greater than 48 bring it down to 48 or if it's less than 12 bring it up to 12 Couldn't we do that filter? Yeah, for sure. This is something it's when it's JavaScript so what we do is we expose everything and under the global so You can go go nuts and change everything if you really need but We want to give those features to these users. Yeah, we we definitely want to work much more on the extensibility part especially for the code base But also it's like everything will be Based on the real need and we don't want to come up with something that won't be used by users So I've been playing around with Gutenberg and even when creating simple blocks that are not dynamic I'm just saving in it the save method saves everything as HTML to the database but For me that has been troublesome because if I want to display something differently in an RSS feed versus normal content Is there a clean way to do that without doing a dynamic block? PHP render callback that like checks what type of request Probably you could because in fact yes, that would work. Yeah, thank you I mean because when when you are dealing with dynamic good, then usually you return now just to Take everything to the PHP side, but you can also Generate the HTML code will be like a default one for the front end But for the RSS feed you would just provide a different representation with the render callback It will provide you the same content and you can enrich it modify whatever you want probably it won't be As handy as it is but I Guess do you have to do to do the same with short culture at this as of today because you need to pass them I have some clients. I would rather post to Facebook than to post to their website So I'm wondering if the Gutenberg Plug-in would make them less nervous about creating posts and is it currently in a state that I can give it to a client? To the client it's still plug-in I mean depends on the use case if this is a brand new website then definitely you should try it If it is an existing one it depends how much is customized So that's That's the way I would approach it if it's highly customized then probably I would wait until it gained into the core before being of course Clone your website and start playing it and find the rough edges But as far as I know if you are doing everything like Properly inside Like standards that are in the industry then it should be fine We are using like every week or two. So it's like there's everything Every every any issue then we always like quite responsive to the Buck fixes and stuff like this So you may have covered some of this before I got here, but how are we theming? What's the workflow? Are we? We write the block in JavaScript, and then are we going into a usual PHP and CSS workflow? And what styles are we defining in that CSS or is it react with inline styles? Which the carry nation in me is getting out an axe about and So are we? So what can we lock down to you know make sure that we have a theme? Oh, yeah, so Okay So there's no magic inside to react. So everything is just plain CSS and also the output of blocks is Trying to be as much close to whatever you would have now using tiny mce. So this shouldn't change much and and I'm not the designer. So I'm not perfect. You want suited to answer it But as far as I know all the standard classes are still there So there is this a line full a line and why the line thing which is probably something new Which we should be covered, but this is like no, I don't know 100 lines of thing that probably will be inside the core and And What else I would add as we go on today Brian's talk and then what I'm doing We'll see more of how like HTML gets into the post content and as you see that you'll realize that this question is so hard to Answer because it's not much in terms of we're going to put HTML into post content and try and have like the same classes on it The same structure as our goal because then CSS is an open question in a good way, right? As long as there's HTML with this consistent structure in classes, then If you know WP and Q script and CSS you should be fine for your thing. It's just a matter of okay Well, there's new classes to add CSS for Yeah, so it's not much new it's a little conceptually weird it will get to that throughout the day Did you have a question Security issues I'll answer that by saying that one of the good things as a developer Where you know plug-in developer is that in the past before we had a rest API and before we had like this formal system for building interfaces We're kind of all inventing it on our own every developer was responsible for not screwing up Literally right like it was my responsibility coding out a meta box to make sure that I had a way to save it that sanitize Did validated it when it came back on to the screen that it was safe You know that didn't have access to stored XSS that sort of thing That was my responsibility as a plug-in developer now that Gutenberg is handling basically everything From like I tell it okay. We're updating this value In the rest is kind of this mystery me it's under the hood it's now on core To make sure and you know I might have to register metafields for example to make sure that there's a sanitization there But because the saving is going through the WordPress rest API It's now mainly not entirely but more of a core responsibility not to say that the plug-in developers are off the hook But more responsibility for security is now transferred to core Which means that there's less opportunity for plug-in developers to make innocent mistakes And less opportunity and more opportunity for core to fix everybody's problems at once Well, but that's the thing we're talking about ways in which like stored XSS Fundabilities can be created in the way that my sequel injection attacks can happen the more that that is a core Responsibility the easier it is for the the open-source project to solve those problems Instead of like educating plug-in developers to go back and update legacy code You know I mean it's just so much more efficient to develop, you know, we have one one thing to work I feel like there was a question back here that was waiting Zack you'll cut us off for time at some point. I kind of have a loaded one for Developers that have a lot of custom meta boxes in version four. Is there any consideration as far as porting those into version five? I mean are we looking at basically having to refactor everything in order to get it compatible in version five or I guess what considerations would you have for sites that are really Really heavy with custom meta boxes. So as far as I know The support is improving and for meta boxes. So it should work in like most of the cases But also it's worth to mention that every Big players on this field are working on their own compatibility with Gutenberg. So this should be supported on their side, too I don't know. I don't have much experience in meta boxes Myself, I'm a JavaScript developer I actually had a question. Can you are you able to toggle the classic editor in Gutenberg or is it sort of just Install and you're on the new I mean that by toggle the classic editor. Oh, yeah. Yeah, there's plug-ins Already there which allows you to disable Gutenberg completely But we probably will provide also ways to like pick Gutenberg only for post and pages But for instance for your CPT's there would be your own solutions if you want to have classic editor then then it's perfectly fine And also to kind of answer both of your questions at once there is support to mark a meta boxes not Gutenberg immutable So that would cause the editor to fall back to classic editor And there's also a way to mark a Gutenberg a meta boxes only for backwards compatibility You know Do we have other questions anybody? My question is about where you showed hinting with the background colors and text is that's if Accessibility feature or is there a possibility of being able to put in helpful hints for when people are creating content? Yeah, this is one of those features Actually might come with more of that in the future. It all depends like of the of the use cases This one what you would you see you can also use those components inside your own plugins and do something similar so There's also this one with table of contents which shows that Those headings should be like have a proper structure And Yeah, and when you are using Screen readers then there are lots of Accessibility features that help you navigate through the page as a JavaScript developer I'm curious if you can comment a bit on Containerization strategies as as you work on environment and and create Something where people are going to be logging in and using Gutenberg in the separation of the front end versus the admin where and then Consideration of what npm packages you're using in plugins that might you know have privileged access to? Infrastructure and databases, you know when developing like what what what thought process do you go through when you're considering? You know package management or server management or containerization of the different concerns in in this model I don't know if I properly understood the question, but npm on itself is something that you download and just Build your JavaScript code so it doesn't have anything with PHP site In fact, we also did some proof of concept So Gutenberg as a editor can work independent of WordPress just doing some stuff because it's based on rest API so there is no Like anything that glues very strictly with PHP part what we will have to what we will need to have Happen at some point all the settings that are on PHP site will be we'll have to be exposed as a rest API endpoint to So does it answer a question or? Zach wanted me to point out that there's also PHP server-side rendering involved which we'll show later today as an optional way So you can do everything in JavaScript front end. You can just save static html Or you can register a php function that registers it on the server side That's a key component of this and then it's kind of what works best for you solution And there is a question So talking about like php rendering versus JavaScript Do you think there's a possibility if you wanted to build your front end in react or something also? Using similar things as Gutenberg so pulling out from the html comments the attributes and things and Rendering maybe pre-rendering with note or rendering with react on the front end rather than php This was on one of the slides, right? It's like definitely. This is the one of the possibilities in the future but there are some limitations like Nowadays in the WordPress Land there's so much dependency on SEO which is html base that we couldn't take as big leap forward with doing that but if you go and see WordPress.com which is Calypso API it's all JavaScript base with even note back and it just talks to php to return that data using rest API approach so That's totally possible Okay, I think we're out of time so everybody say thanks to Greg. This is a great