 Thank you. All right, can you hear me? Yeah, I didn't like I didn't choose the name Gutenberg but it just happened to be because you know Gutenberg obviously has served as an inspiration for you know creating content and writing and that's what WordPress also is all about. Yeah, this is my I think my my sixth year in the United States after I moved over here from Germany and work in ballet is has a very special place in my heart because it was the first WordPress event that I ever went to and the first time I met people who like were as passionate as I was about the project and so I love coming back here. Last year I spoke about WordPress and Gutenberg specifically as well. I had a code workshop about like creating your first Gutenberg block and I had some really good feedback on that and so I thought hey I'd come back this year and give a more you know broader talk about Gutenberg and where it's at and where it's going hopefully in the near future. Before I go into that however I think we should take us a short look back to what it is and where it all started and do a kind of an introduction to Gutenberg for everyone here who has not heard of it or has not had a chance to look at it yet who has missed the notification in their WordPress dashboard. So if you want to those just a small look back to what is Gutenberg. It's a project to create a new editor experience or editing experience in WordPress and kind of revamping the existing editor for post and page creation and it kind of tries to make it easier for everyone to create rich post layouts in WordPress. In early 2017 when the project was first kicked off in with this post by Matt Monleg on the on the make website he announced the focus for the year and said that it's endeavoring to create a new page and post building experience and kind of use the concept of blocks right content blocks to unify and replace the various disparate ways of adding content to WordPress like with widgets or short codes and embeds. As WordPress users when they start interacting with the software like there's a lot of concepts to learn a lot of things to come to grips with in terms of like how to create content in WordPress and how to write posts and there's a lot of terminology also to learn and that is kind of trying to bring that all together. This is what Gutenberg looks like today. This is the demo content that if you activate the plugin just to give you an idea of what I'm talking about. It makes it really easy to create rich post layout. Something that requires nowadays a skilled team of designers and developers and we're trying to enable every WordPress user to do that on their own. Creating beautiful and elegant layouts for their WordPress sites. What do you think of most modern news sites nowadays? They have a blend of full screen images and videos and interactive elements and a creative layout of content as well. Many of these sites have their own development teams and either internal or external to work on making these layouts possible. Gutenberg is trying to bring that power of the things that page builders do nowadays as well to the end user. It does that by embracing the block. Just the piece of content that can be any kind of content that you use to compose your posts and pages. Our current content paradigms that we have in WordPress today have not really kept up with the modern web. If you look at other CMSs around the web or companies like Wix and Squarespace, it's a lot easier for folks to get started with creating their websites. It's a lot harder in WordPress. By unifying short codes and widgets and the dozens of currently supported embeds in WordPress, we're hoping to create a single standard for content creation in WordPress. So folks have to just learn one thing when they get started with WordPress and can go from there and can apply that knowledge for any, I'm sorry, and apply that knowledge unrelated to what kind of content they want to add to their posts. Okay, that's better. Not only is it a unified user interface but also a unified code API which makes it a lot easier for developers to develop for Gutenberg and the new editing experience and also to customize the way that certain blocks and certain content elements work within the post editor. To summarize, ultimately, the vision of Gutenberg is to make it much easier to create rich content through ensuring good defaults. This is also one of the WordPress principles, right? Working out of the box and making decisions for users and avoiding options, right? So the power of good defaults is very important to Gutenberg as well. And also by bundling advanced layout options, is there, yeah? I don't know what to do about that. Move it up a little bit. Move it up a little bit. Well, if it turns off, okay. Let's hope it continues to work. Yes, so it also comes with advanced layout options. So there's a column block, for example, that allows you to create columns in various aspects. Also, the concept of nested blocks where you can put content within other content blocks, which is really powerful and can be leveraged by, you know, all developers who are building websites for their clients as well. So with all this, the idea is to make authoring content with WordPress accessible to everyone, right? And so Gutenberg approaches that vision with a few key concepts. We talked about blocks, right? So the base principle of Gutenberg is everything is a block. You know, a piece of text, a quote, galleries, images, short codes, everything is called a block. Even chunks of custom HTML that you integrate, no matter if it's added by a plugin or if it's provided by core, everything is a block. And you use these blocks to compose your posts and pages. So the benefit is that you only have to learn and master a single interface, the block interface, and then you know how to do pretty much everything else just with that. All blocks are created equal. So they all live in the same add menu interface. And we use recency, search, a list of groupings as well to ensure that blocks used the most, blocks that are used most often are easily within reach. So it's that. And then you also have keyboard shortcuts that allow you to insert blocks really easily and really fast. There's a lot of power user tools as well that are baked into Gutenberg that help with content creation. For the first time, placeholders are front and center in creating content with WordPress. So if you have a custom block, for example, or in this case like the image block, if that block can have a neutral placeholder state, it definitely should. A placeholder block kind of shows a button in this case, for example, to open the media library. A text placeholder block shows a writing prompt, like, for example, in the quote block. And embracing placeholders through that, we can predefine editable layouts. This is a concept that I'm going to speak on a little bit more later on, which is a really powerful tool for agencies to create websites that, yeah, users can manipulate but not upend the design and make it all look weird. Yeah, for users, they just have to fill in the blanks. It's really easy and a really powerful tool. With a block technology, it also optimizes for the user experience of manipulating content directly on the page. So you get, like, immediate feedback to what you're doing. It's a very short step away from, like, front-end editing, if you think about it. And so, plugin and theme authors will have also an ability to use the different tools that Core will provide to kind of create their own tailored and specific blocks that gives users a true what you see is what you get experience and environment for creating on the web. Yeah, I think we kind of have that to a degree in the current editor with previews for, like, embeds, for example. But, like, the true power of Gutenberg here is really, like, the immediate feedback when you, like, change the presets, right? Customization is another piece, what previously, you know, required using complicated markup and shielding users from breaking it. I think a lot of folks here have been there. Mostly through short codes and metafields, for example, now becomes a lot easier and intuitive, right? And with blocks, developers are able to provide, like, you know, theme specific blocks, for example, to, you know, directly render a portion of a layout so you can define which kind of blocks you want for a page layout to come together. For example, like three-column grid of features, for example. And it clearly specifies what can directly be edited by the user. And I'm going to have a screenshot for that later on as well. Yeah. So where is Gutenberg today? When it was last year at the state of the word to 2017, it was announced that 5.0, the, yeah, the major version of WordPress that Gutenberg is supposed to be released in April. And then at work in Europe, we're hoping to be able to release it in September. And it's September now, and it's not there yet. So right now, I think a lot of polishing has taken place, a lot of tightening up on APIs, right? So me personally, I worked on a lot of the PHP APIs to kind of provide backwards compatibility in terms of API language, right? For developers to understand or to query whether there is a block on the page or not and how to style them or not. Just to provide backwards compatibility with existing PHP APIs. But also bringing it up to date with features that exist in the current post editor and making sure that, you know, that transition is seamless. Yeah. So I don't know when it's going to be released. I talked to a Gary Panagast, and he couldn't give me a specific date either. But I'm pretty certain that it will be released before WorkCampUS this year, which is in early December. So in the next couple of months, which should give the team plenty of time to do a beta release and a release candidate phase to polish out the latest bugs and inconsistencies and get it into the hands of users. Speaking of getting it into the hands of users, in 4.9.8, there was a dashboard prompt introduced to WorkPress. And thanks to that, the installation count, like the active installs of Gutenberg plugins have skyrocketed. And they're close to half a million websites now that use WorkPress. And hundreds of thousands of posts have been created with Gutenberg. And also, yeah, just through that, the team has gotten a tremendous amount of feedback and was able to, you know, improve the experience for everyone there as well. So that was a success. And yeah, I'm just waiting for the merge proposal. Like everyone else, I guess. I want to do a quick demo. Demo is always fun, I thought. And I want to show you a little bit about the latest features that were introduced in the last couple of weeks. And I also want to introduce you to a really useful website that you can use to, let me see. There you go. You used to check out Gutenberg. So if you go to WorkPress.org, you see a front-end version of Gutenberg. And I mentioned earlier how close it is to front-end editing. And this really goes to show how short of a step it can be in the future to make content editable on the front-end by, you know, adding pieces of Gutenberg, like the meta bar on top. So I mentioned the edit-add-block interface, which is in the top left. There's plenty of ways to add new blocks to your posts. So give me a sec. So with the forward slash, for example, you can just, like, search for certain blocks and introduce them just like that. And I mentioned the placeholder concept. It really allows users to understand what's happening with their content, right, and where it's going to go once you fill out these placeholders. We have on the right-hand side, meta information about each block, which also changes with, you know, each block that you select. And so as a developer, when you create custom blocks, you can really, you know, dive in and create custom experiences with every content type that you create for your users. A lot of shortcuts, like, you know, text sizes that are easily changeable for users, a more fine-grained approach here, as well as we saw in the slides with the columns, for example, that you can just, you know, change and you get immediate feedback from the preview here. Yeah. One of the newer features that were just introduced is the spotlight mode, which I love, right? Like, everything just becomes gray and, like, yeah, it's into the background, really. You can focus on one specific block that you're just editing right now. You can really, like, dive into that. Another thing that is hard to see here in this example because we're outside of the WordPress admin is the full-screen mode, which in this case, it just, like, hides the admin bar on top, right? But, like, within the WordPress admin, like, it hides all the menus on the side and it really, like, lets you focus on the content creation process. Something that has been introduced to the existing editor as well a long time ago. And so it kind of is, you know, brought up to that existing standard. And if you don't like the inline toolbar, that is, yeah, inline with every content block that you create, you can also have that set on top. It's kind of like the unified toolbar with all the editing options, you know, that you kind of know from your Microsoft Word or the existing editor as well. One thing that I find really, really handy is creating, give me a sec, is creating reusable blocks, which is something, any block that you configure, you can give it a name. As in this case, it's just a text three, for example. And this block is going to be saved as part of the block interface. So now you will find it at the reusable block sections, text three. And you can reuse those in any post and in every page that you have. And so you can also, whenever you make changes to that block, it will propagate to, you know, any instance that that block is used. Which is really handy for, like, you know, if you think of, I don't know, like an author bio, for example, that you want to add to every post, right? Like, that's something you can configure once and reuse over and over and over again. And in the latest release, they also added a function where reusable blocks, oh, okay, that's in the admin, never mind, where you can manage reusable blocks and kind of export and import reusable blocks as well. That's going to be the next step, which is really, really powerful because now you're able to, like, share your blocks that you have on your sites. And so it's just, like, it just goes to show what is, you know, possible there in terms of the next steps. Yeah. Reusable blocks, layout blocks is also something that, yeah, it just, you know, gives you that many opportunities and so much more possibilities to create content than the existing editor does. Anything that I'm missing on the, that I should show, that I haven't shown? No? Yeah. Yes, thank you. That is actually something that I was planning on showing, yes. So you still have a code editor. And that, let me just increase that. And that shows you what the markup looks like. And as you can see, like, all the meta information that Gutenberg is using is all bundled in HTML comments. So you can just copy and paste that, you know, chunk of code into a regular website and it will show up fine, maybe without styles if you have not included the style sheet. But it will work out fine in terms of markup because it uses just plain HTML to save that content. Yeah. Yeah. Right. It's part of the markup as well. Yeah. It's compatible with the latest HTML version. Yeah. So the question was sometimes there's unexpected behavior or unexpected results happening when you switch between the text editor and the preview, right? Yeah. Yeah. So like adding line breaks. It's something that, as far as I remember, that was a problem in the past, like in the early days of JavaScript. Yeah. Since everything goes through JavaScript anyway, it's pretty easy to catch these things and prevent them from happening in Gutenberg, which is a lot easier than in tiny MCE. Yeah. Yeah. Are usable blocks reusable for every user? Yes, they are. So they are on a site basis. Anyone who can edit posts has that capability and can use those. Yes, him and her. Yes. So the question is, is it possible to import existing templates from other plugins or like page billers, is that correct? Yeah. As far as I know, not at this time. I think it really comes down to the page billers making that available as well. The difference between a lot of these plugins and Gutenberg is that Gutenberg really just uses HTML and this comment markup that I just showed you, while most of these plugins use MetaFields and just a different structure, like a different data structure and so that would have to be combined. That was the lady, yeah. So the question, I think I'm I broke it. Okay, nope. Okay, this is better. I'm sorry, so the question was responsive, yes. So ideally it should be, definitely it's responsive, as you can see here. I can readjust the page and it is responsive. So the editor itself is responsive but the themes still have to provide the styles on the frontend to make it as responsive as in the editor. Does that answer your question? Right. The theme would have to add styles for that, yes. And we had questions over there. Yeah. That's a great question. I'm going to talk about accessibility and specifically color accessibility. So out of the box, out of the out of the hello, no. Get that microphone. I'm going to talk into the video microphone. All right, so out of the box it is double A or triple A compatible. So the WordPress accessibility team has been working with the Gutenberg team on that as well. But you are able, as a user, able to circumvent that a little bit. For example, let's use this one. It's like color settings and you can set a background and you can set a text color and that is definitely not accessible in terms of color. It is definitely something that users can still manipulate to a compatible. I'm so close. I'm so close to making this work. Oh! I can just hold it. I can just hold it like this. So here's what I'm going to do. I'm going to go back into my presentation because I'm still owing you the one question and then back into the presentation I still owe you my outlook for tomorrow. And then there's still more time for questions. Gentlemen, is there a way for certain user roles to only add a specific blocks? That is a great question that I don't know the answer to. It is technically of course possible, I would assume. But I don't know if that is currently the case. Do you know the answer to that, Alex? No. I'm sorry, Alex. I'm going to have to ask you to ask that question later during the Q&A phase because I really want to talk about the future and what's next? What do you think of that? Okay, yeah. Let's do that, though. Let's do that. Oh, no. Now I'm good. Now that I figured out how it works. Alright. Tomorrow! Next up. So I talked a little bit about predefined layouts, right? That users can where it's just a set of placeholders that users then can fill in. So one of the, and this is a terrible slide and I apologize in advance. So yeah, it's really hard to see, especially on this screen. So what is supposed to show you is a selection flow for page layouts, right, that are predefined and that will look like this, for example, which is much better to see. And you have like image placeholders and then you have like a header placeholder and so as developers you're able to predefine these kinds of page layouts and have folks just fill in the information that they need. Really, really easy and pretty straightforward and no one is lost. So I'm very excited about that. That kind of like the next step of what Gutenberg is already capable of doing but needs more development currently. One of the things that I'm constantly being asked about at WorkCamps is how the introduction of blocks and giving users more freedoms in terms of like how to create pages and posts is business opportunities and the impact on the theming market and especially for people who earn their living with WordPress, like how does that affect them? And a lot of them see Gutenberg as a threat to their business model. And my response to that is always yes and but also look at the opportunities that come with Gutenberg. I don't think that since the introduction of the concept of themes and plugins something as fundamental a change as fundamental as that has occurred in WordPress and also something that if you get on board now and learn about Gutenberg and understand how it works and be able to develop for it and build with it gives you that much more of an edge over your competitors in the market as well. My friend Eric Debalak he spoke at WorkCamp Orange County this year he did like my first block kind of intro talk and his company created a website called WPBlock.party where they great name block party where they sell licenses for custom blocks that they created and that's just exactly what I think the future is for Gutenberg blocks is selling custom blocks because the demand for that will be incredible and I feel like block plugins are the future of WordPress and I'm very excited about that so if you are looking for an edge something new where you have an advantage over your competitors is look into creating custom blocks and how you can market those to WordPress users. Once Gutenberg is in core right, what's next like where do we go from there there is a phase two already in planning which takes Gutenberg and the block based concept from like the post and page editing to site customization right so you're kind of replacing the existing customizer and I talked to Gary like I said and I asked him like when he thought that Gutenberg phase two is going to be available and is going to land and he was pretty solid on 2019 which I found optimistic but he made some very good points he said that nested blocks that are currently already in Gutenberg were a stretch goal for version one but definitely something that was essential for version two and we already have that basic components don't need to be recreated the data layer is already there design is already there APIs exist so a lot of the groundwork has already been done and can be built upon also he said the customizer code is not as much legacy code as the editor was and so it's going to be a lot easier with the compatibility and using those well-defined APIs that they have to make it a lot easier for existing plugins and themes to convert so that's what has me very excited about Gutenberg it's really the next step in being able to use blocks to create entire pages entire websites and not just finally themes themes are going to experience a lot of changes going forward I talked to Mack Rommel last night at the speaker dinner about exactly that how themes traditionally not only supplied styles for layouts but also markup right and they kind of decided where certain content would go specifically sitebars and like post content and maybe a footer and you would have I don't know a hero image at the top but they won't do that going forward right like once phase two lands and site customization is based on blocks like the entire markup is going to come from WordPress and so themes are kind of not necessarily limited but can focus on styles and how to really present these blocks and another challenge will be styling blocks for varying contexts so you can have a recent post widget block right that traditionally shows up in the site bar or you know if a theme has like a footer site bar it might show up in the footer but the theme doesn't know going forward where it's going to show up, it can show up anywhere it can show up you know as the first item on the page over the main site title for example and so like styling that for different contexts is going to be a challenge going forward to see how you know theme developers deal with that and also with what way WordPress comes up to like make that easier right is there going to be like a footer block that doesn't really have any visual thing like something you can see but just like serves as a context giving element I don't know but things like that are going to be very exciting for theme developers going forward finally I'm going to close before we go into Q&A with asking you to get involved right a lot of contributors from all parts of WordPress have been working on Gutenberg so far a lot of developers, designers a lot of designers testers especially now that Gutenberg is installed on half a million sites and you can be part of that right if you want to learn more about Gutenberg I encourage you to go back to WordPress.org slash Gutenberg the site that I just showed you it's really easy to just test Gutenberg and kind of you know use it as a sandbox and playground it gets updated automatically so you don't have to worry about that there's also documentation I would probably encourage you to just Google WordPress Gutenberg documentation then remembering that link but get the plugin in the plugin directory or from the comfort of your WordPress admin just search for Gutenberg it also should be the first featured plugin on that screen as well run tests there's a whole website based on around WordPress testing and then very important help with issues report bugs on github.com slash WordPress slash Gutenberg and if you really want to help out join the conversation in Slack they meet every Wednesday at 10 a.m. Pacific in the core editor channel that's where you really it's probably the easiest way to get involved like ask questions and offer to help or do something like I just did give a talk hosted me a discussion around Gutenberg and learn and share knowledge that way and now Alex I'm ready for your question um so the question was what's the vision around portability of Gutenberg also to other CMSs so that is actually a question that I don't have too much I can't give an answer with too much authority on so obviously it's possible to port Gutenberg however Gutenberg is written for WordPress right like a lot of the data structures that is based upon are definitely very WordPress heavy and it expects a lot of like the existence of like post-meto for example right I would I would welcome if Gutenberg would continue to be developed as a separate plugin outside of WordPress or as a separate project outside of WordPress so that it is reusable by other people and other projects but I don't know if that is going to be the way forward traditionally it has not been right so that makes me kind of worried but it's entirely possible with a project of that size and the amount of work that has gone into it that is something that they would want to do yes the lady in the back yep right so the question is how are we going to go into support sites that don't want to adopt the Gutenberg paradigm so for now it's pretty easy in terms of like the 5.0 release using the classic editor plugin right to avoid that going forward that's probably something that it's going to be harder to do depending on whether the site is an active site or like a site that doesn't receive new content anymore I would recommend just going with the classic editor plugin for the time being and if it's a site that does have active content creation it is worth exploring ways to Gutenberg fight also existing posts don't necessarily have to conform to Gutenberg right if you don't change them you can just stay the way they are and it's more about like a workflow issue with Gutenberg with new posts yes first row what happens to plugins that you have on your site is it up to their developers to be Gutenberg compatible yes it is and we've seen actually quite a lot of the more popular plugins in terms of like getting ready for Gutenberg like Yoast SEO for example is pretty far along WooCommerce they have entire teams working on getting ready for Gutenberg and being block based right and there's also some very exciting possibilities opening up there as well being a block based system so it's definitely something that developers have to prepare their plugins for if it's something that manipulates content yes in the back generally with the glasses yes yeah so two questions first was wait so the first plugin the first question was markdown markdown support yes I honestly don't know I would be surprised if there was markdown support and if there is not I'm sure there will be a plugin that would add that and in terms of like a plugin being able to take down your site Natalie McLeese has created a fantastic plugin for that that helps you prevent that right there you go it helps you troubleshoot it so I think as soon as long as there is going to be PHP running on worker sites and it looks like it's going to be for a while that is always a possibility right but there are remedies for at least troubleshooting that and fixing that and preventing like white screen of deaths but not within Gutenberg necessarily yes so are there plugins being developed that make it easier to transition to Gutenberg can I ask like what specifically you are concerned about because I mean like I said if you're not touching I'm getting a lot of old posts and and part of the issue is that Gutenberg is moving target so some of the people are ready until they feel like their base is more developed and so I'm worried that by point I was going to push it out a little bit pretty early so I think the first step would be having database plugins that aren't available for a more conservative approach there definitely I would recommend going with the classic editor plugin for now and then wait until you feel like the plugins that you use are Gutenberg ready and then make the switch I'm not sure there's a whole lot of steps to take in terms of like getting ready for Gutenberg other than like schooling or like educating your users in terms of how to use it and what changes in terms of like how to create content if that makes sense and the technical point of view I think it's pretty easy to make a on off switch between like the classic and the Gutenberg editor but I mean it is definitely an issue currently that plugins will not be ready out of the gate but as I said that is something that the Gutenberg team has been working on extensively in terms and talked about with plugin developers as well and try to educate people about plugins ready for Gutenberg yes let's go over there Is there an indication of whether or not a plugin is Gutenberg ready? Is there an indication for plugins being Gutenberg ready? So right now there is not an indicator like supported by the plugin directory per se that says okay we classified that plugin as Gutenberg ready it is more or less an honor system than the ones in WordPress so I would encourage to either look for a plugin description saying we are Gutenberg ready or reach out to the authors in the support forums most of them are pretty responsive and can answer those questions yes Oh that's an interesting question so the question was for larger sites is it possible to have Gutenberg active on a per user basis not out of the box but I mean that is definitely something that technically should be possible that is really interesting I have not come across that so like I said not out of the box it would be something you would have to probably write yourself yeah that's a cool idea that's a good idea maybe I'm going to write that yes gentlemen over there I'm sorry could you speak up is it going to affect the speed of the website oh the speed right so the question was is it going to affect the website's performance it should not because the content that is being displayed on the front end is saved in the same way that it is saved currently and displayed in the same way that it is displayed currently so it should make a difference yes lady so the question was can you use Gutenberg for future posts and pages and keep the existing ones in the Classic Editor so I'm not entirely sure what the plan is for one Gutenberg is in core but currently you can do both you can open posts with the Classic Editor I would assume that it will continue though to be the case with the Classic Editor plugin that is a good question I honestly don't know the answer to that because it comes down to having that link around and the code for the Classic Editor to be able to do that yeah that could be an option yeah the Classic Editor block where it's just like an editor in the editor so at the time let's say you have a whole bunch of when you go into Gutenberg comment format does it occur at the time you open one of those pages or only at the time you write it out so my knowledge is the question was when does the existing content be converted into a Gutenberg post to my knowledge is when you open the edit screen for that yeah I mean you have the option of not saving it of course right and as far as I know it also uses that existing editor block to keep it within one piece of content so that's a great wage exactly yeah yes will short codes still be a thing or are there will short codes still be a thing no there will be blocks so it's just going to be like any other piece of content yeah exactly the lady in front is 4.x going to continue to be attached or is that tolerable yes so the question is how long will that branch be supported and if so for how long for the foreseeable future so I can't really say how long that branch is going to be supported but as a reference we currently still port back security updates to 3.7 which is I think 13 releases ago like 13 major releases ago and I think 3.7 is at 3.7 or something like as the version number so I don't see that changing anytime soon even with Gutenberg in core it may be limited to security updates though John in the back is there any standardization for markup wrappers around blocks for themes to play with or to work with rather so I think the CSS classes have a standard way of being composed right so you should be able to write styles based on the CSS classes for each block but that's going to be a challenge going forward as well especially when you count in custom blocks from developers and plugins also quick PSA please don't when you create blocks and write blocks please don't bundle them with your themes always have them in the plugin so that they're not your content is not lost when you deactivate the theme always have that in a plugin yes in the code editor can you harm the underlying code blocks if you manipulate the HTML comments that have the data in it you absolutely can I think Gutenberg is pretty good about recognizing that though and just reverting back to a custom HTML block for that do I have still more time I'm out of time I'm pretty tall you'll find me around just ask me questions later and enjoy your lunch thank you