 The last speaker today is Justin Cooper, sir. Close enough, close enough. Justin is a senior web engineer at TenApp. He'll be taking, he'll be talking more about Gutenberg, and how the new eight signifies the evolution of the WordPress project itself. So this will be the last talk of this track today. Let's hear Justin's talk, Gutenberg and the evolution of WordPress. Please welcome Justin. This is actually my first trip to Tokyo ever, even though I've lived in Korea for five years. This is a two hour flight away. I haven't even been here yet. I know it's weird. I have to say it feels good to be in the city where the WAPU idea was first born, and actually the country where WAPU was created. It feels very good. This mascot has grown into something which symbolizes the heart of WordPress, which is community. I always love to see the different ways that people and businesses and cultures adapt this into their own form. And none of this would be possible without the Japanese WordPress community, so thank you. That's very great. So enough with that. Let's get into the talk. Today I'm here to talk about the evolution of WordPress, hopefully shedding some light on how we ended up to this current state, the Gutenberg era, before I get into this talk, the evolution of WordPress. If you would please just allow me to introduce myself. I'm Justin Kupso. I'm a senior web engineer at Tenna. Most people just call me Kup because my last name is very difficult to pronounce. And although my usage is varied and random, you can find me in most places at Kupso. You can also find more information about myself on my website, kupso.com. I believe we have some time after the talk to go through any questions or even a demo of Gutenberg if you want. Now, enough with the introductions. Let's get back to the evolution of WordPress. See, WordPress is changing. It's evolving. It's becoming something greater. While change in WordPress is nothing new, WordPress has itself changed quite a bit over the years. This might be one of the most noticeable interface changes to ever come since the design of 3.8. But to understand what that means exactly, we must first take a look back. A look back at the early years of WordPress to understand how it has evolved into the WordPress of today. Doing this will hopefully give us a better understanding on why this change is so important for the future of WordPress. This is WordPress 1.5 officially released in 2005. More specifically, this is the post-edit screen of WordPress 1.5. And as you can see, the editor itself is just a text box. There are no capabilities for anyone unfamiliar with HTML to create any type of rich content. Something as simple that we think today as making text bold or italicized didn't even exist. Thankfully, less than one year later in December of 2005, WordPress 2.0 introduced TinyMCE, which is the few clicks of a button one could manipulate content within the editor, making it easy for users to finally create different styles of web content. While it did have some quirks, the editor was meant to bring a smooth, whizzy-wig editing experience to WordPress. Whizzy-wig. What you see is what you get. Let's talk about that for a minute. In his talk at WordCamp US last year, Morton Rand-Henderson spoke briefly on the concept of what you see as what you get as the dream of the web. Although many tools have came out trying to accomplish this dream or make this dream a reality, none have ever quite achieved that goal. The idea, like the acronym, is simple. You edit some content. And then that content displays in the medium in which, in this case, a web page displays the same way as it does in the editor. With WordPress 2.0, we embraced the whizzy-wig acronym. However, no editor has ever quite lived up to that acronym, often causing problems, headaches, and in many cases, sheer frustration. But the problem was what you saw is rarely what you got. And this only compounded in the future as more and more extensions and ways of editing arose. As the web evolved and rich user experience emerged, the challenge of whizzy-wig only grew. Enough about whizzy-wig for now. Let's get back to the evolution of WordPress. While updates did occur over the next two years, the next major changes in WordPress came in March of 2008 with WordPress 2.5. A couple of those noticeable changes being the multi-file uploader and concurrent editing protection, a great tool for multi-other blogs. I, myself, was very surprised that something like concurrent editing protection came so long ago. However, from WordPress 2 to 2.5, there were not many interface changes. And the overall content editing and content creation experience remained the same. WordPress 2.7, released less than nine months later in December of 2008, brought an entirely new interface, an interface with a desktop structure that we still see today. We have the menu on the right, the editor, and some meta in the center, actions and other meta on the right. However, there were still no big changes for content creators. And this design would remain for three years until July of 2011 with the release of WordPress 3.2, one of which contained my favorite feature at the time, just write. With just a few clicks of a button, all the WordPress admin interface would just disappear, allowing content creators to focus. And, for lack of a better phrase, just write. This was the biggest change for content creators' workflow since WordPress 2.0. However, this feature would later be removed and replaced with another feature that we might be familiar with today called distraction-free writing. Another two awesome additions to WordPress came in versions 3.4 and 3.5, released within six months of each other in June and December of 2012. Version 3.4 introduced a customizer, allowing users to preview changes and make different alterations before going live. While version 3.5 changed the way we would manage media forever. The biggest interface change in WordPress came in December of 2013, five years ago. It is still here today. Interface-wise, not much has changed since that time. But there were many other additions and changes to WordPress. As a matter of fact, under the hood, WordPress has changed drastically over the years. With additions such as multi-site and custom post types in 3.0, the heartbeat API in 3.6, automatic updates in 3.7, the REST API in 4.7, and much, much more. By now, you might be asking yourself, what does this have to do with Gutenberg and WordPress 5.0? And to answer that, let's talk about and take a look at the tiny MC editor in WordPress 2.0 compared to the editor we have today. While there are noticeable style changes, the core workflow is very similar. Sure, there are many under the hood changes which have improved the editing experience, but the workflow itself has not changed. Someone going in here and creating a post, someone maybe unfamiliar with WordPress completely, would just simply go in, add a title, and add content within this little box. That means we've been using the same content creation workflow for over 13 years. While the web has evolved, including the ability to manipulate content, creating rich reading experiences, this workflow has yet to make it to WordPress without plugins or custom development. Let's take a look at what it takes to create rich experiences within the editor today. Due to the difficulties of creating rich content, plugins stepped in to fill that gap by extending WordPress with different features of editing content within the post screen. Everything from creating complex layouts with page builders to extendable solutions like Shortcake to complete custom tiny MCE plugins like the ones you see here. While each of these solutions try to achieve the WYSIWYG concept in their own way, they can also create unforeseen problems like lock-in, plug-in conflicts, and more. However, I do feel that these plugins and tools were exactly what WordPress needed at the time, a better way to more closely achieve that WYSIWYG experience for non-technical users. Now, with that in mind, Gutenberg is here to achieve that and so much more. By decoupling our dependency on plugins or custom solutions to achieve that what you see is what you get experience, we are nearing a future where anyone can enjoy a rich editing environment. WordPress democratized publishing. And Gutenberg will democratize rich content creation. By enabling developers through the use of content blocks to easily create rich extensions, we are able to shape the future of content creation for content creators in WordPress. Back in July, Luke Carvis presented at WordCamp Sydney on the future of web content. In his talk, Luke highlighted his thoughts on web content and how we are finally breaking out of this box. I want to talk about that box for a moment. Up until now, WordPress content has been encapsulated within a box. This box is limiting and restricting the capabilities of content creators. Everything was required to fit and conform into a small specific area, making it very difficult to play with the content. You see, by removing the box, Gutenberg is making way for forms of web content not even yet conceptualized. Breaking out of this box also removes the constraint of visualizing the look and feel of a post while it's being created, much like the way a painter works on a blank canvas, slowly ideating through a piece of art as the emotions flow through. Creation of web content will inspire authors to think visually about how their content will be consumed. I want to walk you through a couple of examples of creating a specific piece of content both before and after Gutenberg. In this example, I will demonstrate content organization. While content organization in simple posts is not too complex, because we're still stuck in this box, it requires a little bit of extra work to make sure the pieces are all in the right place. As you can see, I'm moving a gallery of images and another single image around, but I have to double check to verify that there are no lingering paragraph tags or all the spacing is correct before I can publish. With Gutenberg, content is easily movable thanks to uses of blocks and move actions. Blocks allow us to separate pieces of content into their own containers, providing us with the content organization features that you see here. Now, that was a simple example, but let's look at something dynamic, like putting the latest posts into the middle of content. Now, unfortunately, within the classic editor, this requires the use of a plugin. This plugin would most certainly insert a short code within the content displaying the latest posts. Without a plugin, the only way to add posts would be by creating a list and adding each post individually. Now, this is not dynamic, so this list would live on forever within this content. Hopefully, whenever somebody reads this content that they click on a link that is not dead. Within Gutenberg, we have a latest post block, giving content creators the ability to display dynamic posts right in the middle of their content, much like the recent post widget, this will be updated each time new content is added. All of this is possible with content blocks. Blocks are the core underlying feature of Gutenberg that enable wonderful features like dynamic content and content organization. Blocks are fully extendable using the blocks API, and developers can easily add new blocks or modify current blocks for content creators to fit in their content creation experience. Let's take a look at how one team has developed a products block for easily displaying products within pieces of content. As you can see here, I have a simple post with a few images of products. Now I'm going to add a dynamic products block just below the text. All I have to do is insert and search for the products block. This particular block that was developed has several different options. I'm just going to select all products. As I add the products, you can see that it has a three products display, but I can adjust those columns to fit more nicely with my content. I don't really like how that looks here, so I'm going to go ahead and just move that below and into my large, between my larger images. Now adding new products will dynamically update this block. All I have to do is go to my products area, add a new product, in this case some yellow handheld that I've been wanting to sell forever. And if I click publish, the product is added to the database, and I go back to the post and I click refresh. And if you take a look, the block will begin loading itself with that information, and you will see now four products. Now this layout structure with four products is not as good as I like, so I need a more even structure, so I try four. That looks pretty good, but how about two? I don't like that, that takes away from my other images, so I'll go back to four. And now that I have this new product here, I can insert a new image right above it to highlight that new product. I use a quick search to search for the image block. I go to my media library, add that image, and you can see I can quickly highlight my new product. What is really interesting about this is now a user no longer has to go to my products page to buy my products, they can add those products directly to the cart, straight from the post, which was easily added using the products block. Now someone with non-technical experience might find it very difficult to perform something like this, but with Gutenberg and products blocks, this becomes an easy few clicks of a button. Dynamic blocks are an amazing feature of WordPress where no longer stuck using modals or adding short codes into content. With dynamic blocks, we can render rich dynamic pieces right in the middle of our existing content. It is quite clear that WordPress 5.0 will shape the way we think about content. And it's just the beginning. After an enormous effort of the Gutenberg team and hundreds of contributors merging into core, it's just around the corner. But it's not stopped there with plans to extend this functionality into the customizer and to create a new Gutenberg theme. There is no doubt that creating what you see is what you get content is right within our grasp. Now, with all that in mind, I leave you with these few final thoughts. Gutenberg, Johann's Gutenberg, the man after which this project has been named. In the 1440s, Johann's Gutenberg invented a machine, a machine which revolutionized and changed the way people created and consumed content, the printing press. This machine combined with another great invention, paper, enabled millions of people to consume content in forms which were previously only reserved for the rich or elite. In a metaphorical context, if we imagine paper is the internet and a blank page being a website, then the printing press could be wordpress, a tool which revolutionized and democratized the way people of our age create and consume content. Compared to today's modern printing techniques, Gutenberg's printing press would be considered outdated. While much more beautiful than modern printing presses, its efficiency to print would be like comparing Gutenberg's printing press to movable type. You see, printing evolved. What once required arranging pieces and components evolved into printing press, which later involved into a digital printing and more. Printing changed with time and modernized in order to produce output at greater rates and quality. It enabled print designers and content marketers to create rich campaigns, capturing and captivating audiences. Finally, it enabled consumers to visualize stories, products and other content in ways never before perceived. Today, wordpress is doing the same. It is evolving, modernizing, becoming something greater. It will enable developers to more easily create tools for clients, it will enable content creators to visualize the way a reader will consume that content by creating rich experiences, some of which have never even been seen. In the near future, publishing web content with wordpress will no longer be this what you see is what you get fantasy. It will be a what you see is what you get reality. You see, Gutenberg is about more than just the editor. It is about shaping the way we think about content creation. By adding blocks everywhere, wordpress of the future will allow users to have this same kind of block editorial workflow within areas like the customizer or within widgets and more. Presents us with the possibilities to control content and truly finally giving us the what you see is what you get environment. So, with this information, highly encourage you to use Gutenberg. Check it out, try it out, ask your clients to try it out. Wordpress of the future is something that is going to leapfrog and go beyond the current, what you see is what you get editors. And the only way to do that together is as a community. So, if you haven't gone and tried out Gutenberg yet, I highly encourage you to do it now. Thank you. Sorry, give me a moment to Yeah, sure. Figure out how this works. You want to? Can you hear me? I can hear you. By the way, how cool is it that I can take questions from somebody in a different language? That is really cool. The first word came that I've done this, by the way. The people at the back, they don't mention John. Oh, yeah. So, we have time for questions. Time for questions, actually. So, would you like to go? Questions? Come on, please. Oh, maybe I'll ask a question. Please, I highly encourage you to ask questions. If you have no questions about Gutenberg, maybe you're already, okay. Thanks for the presentation, I'm keen. So, how do you think Gutenberg will affect like other page builders? Oh, this is, you know, this is a question that I hear so often that I love to hear it. So, first, page builder plugins, I'm not gonna name any specifically, but page builder plugins have tried to, as I mentioned, fill this gap of what WordPress can do. WordPress has itself been kind of, how do we create rich environments for content creators? As you can see, we still have just a text box for people that want to create rich content. Sure, there were great things like the media manager and how we manage media and the way we handle embeds has drastically improved from years ago, but plugins still were required to fill in that gap of how can we create specific columns, how can we add widgets here and how can we add different species of dynamic content in different places within a content editor? And they've done a fantastic job in their own way. And the way that I envision that Gutenberg will change the way that these plugins work is it should only improve. WordPress has never tried to tick every box. They've never tried to fill every solution. There will always be things that customers and clients want. And Gutenberg, especially in the area of page builder plugins, enables that even more. So the best page builder plugins, the ones that are trying to solve all of these solutions or providing this massive amount of options, Gutenberg only enables them further and actually more easily to add those solutions. So the ones that want to break out and become better will embrace Gutenberg immediately. So that's my answer to that. Thank you. Any next questions? Should I ask one? I will ask one, I will ask one question. And please, I encourage you to ask questions. If you're not asking questions, that tells me you know everything about Gutenberg. So maybe I should ask you a few questions. By show of hands, how many people have installed and tried Gutenberg? Well, that's not that many. Well, that's less than one quarter of this room. So you must have questions. This is a feature that is coming to WordPress 5.0, a feature that will change the way you edit content, that will change the way your clients edit content and you have no questions. I highly doubt that. Okay, what can you do? I mean, if it's for your personal blog or something, you can just try on that. If it's for your work or your clients or whatever, what will be the first step? What is the first step would you recommend to do? And what, perhaps if you review or turn up, what have you been doing for other preparations? Yeah, so, one of the first preparations that you can do, especially for clients, is number one, don't install it on production. This is not a core feature yet, don't install it on production. Number two, before installing, take an inventory of what type of content your client uses. What type of plugins do they use? Within that plugin, let's say for example, they use a page builder plugin. Within that plugin, what features of that plugin do they use? Do they only use column? Do they use columns and some other embeds? You need to take an inventory of what they use before you can fully assess whether Gutenberg should be used and installed now. The second thing is, if you use and install it, as I mentioned before, don't install it on production. You need to have a separate testing site or a staging site or what some people in the enterprise industry call a pre-production site to go in and test these features. What is that? Private? If the private, page builder, SEO, whatever, store has not announced anything with speed. That is to Gutenberg or I don't know if there are any, but if they have announced that they're not gonna do any updates to be compatible with Gutenberg, what can you do? Yeah, so my first answer here would be, did you pay for that plugin? And if the answer to that question is yes, you better get on them. You paid money for this plugin in service that they have created, and if they're not planning to stay up to date with what is coming and changing, then you may wanna rethink about that purchase. Because anytime you purchase a service or a product, you should fully expect that that service and product, especially if this is an ongoing purchase, a subscription or purchase, you should fully expect that that product should keep up with what is coming and changing within WordPress. The other thing is, if they are not changing or not updating, this is that classic plugin lock-in problem that has existed in WordPress way before the thoughts or ideas of Gutenberg. You get, excuse me, you get a popular plugin and it creates short codes and does things like that and you insert those within your content and then you disable that plugin at some time in the future and now it just displays short codes. Thankfully, you can still leave that plugin active and it will just display the content as it does with that plugin there. And Gutenberg itself has the ability to work backwards compatibly by just adding your old posts into what is called the classic block. So, enabling Gutenberg should still allow that plugin to work functionally as long as you're using the same theme. Of course, you can see there's a lot of moving pieces here and that's why content inventory and also inventory of plugins and themes is very important, you know? Yeah, I'm sorry, I'll just add one more question to that. What about if that was, so it's either some kind of bug or maybe no bug or not quite feature is there is related to Gutenberg itself. Let's say you look at the GitHub and you might find a request or you might make a request but with all understanding of how the developments is moving forward, let's say that feature may be coming a little later. If that happened to be something that is very, I don't know, critical and important to take your website, what can you do? Oh, so, yeah, this is a, I know this answer I'm about to give you is not very good for non-technical people but for technical people, what you can do is get in, dive in, it gets open source just like WordPress is open source. For years in WordPress, people have found issues and went to track what is called, where WordPress developers go to submit issues and oftentimes submit patches. Now, traditionally within WordPress, it has taken quite a while for some patches to get through that has sped up over time but with Gutenberg, those patches have been getting through very quickly. Now, in Gutenberg, we are currently in a feature freeze so the patch might not get through before the release of WordPress 5.0 but that doesn't mean it won't be in 5.1 or 5.2 or 5.3. So, I highly recommend that if you have a feature or a bug within Gutenberg that you are seeing, just go into the GitHub repo and submit an issue, submit a patch, and maybe you will get it. Thank you, that was me. Hey, you mentioned that with Gutenberg, WYSIWYG reality is right around the corner. What's missing, like what's stopping us from seeing us around that corner? Yeah, so the box is still stopping us, right? So we still have this content box that we've been working within for years, right? So currently, Gutenberg is still only working within that box. So we've removed the box visually as for content creators, but the way the content is still published is still stuck within this box. That's why as Gutenberg goes into areas like the customizer and even adding blocks outside of this box, blocks everywhere, if you will, that later future WordPress will have that, what you see is what you can experience. I fully envision that WordPress of the future will be installing WordPress, not even going next step to installing a theme. The default theme might be the Gutenberg theme that is coming in the future. And installing WordPress, okay, let's add a header block. How do you want your header to look? Let's add a menu block within the header block. Let's add a block for content. Let's add a block for the sidebar. Let's add a block for the footer. Everything's a block. That will be what you see is what you get experience of the future. But it doesn't come with WordPress 5.0. WordPress 5.0 only lays the foundation of this possibility. I'm sorry, thank you for today. As a code, I want you to have a beautiful look and a beautiful code. But I'm worried about what the code will look like when it's freely entered. I'm sorry, I didn't fully understand the question. Do you mean the code displayed on the public side or the code displayed within writing? I don't fully understand the question. Yeah, so it's a code of 15. So it's interesting how the output of HTML styles, how that is outputted in a way that is beautiful and clean for us. So if I think I'm understanding this question correctly, it's how our individual blocks, if I write a block, where is that code output? Is he talking about just the HTML or is he talking about the CSS and the JavaScript? HTML and CSS, the whole thing that Gutenberg is our output to the front end. OK, so there are different ways to manage this and change this. So for example, the core blocks have to output their own specific code. For each individual block, it might be different. So they need a way to output this. As a programmer myself, it may not be the answer for what you're looking. Code is poetry. It's beautiful. It tells a story. But I'm personally not overly concerned with how things are output individually. I'm more concerned with how are they output together. So for you and me, we can go in and we can create a web page and WordPress right now. We can create anything we want. We're programmers. We understand this. But for content creators, this becomes a very complex problem. So if the code is output with maybe a little bit of style tags on a specific HTML element, I, as a programmer, have grown to understand that that's OK. There's always specificity rules in CSS that I can override that. So I'm OK with that. The second part comes with JavaScript. That's a whole new system. That's a whole new era. That's a whole new beast to mess with within WordPress. And the way that, thankfully, the way that WordPress has worked forever is you have control over the JavaScript that is output within core. This might be different with plugins. Plugins, maybe, quote unquote, doing it wrong. But within WordPress itself, it's still controllable. You can control that output. And even with blocks in the way that they exist now, some blocks content is completely modifiable. WordPress action hooks and action filters have always given us this capability. And Gutenberg is not going to change that. They want this to be a customizable experience. It's not something that they are just going to force upon us, right? I don't think that part of WordPress is going to change ever. That is one of the most powerful things at WordPress. That's what I'm talking about. From now on, for example, Gutenberg will become Gutenberg. It's a path that we are going to take. The way that editor-in-chief is used and the way that it is used will be a way that we are going to lose as little as possible from now on. That's what I'm talking about. That's what I'm talking about. That's what we're going to do. Of course, in order for an editor to be able to be easily used by people who don't know and the way that they use it, as well as the way that it is used, we will want to use it as it is. That's what I'm talking about. That is a proper way of working together. That is something that we are going to think about. Yes. Next question. Non-disclosure. Yes. The answer is yes to that question. More importantly, So the ability to, let's say, edit direct code or direct HTML. What's beautiful about this is it's existed in TinyMCE, right? It's existed in this block. I can just go to the text version of that block. I mean, I'm sorry, not in the block. In this box, I can go to the text version of TinyMCE and edit code directly or paste code directly, right? What's beautiful about Gutenberg is this actually happens on a block level now. You can go into the text version of just this block and edit the HTML directly. I don't see this changing at all for people that want to add HTML or other content directly within individual blocks. What would be cool in the future would be, hey, why not have an IDE type experience for people like yourself, an integrated development environment? So I go into a block and instead of text, I click IDE. And not only do I get the HTML ability to input text how it is now, right? But I get an actual IDE. I can just directly type, you know, HTML or other types of content and have the tab experience syntax highlighting. I still think this is a possibility that could happen. Do I think it would come into core? It's questionable. But the beauty is it's extendable. So you could always add it yourself. Thank you. I'm only pushing for time over time now, but just one more very short question. Okay. Great question. So this goes back to the compatibility with plugins, right? How are page builders going to work? How are other plugins going to work? How are plugins like Advanced Custom Fields going to work? And the beauty of this question I really like is Advanced Custom Fields has already announced full support for Gutenberg. They already have plans to fully support WordPress 5.0. So those are the types of plugins that you want to embrace. Those are the types of plugins that update over time. We're not going to see this banner on the plugin page that says hasn't been updated in three years, right? They have already announced support for WordPress 5.0. So I would encourage you to look more on that type of support. Is it going to come in a beta feature? Or is it something that is already in a feature and just activates itself if it recognizes Gutenberg is active? But for Advanced Custom Fields itself, we use it. I use it. I'm super happy that they're moving forward with it because that means it's just going to create more possibilities for myself to create content in the future. Thank you. We actually pay all the time, so we're going to finish this off. Please give a big round of applause for more to Justin.