 Hi, my name's Luke. I want to start by just saying thank you. Thank you so much for your time and attention this morning. And hello, I'm Luke Carbus. I am a product manager at XWP. This morning, I'd like to talk to you about, well, we're going to start by talking about a man named Johannes Gutenberg. He was born in around the year 1400 in the city of Mainz in Germany under the rule of the Holy Roman Empire. And Johannes grew up, learned to trade and moved to Salzburg where around 1440 he invented something called the printing press. Now, the printing press was a very important invention because unlike its predecessor, it was much more faster, much more durable to create new forms of content. Its predecessor, by the way, was called moveable type. So because of the printing press, all of a sudden books could be created much faster and much cheaper, which meant that the elite of society no longer had a bit of a monopoly on owning books. So I'm interested, is there anybody here who would consider themselves a nobleman or a noble woman? Hands up. We've got a couple there. Maybe you guys could stand up. That's what you get for being smart. Any priests in the audience or maybe an archbishop or two? All right, so pretty much all of us, us commoners, before the printing press there's no way that we would ever own a book and of course we wouldn't be able to read because of that. And after the printing press, books became much more widely available. There were no longer these expensive rare artifacts owned only by nobility. So it's no wonder that historians credit Johann's printing press as enabling things like the Renaissance, the Industrial Revolution, the Technological Revolution and other little things like modern Western democracy. So it's kind of a big deal, but what does it have to do with WordPress? Well, if you don't know already, you'll learn pretty quickly this weekend that WordPress is about to change significantly. Fundamentally change because the most important part of WordPress, the part where we write blog posts and change the content for our website, the post editor is getting a complete rewrite. So if you take a look at the post editor right now and compare it to various versions of WordPress throughout the years, one thing you'll notice is that in the last six or seven years it really hasn't changed very much at all. It's still basically the same. And then if you go and compare it to other solutions that are out there like Squarespace or Wix, you'll start to realize that our post editor in WordPress is a bit old, it's a bit clunky. And so the WordPress community decided that we should update it. And contributors took a look at Squarespace and Medium and tried to figure out what do they do well and what do they do not so well. And the goal here isn't just to modernize the editor, but in fact to leapfrog those other solutions to create something entirely new, an entirely better way of creating content for the web. And fittingly they named the project Gutenberg. Gutenberg is a completely reimagined approach to writing content on your blog or in your website. It's based around this concept of content blocks, which makes the whole process of adding content into your post much more flexible and a more unified experience for taking what's in your head and getting it out onto the screen. So if you're a content editor, if you're a blogger or a publisher or a copywriter like me, then you should be really excited by this change because for the very first time you're going to have the tools that you need to create vibrant, dynamic, cutting edge, engaging content experiences for your audience to engage with your brand. And bear with me a little on this. If you consider that WordPress powers nearly a third of the web, right? And then you think about content creators having these tools to create these deeply engaging new forms of content. It's not unreasonable to sort of imagine a sort of blogging renaissance, right? A content creation 2.0 as our audiences are engaged in these new and exciting and interactive ways of engaging in content on our websites. And of course this is fantastic news for the distributed open web because suddenly the attention of our audiences is being shifted away from closed proprietary walled garden systems and distributed around to all of the WordPress sites in the world because they have the best in-class content experience. And for those of us with clients who we want to hand over a website, well Gutenberg is really, really easy to just pick up and start using. You can literally just start typing and you've got a blog post out in no time. It's an absolute breeze. And for the plugin developers and theme authors in the audience, well developing for Gutenberg, there's a bit of a challenge in getting started but once you get used to it, it's really easy too. And what it enables is us to think really creatively about the different forms of content on our blogs, in our blogs. So maybe let me give you an example. Typically when we're thinking about content, we think about text and images and that's about it. Well, I spoke last night to a woman who was a travel blogger and she said one of the things that she has found a bit of a niche for with her audience was these mind map things where she'd create this chart and it would be something like, do you want to go on a historical holiday or do you want to find something relaxing or do you want to do an outdoor adventure and you know you can follow this chart to go yes, no, next question, yes, no, and eventually it gives you your destination at the end and she presents this like an image in her blogs. Well, wouldn't it be good, we thought, wouldn't it be good if it was just one question at a time, halfway through the content, you know, you get to this particular point and the users presented with this question and they've just got a few buttons, you know, yes, no, and then it takes them to the next question and walks them through this journey and finally provides them with an answer and then the blog post continues below. So really what we're getting at is that there are completely new forms of content possible that we haven't even begun to think of yet. And once you've started using Gutenberg, you've gotten one or two blog posts under your belt. If you go back and look at the current way of doing things, the old way as I've come to think of it, which is basically stripped down version of Microsoft Word in a box on a web page, you'll start to realize it's really not a great way of creating good content. So maybe you're wondering then, when can I use Gutenberg? And the answer is right now, actually, I've been using Gutenberg in a beta form on my blog for nearly a year now. And you can install Gutenberg as a plugin by just going to the plugins directory. In fact, if you're in WordPress, you go plugins, add new, and it's there on the featured page and you can start using it. This is the timeline for when it's going to be released. We had a feature freeze in June, which meant no new features are being added to the current version. That just means from here on in it's all bug fixes. July, actually, I've been told July 31, which will actually be our Wednesday next week. There'll be 4.9.8 released. And that is likely to include a sort of call to action, a big call out in your dashboard that says, install Gutenberg now because it's coming to WordPress soon. Get in early and start testing it out. And then in August, we're going to start on WordPress 5.0. And in 5.0, we're going to take Gutenberg and take it away from being a plugin and merge it into core WordPress. Some people tell me that we might even see it in August. We might see Gutenberg released as part of core. But more likely, I think, we're thinking around September, October, definitely before the end of the year. So it's coming very soon. You might also be wondering, what does it look like? Can I have a play with it? And in this talk, actually, I'm going to be giving you a demo of Gutenberg. But rather than just sort of do a tutorial style walkthrough where I say this button does that, click here for the other. I thought I'd frame it in terms of content trends. And I think Gutenberg is going to enable entirely new forms of content in the future. But let's just look at 2018 and think about what are some of the types of content, some of the interesting trends we've seen in blog posts this year, and how can we achieve those with Gutenberg? So just using that framework to explore Gutenberg. Does that make sense? Cool. These are the four content trends we'll be exploring. Typically, a blog post is one long column. So we're going to talk about breaking out of that box. Images taking center stage, embedded multimedia, and a term that I've sort of coined because I can't think of a better word for content hubs. We'll look at what that means. So let's dive right in. Bit more. Thanks, D. We'll see how we go with that. All right, so here are my posts. You'll notice this one I prepared earlier has a Gutenberg next to it. Now, when Gutenberg arrives in WordPress 5.0, it probably won't be called that anymore. It will just be the post editor. Gutenberg is our working title here. I'm just going to go ahead and add a new post. And for a lot of you, this is the first time you've seen what Gutenberg looks like. And it's really easy to start using as my post title. And I've just set up some shortcuts so you don't have to see me type constantly lots of bits of content. Started my post. You see how easy that was? Now, when I hit Enter or Return, I've got a new block here. And if I just start typing in there, it would be just another paragraph block. So that's easy for me to keep typing paragraphs. But I can also insert other types of content. And there's lots of different blocks available. If I hit the plus button here, Add Block, I can see a list of blocks that are available. And I've got Inline and Most Used at the top, Common, Formatting, all different types I could click on. I'm going to go ahead and click on Image. Here's my image block. I just have to choose an image from the Media Library. Let's go with this one. There we go. Now, of course, that's still in line. And we're talking about breaking out of the box. So I want to introduce you to this top section here. Every block has a little editing area at the top here. And it's different depending on the type of content. You can see in our paragraph, we've got our alignment controls and bold italic. But here for an image, we've got some interesting alignment controls. I'm going to choose this Wide Width option. Now, because I'm zoomed in, you can't really see the effect of that. But if I were to zoom to my normal state, you can see we've got a bit of a preview of what that would look like. We'll see it on the front end of the website later on anyway. We'll keep typing below just again, typing pretty quickly. So that's what it looks like to create new content in Gutenberg. Now, the way of breaking out of the box that I really like is to use columns. Now, this feature is in beta at the moment. It's something that's being still worked on a little. But we can just add in some quotes here. You can see I've got my two columns there. What I could do is I could click on my columns block if I can find it. Did I mention it's beta? And I can adjust the amount of columns here in the sidebar where I've got my block options. We'll come back to this. But for now, I'm just going to again make it this Wide Width instead of the standard. All right, let's add some new content here. What else could I do to break out of the box? Well, what if we insert a gallery? Now, it's really easy to create a gallery. We're just the same as an image, media library. But this time, I'll choose a few different images. Choose that one, that one. Let's see here. This one, this one. There we go. Actually, not this one. I don't like this. I'll go with this instead. I've got six images there for my gallery. You can see them. Insert my gallery into Gutenberg. There we go. You can easily add new ones. Again, we'll break out of the box with our Wide Width. Actually, for our gallery, we're going to go full width. And that's going to take up the entire width of the page. And rather than doing three columns, we're going to look here in our block settings sidebar. And we can change the amount of columns. I'm going to make this one big long line. That'll really break my content up nicely. Keep writing content here. Again, we've got these block settings. And these are my paragraph settings here. But we've also got this tab, which is our document settings. And this is typically what you'd see in the sidebar for a regular WordPress post. Visibility, when to publish it, whether it's sticky. We'll give it a category. Oops. Next feature image, that sort of thing. And go ahead, press the big blue publish button. Are you sure? I am. There we go. That's how you write a blog post in Gutenberg. Let's take a look at what it looks like. We'll just zoom out a little. This is normal width. There's my columns. Sort of creative way here of splitting up the page. You can imagine my content could go on from there. So that's breaking out of the box. Getting out of that single column in our blog. Let's go ahead and add a new post. Posts, add new. This time, we're going to talk about images. All right, start with a little content. Let's go ahead and insert an image. You can see I've used the image block recently. So it's coming up in my shortcuts. These are frequently used blocks. And they'll change, depending on which you use most frequently, add an image just like that. Choose one from my media library. This one's quite nice. And I'm going to go ahead and make this one full width to sort of really drive that idea of images taking center stage home. A bit more content below it. Another way of inserting an image is to use a gallery, which we've already explored. But I wanted to show you something interesting with the gallery. Let's say we choose five images. Oh, sorry, that's only four. Let's add this one in. So there's our gallery. And you can see that it automatically finds a way of making that fit. It's not necessarily just a simple grid. And we can change the columns here to make it work in different ways. And because there's five, you see the last one is displayed differently there. There's a couple of other options. I kind of like this three column one. We can choose whether the image is a cropped or not, which is going to force this landscape image to display in full. And we could link them out to the media files. So that's what a gallery could look like. Let's go ahead and make this gallery a wide width as well. A bit more content. Now one of my favorite blocks is the cover image block. I like to use this at the start of the post, but in this case, let's just go ahead and add in a cover image. What's going to work well? I like a landscape image for this. We've got some more down here. And we can put in a title here. This is like, that's how that one works. It's sort of an interesting way of presenting content over the top of an image. And that looks really nice. I'll add some more content below it. But one of the best things about this is I can change the background opacity to make it sort of maybe fit better. Around 50% works well. And I can choose this fixed background option, which I love because look what happens now. Do you see how it doesn't scroll? It's really cool. So let's publish this. Take a look at what it looks like at full width. And you can see we've got that lovely, great big image right in the middle of our content there. And that's going to really draw people's eyeballs down towards the next part of our article. Beautiful gallery. It's a great way of showing it. And look at that. Isn't that nice? It's, again, just a really nice way of keeping our audience engaged with the content as we go. Like to pull a pull quote in there. Something, an interesting part of the content that's to come. So there we go. That's images taking center stage. Let's add a new post. New post. Zoom in again. This time we're talking about embedded media. So you might have noticed that on some news sites, especially where they try and, where they really optimize for engagement, right, one of the things they like to do is pull in like a Twitter tweet or something from Facebook and have it displayed in this special way. So we can do that in Gutenberg too. I'm going to go ahead and find my Reddit block. Now I could scroll down here and try and figure out where this Reddit block lives. Or I can actually use this search feature and just type Reddit. There we go. And now I just need the URL for the embed. And I've got one. Here's one I found earlier. Interesting post on Reddit. Just copy and paste the URL in there. Hit embed and watch what happens. And that's embedding a Reddit block. Really easy, right? I can embed other types of content too. Another way of finding blocks for maybe some of the power users out there. Instead of hitting this plus button, if you type slash, backslash on the keyboard, it's a sort of a shortcut. And we can go ahead and, I know I want an Instagram. So backslash, IN. And you can see I've got this block here and can just hit enter. And I've got my Instagram block in there. And I found this on Instagram earlier. Let's embed that. I'm sure that'll, there we go. I'm not sure why that's working because this is a live demo, that's why. All right. The other thing we can do is if we're not sure whether, you know, exactly whether it's going to work, we can use a generic embed box and here's something, SoundCloud. I wonder if there's a SoundCloud Gutenberg block. Well, I can just use this embed URL and see if it works. There we go. It worked great unlike Instagram. I don't know why. Should we try a different Instagram? Maybe it's this one. This guy. Oh, it worked. There we go. All right. It was just autosaving up there. Did you notice? We'll publish and hit view post. And here's what it looks like. It's a really great way of pulling in outside information and making our articles seem a little bit more informed and sourced because we can refer to experts. That's what embedded multimedia could look like. And lastly, I'm going to talk about content hubs. So, one thing that you can do if you'd like to is you can link off to other posts. I'm going to show you this latest posts widget where I can just pull in some of the posts that I've just written. Maybe I want them in a grid. Maybe I only want to see three. I'd like to see the post date. So, that's handy. Could be, maybe. Categories is another one. You can put categories in there. I like to see them as a drop-down. Now, these are kind of cool, but not particularly useful in a blog post if you ask me. I'll show you something that is really useful, though, is we've got a product block. Now, I've got WooCommerce installed with some products there already. And I can, in the middle of a post, about interesting t-shirts. Maybe I'm talking about how to... the right mix between cotton and some other material. I can just go ahead and embed my t-shirt. There we go. Let's go this one. I've got my product there. Hit Done. And you can see what that looks like. Let's make it just one column. I've got a t-shirt in the middle of our post, and our audience can go ahead and just add that to the cart. Or we could do it like this. Let's see. Is this our added products? Let's choose all of our t-shirts. T-shirts there. Hit Done. We've got all our t-shirts. But maybe we only want four of them. So we'll change it to one row. And we've got four t-shirts. And we'll make them the most expensive first. So that's really neat. Actually, my favorite way of embedding e-commerce is like this. Go ahead and add our product block. I'm just going to put in... whoops, that's not what I meant to do. Here I get to show you this dropdown here. You see more options. That's how I remove a block. I'm going to go Filter on Sale. And I've got all of the products that are on sale. I just want to show the top three, rated by how good they are by rating. There we go. And we can continue our post. So that's Content Blocks. Sorry, that is Content Hubs. This is what it looks like. We've got our posts up here that we can link off to. Categories. And mid posts we can pull through e-commerce. Actually, I think that would look great if it broke out of the box a little. So I've got one more little bonus trend for you, which I've noticed a little bit around the place, is that often people will like to put in a little snippet at the end of their blog posts, something that they want to include every time. I've got one on my blog. So I'm just going to copy that from here and paste it here into Gutenberg. I'll just format it a little. I like to tell people about, would you please bookmark my site? And what I can do is I can hit this More Options thing and hit Convert to Shared Block. Let's give it a name, like bookmark me. Hit Save. Now this block is shared, and I can go into a different post. Maybe one of my earlier posts. I'll just hit Update. And at the bottom here, I'm going to insert a new block, and I can find for my shared blocks. Here's my bookmark quote. And now it's really easy for me to embed that same content every single time. And if I were to update this, I would update in every single one of my blog posts. All right. So let's finish up by just showing you one I prepared earlier. That's got a lot of different Gutenberg elements to it. We've got a paragraph here with a drop cap. That's one of the options for our paragraph block. There's quote blocks. Here's that nice fixed scrolling effect. A different style of quote block. And there's a third one further down. We've used columns here with a wider width to put an image on the left and text on the right. There's a spacer block, which you can see here. There's also just a space, a gap block, which you can adjust the height of and just leaves a gap. Here's a video block, which I've set to auto-play, loop, mute, and hide video controls. So obviously, there's a toggleable and you can change it up as you like. There's another quote. This is just an MP3 and you can see that WordPress embeds the controls for it there. Nice image. Tables are something that's sorely missed from the current editor. You've got to install a plug-in to be able to do tables. So the Gutenberg table block is really handy. And of course, the button block is a great way of putting a call to action right there in your content. Here's some embedded content from Reddit and Gallery. You could put a poem in like this with the columns. Here's columns with an Instagram embed on the side. So you can see there's lots of different creative ways of using Gutenberg, even right now. So that's Gutenberg. I hope that that's been helpful to you to give you an idea of what's possible. If you want to learn more about Gutenberg, maybe how to develop for it, or something like that, how to get started, then you can see that at WordPress.org slash Gutenberg. This is me. And I've got time for one or two questions. I think we're just going to run a mic over to you over there. Thank you. I'm Jason. The shared content block is there a central place to manage them? The answer is no. If you wanted to, I've found, come across this sort of pain point as well, if you wanted to change the contents of a shared block, you would have to insert it into a post and then edit it, which isn't the most user-friendly way of doing it, but that's how it is. If you wanted to delete one entirely from every post, you could do that in the same way. If you wanted to, you just create a new post, do your changes to your shared block and then delete the draft. Was there one at the back here? How does it handle responsive content? Great question. Can I show you? It is fully responsive. Have you guys ever used the customizer to have a look at responsive content? It's a really way of doing it. I just hit customize if you didn't see right here. Now I get to see this post that we've just looked through. Let's have a look at what it looks like on a tablet. Oops. And a phone. Particularly, we're looking out for the gallery. My column is obviously just not working there. That wasn't a good idea. But did I have a gallery in this post? There we go. You can see how the gallery is scaled. Everything is built to be fully responsive. You can see my columns there and my WooCommerce embed there. Thankfully, that answers your question. There was a lady around here with a scarf. How does this affect the existing blogs on my WordPress now? Yeah, good question. Can they be transferred over? Yeah. So, once you install the Gutenberg plugin, actually, the content of your existing posts doesn't change at all. You notice at the start there, it had that little dash and said Gutenberg next to the post. So, you can see the existing content. Now, if you go in and edit your existing content with Gutenberg enabled, it will automatically convert everything and I've never seen a single problem with that. It's picked it up perfectly every single time and it converts it into Gutenberg, converts it into blocks, too, like the paragraph blocks and lets you rearrange them and add new ones in between and things like that. So, it becomes a proper Gutenberg one after that. I'll come back to you. I had a question over here from the men in the... Thank you. Hi, my name is Martin Slack. Just a quick question about styling individual blocks. Are you able to add a class and style using CSS? I, for example, have a blog post where I've styled it using Flexbox. Now, would that be ported across into Gutenberg with no problems and CSS grids, those sorts of stylings? Yes. So, if you've got a theme, you could create specific stylings to... associated with specific blocks. You could create new types of blocks that fit with particular styles so that you could reuse them. There is no sort of custom CSS box in the options for any particular one block. But, yes, my approach would be to either create a new block or, you know, use your theme specifically to target individual blocks which you can do. There was a woman here. Hi. I haven't actually played with it, but I've heard that when you make a new paragraph, it makes a whole new block. Is there any way to associate blocks together? So, say you have four paragraphs that it's been one block together rather than being four blocks, or is that future? No, it is possible. Actually, I did it in the demo secretly. So, typically, I would advise not to do that because if you don't do that, if you keep them as separate blocks, it's really easy to put stuff in between blocks that way. You don't have to sort of separate them and play around. But if you just hold down the shift key when you press enter, it just does a carriage return. It just does no new block but gives you new lines. What do you mean by the text editor? There is HTML mode, but I've never needed to use it. This young man front. If my site is not going to be ready in time for WordPress 5.0 in Gutenberg, is there a way of opting out of Gutenberg? Yeah, thanks for asking that question. It's a really important one. Some of us might have weirdly complicated site setups. Actually, maybe we're using, and this is very common, maybe we're using, say, Avada which is going to give us a sort of complicated way of building out content. Or maybe we're using something like Divi or Beaver Builder or another page builder. And we're not sure whether our site is going to be ready in time for Gutenberg when it's released. Whether the plugins or themes will be updated to support Gutenberg. Well, what you should do is get into your WordPress install and look for a plugin called, believe it's called Classic Editor. Is that right? Do you know? And if you install Classic Editor, what it will do is keep all of the files for the Classic Editor in that plugin. So when they're ripped out of WordPress, you'll still have access to them and it will prevent Gutenberg from ever taking effect. At the back in the sweater. Yeah, I was just wondering if you have access to the HTML side of things. So you mentioned that you actually did have HTML, but a lot of my posts actually created programmatically. So I actually don't edit in the WordPress platform. Oh cool. Well, actually, Gutenberg's HTML is really neat. I'll show it to you. So the way a block works is really simple. All it is is, you know, your paragraph as you'd expect. But then a comment before a block starts with the block settings in the HTML comment and a comment at the end is what it looks like. If I hit this arrow, go hold on while we're here. You can apply custom CSS classes to an individual block. So that might help you. So if we hit this and we go editor's HTML we can see the actual HTML there. And then if you're doing it programmatically it's not shown here, but I can show you in the inspector. Wow, you're not going to be able to see that. I'd have to view source which is not coming to me right now, but yes, if you're doing it programmatically, it's just a simple comment that you insert to specify the start of a block and the end of a block. Yeah, here in the striped shirt. Do you believe that we can call Gutenberg as short code version 2 or no? I think it goes far beyond short codes. So right now it's a good question because right now in the existing editor how do you insert content into your posts? You can type it in. You can use maybe the toolbar. You can hit the add media button or maybe you've got a plugin that's added a new button next to the add media plugin or maybe you can get a link and paste it in and hope that it embeds properly and that's a bit mystery meat, you know, like hopefully it works, maybe it will, maybe it won't and there's all these different scattered ways of actually adding content into the post and if you're going to install a plugin, imagine you install a plugin that promises you it's going to add buttons into the editor. Well, you have no idea how that's going to work. Is it going to be a short code? Is it going to be a button in the toolbar? How is that going to add buttons in the editor? It's confusing and so when I said at the start of this talk that it was a flexible and unifying experience, I meant unifying because everything works the same now. Whether it's a short code, short codes do have backwards compatibility with Gutenberg by the way but we're not going to see short codes anymore, we're just going to see blocks. Everything, news, new types of content will always be a block. Hi, I just had a quick question to follow up from a previous which was to do with kind of combining paragraph blocks into a group. I think this is a really important topic that should maybe be addressed a bit more. You mentioned that you used a soft return to kind of group together three or four paragraph blocks. Soft returns are potentially an option for just a paragraph of text. Spooky. But soft returns have a very different ... ... ... We're about to see the introduction of a new evil villain. The screens will get taken over any second now. Sorry. No, sorry. I was just meaning soft returns are obviously an option at the moment to kind of in a way hack Gutenberg to create a block that's maybe three or four paragraphs on it. Soft returns have a very different stylistic or margin or white space approach to actual paragraph tags. Absolutely. I can imagine that ... I can already see that people might start using the columns, but setting it to a one column approach to therefore group kind of sub blocks together. I just think that a group block might be a real winner here to help people, especially with sharing, with that feature that you could ... Oh, with shared blocks? But also being able to create a wider section or maybe a background color, etc. I'm having trouble, to be honest with you, to imagine a use case for grouping blocks beyond a shared block sort of situation, a shared group being useful, but fairly edge case. You might be right. I don't know ... And obviously there's a long way for Gutenberg to go, and absolutely you should have that voice on Slack where in the community where this sort of discussion happens, in the make WordPress Slack. My personal inclination is that maybe that should be something that's a plug-in. Maybe that is something that isn't as useful to a vast majority of people. But I'd be open to debate that with you another time, maybe. Okay, we've got time for one more question. Maybe, yeah. If I have a site built using a theme and Beaver Builder, how do I seamlessly and without any problems move over? Contact Beaver Builder support. I don't know how page builders are going to update or if they will update to support Gutenberg. Some people see Gutenberg as a sort of war on page builders. I don't know if that's the case or not. And I don't know what the future of page builders like Beaver Builder or Divi is given Gutenberg. I think in the short term if we're realistic Beaver Builder is going to release an update that will disable Gutenberg in order to keep the Beaver Builder active and working or they will completely rethink the way they do page building to be more native with WordPress 5.0. I don't know. Sorry. Thank you. Thank you all very much.