 All right, so this is a talk on Gutenberg. I'm Brandon. And let's get talking about Gutenberg. So what is Gutenberg? Gutenberg is first and foremost an idea. It's treating our content as a composition of blocks. And what I mean by blocks, I mean, you can think of certain building blocks you've had as a child and built things. It's similar to that concept. Here's a wireframe that shows a paragraph block followed by a gallery block, followed by a quote block, followed by another paragraph block. And this is what I mean by blocks. Here's a view of those same block types in an editor. Hopefully, that's somewhat readable. Mostly, the point is to get the shape of things. So we have a paragraph followed by a gallery and so on. And here is the result rendered for readers with the same blocks. So today our content in WordPress is divided or is expressed by special cases. So first, we have media, which is used for images and other approved assets. Then we have embeds, which refer to external content and allow us to include external content, excuse me. And we have short codes. And if you're not familiar with short codes, they're another way to insert content, insert special content into your content. So for example, in WordPress Core, there is a playlist short code where you'd express the word playlist in square brackets. You just type it out. And then you would type an IDs parameter. And you have to find IDs of the things you want in your playlist, like audio clips. And then you would specify those IDs. You're typing all that out. And that's how that works. You also, a lot of plug-ins will use those as ways to make available additional special kinds of content that you can insert. Then we have featured images, which allow us to select images to be featured. We have excerpts, which allow us to provide a summary for a post that's displayed in multiple places. And then widgets, which are used for expressing content that falls kind of outside the post or your page, the page content. So this would be like your sidebar or your footer and so on. These are all different languages. These are all different ways of different things we have to think about when we're expressing our content, that, oh, we need something that's involved and delivered via short code. So we have to think about what that short code is. We have to think of what it's named, what its arguments are, these sorts of things, and that's troublesome or can be. And all those different ways are different ways of thinking. What if we could use a single language? What if we could unify all of these languages into one, a language of blocks? So me, that sounds pretty good already, but why does that, why does it matter? The first reason is the general topic of focus. So focus as a writer, actually, could we move that? Focus as a writer. So if we simply use blocks, we can reduce the number of times we have to kind of change our mode of thinking around, I need this kind of content. Oh yeah, I have to go over here and I have to change this or I have to go look up something and make sure I'm providing the right thing. Or if I want to do something completely custom, using custom HTML, that's also a different mode of thinking than if I'm just writing able to write smoothly in a rich editor. And so all of that has a tax, is a tax we pay on our focus. So the idea is that if we can use blocks, if we can use a single way of thinking, or at least a single entry point, into how we express our content, then we'll be able to maintain our focus as writers better. Additionally, blocks help us say what we mean. The ideal is that we will provide meaningful blocks that don't require so much thinking to grab. We say, I need this kind of thing. I'm just going to go grab this block and I'm going to put it in my content and fill it out. Meaning also gives us some additional benefits. So since blocks will ideally, and we can make this happen, explicitly reflect the type of content we're creating. It's better for maintenance because you're co-authors and also maybe your future self six months down the ray or even maybe a month away won't necessarily go back to some custom HTML that you wrote and wonder, I felt really clever when I did this the first time, but why did I do it this way? I don't remember, or it just doesn't have, once you've forgotten, it doesn't have inherent meaning. HTML has some meaning, but it doesn't have as much meaning as we can provide at the granularity of blocks. So blocks are the idea. That's the main idea behind Gutenberg is pretty simple. So where is Gutenberg today? The community has been developing an editor. So bringing first the idea of blocks into the editor. It's a good first step. And before we talk about more, I'll do a review of available block types. I'm slightly hoping I can get away with a cheat, which is I'm kind of going to be listing things here, but I want to talk about them. So the first blocks we have are for document structure. The first is heading, which defines the document outline. It's your H1, H2, H3 that actually define your semantics of your document and the outline. Then we have a subhead block, which I believe is made more for a replacement for the excerpt that will actually allow us to specify a summary or sort of a deeper subheading for our document. Then we have our text blocks. The paragraph block is actually very foundational to Gutenberg. We start with a paragraph block. We create things, and often our next block will be a paragraph block. Then we have lists, which are textual lists, unordered lists like you have in HTML. We have quotes for attributed quotes. So you can offer a quote and say who it came from. It offers a number of styles. We have pull quotes, which allow us to take quotes out of our articles and sort of entice potential readers with them. And then the verse block, which I was very glad to see that there. We talk a lot about code as poetry, and it is. And poetry is also poetry, and it's nice to be able to write it in WordPress in a block. Here's an example of the verse block. And it's basically, it's similar currently. It's similar to a paragraph, but allows you, has different interactions. So when you hit Enter, it doesn't necessarily go to a different paragraph. It will allow you to write verse a little more cleanly. Next, we have the graphical blocks. We have a block for a single image. We have a block for expressing the meaning of a cover image. So when we use that block, we're providing the additional meaning that this is a cover image for our article. Then we have the gallery, which allows us to select. This is sort of a portal into WordPress media. It allows us to upload or use things that are already in the media, in WordPress media, to display a gallery. And it will automatically lay out the gallery in a nice way. And here's an example of the cover image. Cover image also supports a caption. All right, next we have media blocks. Media blocks offer audio, video, embeds. There are so many embeds. I started looking through the blocks. And I believe my vague memory is that there are 20 different sites that are explicitly supported. And then there's also a generic embed block, which allows you to specify external resources from any site. Here's an example of the YouTube embed block. Let's bring WordCamp US to Phoenix. And then we have formatting and layout. So things you'd expect, like pre-formatted text. You can express as a block. You can express code as a block, text columns, so just multiple columns of text, and tables. And here's an example of the table block in the Gutenberg editor. And finally, we have supporting blocks. So we have a custom HTML block for the times where, despite our desires to have blocks that have meaning for all of our content, occasionally you find that that's not the case. We can provide custom HTML for those. We can also use classic block, which is kind of like a version of the classic editor in a block form. I don't, in my experience, I'm not sure it's one to one between the classic editor and the classic block, but it's very much like that. And it's a tiny, if you know under the covers, WordPress that uses tiny MCE as a rich editor. And that's what classic block has. Then we have a separator block and also a read more block that will allow you to take maybe a more brief portion of your article and divide it and separate it from a portion of your article that has maybe more details than you think most people would like. But you'd really like to make them available for those who are interested. It allows you to click that link, and then those details will be shown for the interested parties. Here's an example of the custom HTML block, as is. I think the thing I'm most excited about these kinds of blocks is right now, this isn't syntax highlighted. We could make some improvements, but people are actively making PRs and that sort of thing for improving this, for making this a syntax highlighted experience that we're used to seeing when we use other HTML editors. So these are just some of our building blocks. Hopefully that gives you a good idea of what's available. Now when we're writing with Gutenberg, we basically insert, edit, move, and remove blocks. We're just working with blocks. And the sum of that, the result, isn't stored another place than we normally store our post content. It goes to the same place we store our post content today, and it's saved as valid HTML. So even if Gutenberg does not load the content that we're saving, it's valid HTML that can be read by a browser. For people adopting Gutenberg, if you open a post that you've previously authored with the classic editor and with the Gutenberg editor, the pre-existing post is converted. It's currently converted into a single large classic block. And I think maybe we'll explore making that more granular in the future, but that I believe is how it works today. I'm sorry, I didn't understand. That is also true, that there is a classic editor plug-in that you can install so that when Gutenberg is a first class part of WordPress that you can express by installing this plug-in when you want to edit posts, you want to edit by default in the classic editor. That's right, thank you. So let's talk about some feature highlights. These are simply features that I personally have worked with and find interesting. The first is autocomplete. This, in practice, this is an autocompleter. So when you're in a paragraph block and type a forward slash right away, you get the opportunity to start autocompleting blocks right there. So this made me feel immediately better when I was in the editor experience writing myself that I'm not just stuck and have to go use a mouse and select the right block. I can continue keeping my hands on the keyboard and select the block I want. The more you type, the more this is narrowed down. So these are just the first 10 options as you type, you get the next 10 that are narrowed down and so on. And once you hit enter, it'll actually replace the current paragraph block with the block you selected. And there's a lot of work being done around accessibility both to make that more accessible for people who need it, and then also, at least personally, I really like keeping my hands on the keyboard as much as possible. And I'm very interested in helping out with that part of the editor. Here's another, this is a really, really cool feature. It is the ability to use to create a block and then save it to be reusable throughout your site. So in this case, we've added a quote block, and then we're converting it to a reusable block, if you can see there's a convert to reusable block menu item there. Once that's done, you can actually insert it in other places. You can insert it multiple times in your own article. Maybe there are some things that actually do bear repeating in the same post, and you could use that as a way to do that repetition, and then you can insert things in new posts. So here's how you would select that reusable block, and here's how it looks once it's inserted. Another feature that I think is really cool that harnesses some of the meaning we have with blocks is that we have an outline of an article here, and it's defined by the heading blocks in the article. And you can actually navigate via these. So if you had a very large content, you can select your headings and navigate to exactly the section you want to be in, or at least in the neighborhood of where you want to edit, and that, I think, will come in very handy for some people. So those are just some of the features. I'm sure there's probably plenty I've missed, but these are some things that stood out to me, and I decided to share those. So where's the community taking Gutenberg? We have the editor. The editor is being developed. What next? Our first step is to get the editor to a place where we believe it's a minimum viable product for becoming a first step for a block-based editor in WordPress. I have a link to this in my references, but that's currently being tracked on GitHub. The tech lead for Gutenberg has created an issue with listing the things that he believes we need to get done first, and it'd be good to follow along if you're interested. I actually haven't been able to read all the things there, but it looks like we're pretty, there are many, many more things that were done on that list than things that weren't, so that was nice to see. The next step would be merge proposal. So someone will need to make a proposal to merge Gutenberg into WordPress 5.0, and then finally it'd be actually doing the work of merging it into WordPress 5.0 and getting community feedback along the way. The next steps after WordPress 5.0 is to follow with using blocks for full site customization. So blocks don't just apply to your post content. Blocks could apply to your entire site layout, like your sidebars, your footers, your headings. Anything you have that defines your regular site layout, we can model that with blocks, and we've been exploring foundations for how to make that real. Now, the following, what I'm going to show you next are prototypes. They may have no bearing on the final or may not, the final product for this may not resemble these prototypes, but here's what we've been working on. So the contrast here isn't great, but this is a page showing, imagining how we could go to a page and select an overall page layout. That sounds, I really like the idea of being able to visually see these different page layouts and choosing one and then being able to go forward here and have placeholders for blocks where we can just start filling them in. And it doesn't necessarily take as much of a mental load, at least for me, if I have a particular layout in mind, but then my mind gets set on maybe a particular subsection of what I'm creating, I might not always remember about, oh, what was I going to do over here? So I really like the idea of having a placeholder, like on the top here, we have a featured image placeholder, and it would remind me to say, hey, select a placeholder image. And here's a shot of that after the placeholder image is selected. I'm sorry, could you repeat that? I couldn't quite hear you. I actually don't know what that is to be honest. So I don't believe so is my answer. This would be more, we're iterating or riffing on the idea of how we would do site customization. So WordPress has the customizer right now. And so what would that look like when we can use blocks? I think is the bigger question that we're asking right now. That helps. Sure. Thank you. All right, so next let's talk about outcomes and then some opportunity. So the outcomes are sort of a more of a before and after imagining of how WordPress will work or things that might change about WordPress after Gutenberg is merged. So short codes, which we talked about earlier, I would argue it's a better user experience if we can replace those short codes with blocks. And so that's the ideal option. But there is a short code block available. And I believe we still like to provide backward compatibility for those who rely on short codes, which is in my perception and experience in the community is many, many people. So that's the story of short codes that would be better to replace them with blocks that give you a better, more resilient user experience. But you can still use short codes if that's what you need to do. Now for themes, I've perceived that there's been some worry about, well, what does Gutenberg mean for my theme? Existing themes will continue to work. So existing themes will continue to work. And then if you want to target Gutenberg, there are Gutenberg features you can leverage. For example, you can specify theme colors that appear in the editor when you're sort of a highlighted set of theme colors that you can choose from when you're setting colors via the editor. You can specify styles for the editor, which would say if a theme renders a particular block a different way in a really creative way, maybe you want to change how that block is edited in the editor so you'd want to restyle that with CSS so it looks a lot like what you're going to see on the front end. And themes will be able to add editor styles in that way. Themes can also add fonts. And then I think another feature that we've seen demoed with blocks often are wide images and ability to take an image and say, hey, I want this to be full left to right wide image. And that's another feature that's explicitly supported by Gutenberg, and I'm sure there will be more. So post formats. So post formats, my understanding of post formats is that post formats exist to allow us to give WordPress some hints about the nature of our content that we're writing so that when they're styled on the front end for readers, we'll be able to style those in a better way because we know what kind of content it is. The idea is that expressive blocks, just providing blocks with really expressive capabilities, will allow us to explicitly say what we want and reduce our need for post formats. But we currently are continuing with post formats for backwards compatibility. For metaboxes, metaboxes are for those who aren't familiar, and I'm actually currently just getting more familiar with these, metaboxes are a way to allow you to specify additional information about your posts and a way to allow the writer to express those things, and then you can leverage those on the front end when you're rendering your posts for readers. Now, Gutenberg supports, or does provide support for metaboxes, but metaboxes, there are some metaboxes that are not self-contained that depend on the structure of the current editor, like maybe they're doing lookups in the DOM, in the HTML, the document hierarchy, doing lookups and finding things outside of their own box. Those things, Gutenberg can break those things because the surrounding editor for metaboxes won't be the same, so metaboxes that are not self-contained can break. So if you have self-contained metaboxes, my understanding is that you will be able to continue using these, but if you have some that aren't and you have incompatibilities, you can actually explicitly mark them as incompatible when they're added, and Gutenberg will notice that they're there and take action to just load the classic editor so you don't end up in a broken space. Then we have widgets. So widgets are, again, widgets are used to express surrounding content, like our sidebars, our footers, and that sort of thing. The vision is that widgets will eventually be replaced by blocks, so we don't have, we eliminate this, we don't have to think in another term in terms of some other structure to express content in certain places in our site, we can just express blocks where we were expressing widgets. The same goes for menus. The idea is that menus will also eventually become blocks instead of being their own special thing. So around Gutenberg, there are some opportunities we have, and these are from my limited imagination. I'm sure there are way more opportunities around this that others could think of. But the first is, probably the most direct one, is custom blocks. We, there will be a place for custom blocks, for special case things that aren't supported directly by core, and maybe don't want to be. And there will be the ability to add plugins and package your own blocks. Also, as I mentioned before, themes that leverage Gutenberg features are an opportunity. Now for the third point here, for improving experiences for agencies and customers, there's some other features that are being developed right now for being able to specify, kind of hinted at it, looking at the prototypes, but page layouts, and layouts where you can specify a set of blocks, and you can lock those down, so either maybe you could lock down the blocks that are present, and those blocks could be moved around by the people editing, or you could lock those down entirely, and so you have to keep the blocks you have, and are able to just have people say, fill in this content, and don't make changes to this, and that might provide a little more control, and it does provide more control, and maybe help set expectations for what agencies can expect from their customers, and what customers can expect when they come and try to use what's been created as a layout. A really interesting thing for me is how finding new ways to leverage the meaning of blocks. I know there's some work going on to see what this means from a search engine optimization perspective. If you can actually look at a page and know more about that page and what's there, that can provide more information for search engine optimization, and there are ways maybe if you're looking at your articles in maybe a collection of articles, there are ways you could identify articles or types of articles just by what kinds of blocks they have in them, referring to your imagination, because that's what I have today, but then also around that is education, so both in using Gutenberg and also just education around how to leverage it as a developer. So if this interests you, and it interests me, how can we help? So for contributing, here's some ways we can contribute. We can install the Gutenberg plugin, we can get involved with testing it and filing issues on the Gutenberg GitHub project. We could even test the latest that's in Git. You can get into daily testing if you'd like. You can participate in design discussions around the design of Gutenberg and the user experience. You can get involved in development. There are plenty of, you know, we're moving fast with Gutenberg, but there are plenty of bugs to fix. There are plenty of issues to work on, new things to create. And internationalization here is another opportunity, but I'm not sure how ready that is right now. I'm just not certain, but eventually there will be an opportunity for people who want to help translating various bits of text that are used in Gutenberg. And then just providing Gutenberg support. So answering others' questions is a great way to learn. So you can help out on WordPress support forums and you can also look at questions that are added in GitHub and take a look and try to answer those yourself and make the experience better for others and yourself. Here's some resources. This isn't meant to just be read here. This is more just to be available for people who want to look at the slides later. But there's a great, there's a good, already a good Gutenberg handbook on WordPress.org. Gutenberg developments on GitHub. We have, I have a link to the minimum viable product issue on Guten, on GitHub. So you can look at that for some good examples. A Gutenberg starter theme that's starting to explore how themes can best leverage Gutenberg features. And then the last, the last one is just a good article about someone's experience styling themes for Gutenberg. So thank you so much for coming to my talk. And this, these, this is where you can find the slides. And I hope that's useful to you. And are there any questions? You're asking if the theme, yeah, that those are all links. Yeah. Yeah, I should have clarified that. Thank you. Oh, I, I thought I did. There was, so, so how, how, how would it allow you to be responsive on mobile or just for, I don't know for a fact about what, as far as for the default styles for Gutenberg. I'm, I'm guessing my belief is that we're making a best effort to have, you know, reasonable simple default responsive styles. But I think that would depend a lot on your theme. And so hopefully we, themes would be able to take the meaning that are added, the meaning that's added by blocks and make, make decisions about how you want to adjust for mobile. I'm sorry. I don't know if it's me, but I can't, I didn't hear you. Okay. So the question is, do, does it have a built in sort of column and row, row structure? That's my, in my understanding that's currently being built, there's nesting, block nesting, which I was thinking about showing, but last time I tried it, it was, it wasn't quite working right for me. So I decided to omit it from this talk, but there is block nesting that's going on. And you can, I think the first experimental way is breaking your, breaking your post up into columns. And I think, I think it's inherently row based already, but if you can break your post up into columns that then can nest other blocks, I think we're starting to get there. So I think there's an eye to that, but we're, I think, I think it's still in progress. Maybe even the next Gutenberg point release, actually. Any other questions? Sure. Okay. Sure. Okay. So I believe the question, and I'm going to try to summarize, because I didn't track all those things, but, or all the specific examples, but is it, is it going to be similar to a lot of the current visual page builders in all for this? So I, I personally am not very familiar with the, what's currently available for visual page builders. I believe we're going to be pursuing, I think we're pursuing the best UX we can around just having, taking blocks in, I think, I think there are talk, there is talk about drag and drop and that sort of thing. I don't think that's there yet, but I think there's an eye to that being as easy. I could, I could say that, I think. Sorry, I can't say more. Sure. Sure. I don't think there's a, there's the, there's the make.wordpress.org blog, which I know has been having posts when Gutenberg has a new point release that will list in great detail. I've actually spent very, when I'm trying to get more familiar with all this, I've spent a lot of time looking through all these different things we've done, but it's, it's in great deal about the features that are being worked on. I think as we get, as we get closer, I think you'll probably have, my, my expectation would be more high level posts about what's going on. Currently we're having more development level posts there, but make.wordpress.org is the, I believe is the core one. I think it might just be that, I thought I was able to look and just see that at the top level. It's in the neighborhood. Sorry, I can't give you the exact answer there. Sure. I don't believe that's currently possible, but I believe the, the idea is, I mean, some, some of this is still like the dream, you know, and, and so, and so we're trying to make that reality. So that, that would be the good example of something that I don't, I don't know if that would be, I can't speak for the design perspective on it. That would be something that I would want as well. I don't know if that's going to be going into core or whether, whether that could be a, even a custom block if it doesn't go into core, where you can actually specify what you want the width to be, and then that, that would be something you could do. Oh, sure. Okay. So I think for those who couldn't hear, I think that the idea is that we, we do have columns right now. They don't, in, in, in experience don't, don't seem to be responsive yet. So that's, that's where we are. But, but, but column nesting, nesting blocks within columns is, is working. Okay. So the, the first question is how, how can a, an average plugin developer, theme developer track Gutenberg development and sort of try to start targeting Gutenberg even while it's still a moving target? And then the second, second question is, will there be a lag time between when it's merged and when it's released? Will there be a greater time than we're used to with releases? So for the first question, I think the way I'd be doing it personally is, is trying to track the, those posts on, on make.wordpress.org, there, there is a lot changing and it's, it's honestly hard. And I've just been starting to get into it over the last three to six months. And it's been, it's been challenging for me to track everything. And so my first strategy was not to track everything, but tracking certain things that I care about and just try and, and maybe making, doing experiments and starting, you know, even just maybe sketches in code about how I'd be integrating with things. And then maybe as things start firming up, I can take those sketches and make them a bit deeper. That's not wonderful advice, but that's the best coping strategy I think I would, I would suggest right now and just paying attention to those blogs. And then for the second question in terms of the lag time with release, I definitely can't, can't have any, give any authoritative comment on that. But it certainly seems like a good idea with something that, that is making so many waves to, to allow people additional time to, to pause and reorient if they wish. I think the idea is, is the rest of the percent, you know, and you can't, in no way can you ever please everyone. But I think, I think the idea is that you can, so oh, I forgot to repeat the question. The question is, what's the point? Or why, you know, what's the value in doing this? What problem are we really solving? Because we already have about 30 percent. We have one, I got it, okay, I'm about, I got to cut this off. So the idea I would say is that it does improve, I believe would improve experience for existing users in the, in the ways that I talked about, but also for people who are using things like Wix or other sort of site builders to, to give, to make that WordPress more accessible to them as well. So I think, I think that's the idea. I think I don't, we, we can talk, oh sure. Thank you very much.