 Thanks All right. Hello. Welcome everyone to the Q&A with Gutenberg team My name is tofu Matt and I just started working at automatic like a month or so ago So I know nothing I'm greener than anyone in this room Which will make me hopefully a good moderator because I understand nothing and I don't get anything so you know No question is too stupid Just so everyone knows we're gonna split this thing into sort of three sections The first one is going to be a Q&A with the team We have I think a grand total of three questions that people submitted beforehand So got lots of time if you have any questions about Gutenberg You can ask them now to this, you know great panel of people after that We're gonna do a little bit of talks about like blocks and plug-in APIs and stuff Matthias is gonna be doing one of those and after that we'll take another break and then we'll Kind of actually build or you build a block or build a plug-in or what's happening both Okay. Yeah, so if you want to build your first block or your first plug-in I'm gonna try to build mine because I've never done one as mentioned very green. I'm getting some feedback But yeah, we'll do that at the end So if everyone on the team wants to introduce themselves first, I think that was the deal will go in this order buddy, I'm Gary I I Work on Gutenberg work on core work on emoji and Yes, not quite know what we're gonna talk about yet, but let's go with the insurance. Hey, I'm Tammy and design need for Gutenberg and Looking forward to this workshop for everyone Hello, welcome everyone. I'm Matthias. I'm the tech lead for Gutenberg Hello, my name is Gregor and I'm a JavaScript ranger walking on the team Gutenberg Hi, I'm a lot. I work on some work Hey, I'm Robert and I'm a JavaScript engineer working on Gutenberg full-time Hey, I'm Josh cost and surprise surprise. I also a JavaScript engineer working for Gutenberg Hello, I'm Ria and I'm developer on Gutenberg mostly I I'm Andrew Duthey. I'm a developer as well JavaScript specialization So if you have any PHP questions, this is the team to ask Yeah, so we only have a couple of questions to start with The first two submitted are pretty much the same I think the first one is kind of a troll question and it's When will it and I assume it is Gutenberg move to core? But the second question is what is the criteria to decide that Gutenberg is ready to be included in a WordPress release? So I think really it's just like When is it going to move to core? What's stopping it from moving it to core? Feel free to answer Well for the first part when will it come to core? I mean we've got three hours now. So how about we do it now? So it's It's kind of it's if you look at the recent releases of Gutenberg then they're They're a lot more stable. They're a lot more about polish and iterating on Existing behavior. It's There are there are a few a few new features still still to be done But it's getting pretty close to being able to say it's feature complete. So I think there will be we're looking at Moving towards like the merge type phase of this in over the next few months. I Would definitely attend Matt's talk this afternoon I Don't want to give anything away, but he might have some more information about that too Just to add to that then the main focus for the the plugin now is to get to that feature free state meaning We think that within the next I know three we are in 3.0 now We have 3.1 almost ready to come out and Maybe around three point three or something like that We can call it that that's it about features and we focus purely on refining the the current experience We can stabilize all the API's and that's kind of the focus right now I don't like a bear estimate around that is that We could get to that feature free state in June or maybe the first week of July something like that and And then we'll see from there okay, cool, so In terms of criteria though is There any concrete criteria is it just you know making sure that there's no more bugs You know what is feature complete mean feature complete with like current editor what just yeah, there's Okay, there's a there's a github issue. That's an MVP issue. That's been around for some time That has some pending tasks It's a Like that there are many many of the final features have arisen from the feedback loop from developers and users So some of the features that were not necessarily planned for v1 Became apparent that they were needed for v1 because they either Improved the developer experience drastically or they allowed developers to do things they couldn't do before Or they sort of connect different areas that and I'm talking about Things like like child blocks child blocks wasn't something that we originally planned for v1. It wasn't even Conceptualized as a thing But within the last four or five months it became apparent that this was both possible Relatively easy to accomplish and it would allow developers to be much more expressive in how they can build blocks and stuff So there's there's a bit of like a fixed set of things that we want to get to And that goes back to the introduction of the project like the block base editing experience But then when you get into the finer details some of those pieces have been moving around based on the Both user testing user feedback and developer feedback. I think we're we're at a point now where There's nothing on the horizon. That's That we still have to get to just to be very brief the remaining features that we consider features that need to land are Like inline images We need to get that in we have some Minor things like post locking if there are concurrent users editing a post Server registration of blocks is not it's already possible. It's not technically a feature, but we need to do some refinements there I Have the least if you have the the issue number Can share it with people and they can look at that at least yeah, it's 4894 4894 I'll write it up here in case people forget. So if you go to Gutenberg 49 48 9 4 Alright, so the answer to your question is there on github Cool. Alright, so we have one more question and then we'll open it up to the floor The question is is there a specific plan to implement customization or live previewing to the new editor experience? Once Gutenberg is in core it says after it's been merged into core Just in general live previewing customization. Is that a plan? So we already have direct manipulation Interesting word to say this time in the morning So we already have that so we have a step on that kind of what you see is what you get road Phase two of Gutenberg is customization And that's when a lot of what people kind of think of as site building Kind of page building more happens phase one is content editing That's what we're focusing on purely as the editor and then it kind of expands out to that But some of the groundwork has already been laid within the first phase And so the first phase also has to include I kind of think it like we have to provide the Lego before we build the house That's how my brain works So we were kind of already starting that in that sense and there's already been some explorations and some kind of prototypes about that work And there's also some issues already on GitHub for widgets to become blocks So that's like a step towards that kind of site building experience Yeah, yeah, and I think that the other So the way the whole process was planned was to have these three phases basically like The editor customization and site building but in reality, it's more like a continuum and For example in Gutenberg, we already have access to templates. We have nested blocks all elements that were Primarily the foundational blocks for customization They are not being I mean we have a columns blocking in Gutenberg. That's been experimental for for the most part But the main driver was to have the infrastructure necessary to support those kind of things because those are the Necessary building blocks for customization So in a way it has already the plan was to overlap the different Focuses and there's already many elements of customization that have been trickling in into the the first version The proper focus into v2 is going to be to just expand beyond the post-content area Cool Okay, so those are the only three questions that we had pre-submitted Gonna open the floor questions. So Anybody here who wants yeah, first of all, you need a microphone Please speak into the mic because otherwise it won't get recorded into the AV setup. Oh, thank you And to encourage you to ask questions I will be giving out one Gutenberg sticker for every question Just one and if it's a bad question actually you won't get it I said there were no stupid questions, but if everybody looks now, I'm just talking anyway. So question right here Hi, good morning. So the the whole Gutenberg approach was for many users kind of radical because when the new editor was announced everyone was thinking about replacing tiny emcee and What the team eventually did was now like now we're gonna replace the whole edit screen and Why did you do that? What was the problem you tried to solve that made the solution so radical? So I kind of got a question first of you when you say users What do you mean by that like what to type of users because I think that's important when we use that word We have to be a bit Specific because there's a lot of different people that use WordPress in a lots of amazing different ways so I think that that's kind of interesting to kind of think about in this terms and The the level and a lot of people don't even know that tiny emcee exists to them see the screen that they write in That's all it is But we also then had to take a step back If you think about a lot of the experiences beyond WordPress WordPress is amazing But also there's a world outside WordPress and that world outside WordPress doing Some pretty awesome things with apps and with editing and we don't have that as As an ecosystem WordPress we kind of have it a little bit with site builders But what we're doing is everybody is having to build on top of this foundation of WordPress that hasn't really changed and hasn't really Adapted to all this stuff and amazing technologies and moving forward and experience improvements outside of WordPress So that really is the crux point We have to change to go for the next ten years WordPress has to adapt has to become and has to have all these tools and experiences that people can build on top of and Really that's like at the heart of it And that's not just for the the users that know that tiny emcee exists That's for every single type of person and human human is a better word than users as well Who interact on different from enterprise who are doing incredible things that have to stick Things together with WordPress like Django because they have to work around WordPress and developers You have to develop the WordPress way because WordPress gets in the way of them developing So that's kind of I think we kind of need to have that thought when we kind of approach it. So Radical needs to sometimes happen to move forward and Also, we have to kind of go back to the foundation to look at to Respond to what's happening outside Yeah, I completely agree and the the other thing is that when The first time the focus was announced by Matt in World Camp US like almost two years ago it just mentioned the editor and To Tommy's termed like to regular users the editor is the whole screen in which you're editing I think it was more of a internal WordPress confusion that that we say all the editor is just tiny emcee also because if you like This project started two years ago almost But it's it's like it's a long tail that started with I think it was 3.6 the post formats Like when we started to revamp the interface around post formats in core that was touching the whole editor as well Like it was adding like a tumbler like experience where you would choose which format you would start with So it's always and and that process ended up in the notion of maybe what we should do is something like content blocks And that was left at that like in 2012 or 13 But it was always touching the whole interface because One of the main problems that Gutenberg seeks to solve is that in WordPress you have too many ways of Doing things and affecting the content of your post And that's not always intuitive and it's not consistent. You have things like Shortcodes tiny emcee plugins meta boxes. There are many meta boxes that are used as blocks effectively You have like these slide shows for the header area of your side That's a meta box like there are multiple ways in which developers have find ways to do things at WordPress Natively wasn't really optimized for doing through these avenues. So we were pressing many ways was already doing blocks It was just in a very cumbersome and not very intuitive way So sort of aligning all those items under a single interface was one of the main goals and that requires looking at the whole screen Especially because we want to boot we want to move forwards to a more Fully visual experience as representative of the full site We can't do that in the tiny tiny emcee window like we have to look at the we have to make the content The front and center space for all of those things to happen and and also to stimulate the imagination of developers when they have the canvas and they can build blocks as The front and center piece of the user interactions I think we're already seeing from multiple plugins that there are many cool things that are coming up That weren't really possible before because you couldn't rely on the either the the interface wasn't even consistent Because you could move meta boxes around some people didn't have the right sidebar meta boxes It was just every setup was slightly different. So it was very hard to optimize for that experience Also, if you like the very first mock-ups that yo and release already included the whole screen So I think it was yeah to just to answer the the point that he was just a Confusion in how we interpreted the terms editor at the time But but I think it's come around quite a week. I think people have realized Why it makes sense to think of the whole experience holistically and not just in terms of what's the rich text editing feature that's power in this tiny window Cool next question hands up one over there And and thanks for the questions Hi, thank you. Good morning. Um Qt maybe walk us through what actually is gonna happen when we're gonna flick the updates which to 50 So what what does have gonna happen with the with the content with the existing sites? Stuff like that. Should we be afraid that everything is gonna break? So I think there's there's a few things there so when when 50 is released so it for starters It won't be an auto update It's currently not possible to auto to first to even push out auto updates of major releases so it's not like you're going to wake up one morning and there's a New put new present on your website And good morning. He's a completely new editing experience. So it's it's certainly a case of Particularly if you if you have more complex sites that you can You can take some time to ensure that If you have a testing site, then it's running on there before you then apply the upgrade to your production site But it's also the case of to for existing content Gutenberg the block editor won't It won't go and change all of the content on the site It's just your content will just continue to exist in the database as it is when you then When you open a post in the site When you open a post in in the editor, then you'll have the option to convert that to to the block format and then And so that will then work in the in the new in the new block editor way, but Even then if it's if it doesn't quite work, then you're able to fall back to the classic editor as well right Cool, so it sounds like Content itself doesn't get changed just the editing experience by default. Okay next question over there Can can I add one small thing to the I wanted to find Now we went to great lengths to make sure that we introduced the notion of blocks without altering how WordPress deals with data Now that was in part to make this transition as seamless as possible. It's what allowed us to we it's almost It's literally a year since the first version of the plug-in and through all that process people could even install it And if they didn't like it, they could have installed it and it didn't change their content structure So that was that was very important to make sure that this process was possible And it's one of the corner stores so that we can allow people to upgrade without Without fragmenting their their content structure. That was one of the main main goals of the whole project So Yeah, very quick just a short question Sorry, I was just gonna add one tiny tiny tiny thing To answer because you said should people be afraid I think it's important that there will be lots of information About this so it's not going to be something that's said. It's just gonna appear. There will be information there will be Posts on make there will be other information resources We're gonna as a project really make sure that everybody knows what they have to know and then can make that decision and Kind of move forward from it So I just want to respond to because you said afraid that's like a position. I just want to kind of respond to that for you Okay, thanks Just a short question When Gutenberg is finally integrated and when you have all the options and features and everything Do you think it will actually kill some of those page builders and is that some kind of intention to? You know bring Visual builders capabilities into WordPress So I'm just gonna quickly and then I'll pass it I Don't think we should be doing that to anything and the way that I see it is As I've mentioned providing an awesome base that then Depending on what you call page or site builders There are two terms that you ask the same people that have different responses to what they mean But all of those type building type applications theme or plug-in They're gonna be able to see that as a springboard to just go and shoot for kind of the moon with that and that's the exciting thing I see it as Enabling them to flourish and get even more capability even more awesomeness From it rather than changing it like rather than removing them There will be a base level within WordPress, but there's always going to be a in the core product There's always going to be space in that environment for experimentation for different ways And and that's what makes WordPress amazing. So I don't see it as not having that type of thing around I see it as enabling them to just be even better than they are and For everybody to benefit from that Yeah, and we've been in chat with many of the page builders people and it's been it's been exciting for them as well because they Like they've taken upon themselves to solve something that WordPress wasn't providing But ideally they wouldn't want to be solving like some of the fundamental problems Ideally WordPress would provide the common framework for these page builders to exist I think there's totally room for people that say no I think this interface for editing block is better than core or I But I have a more like niche approach and for this kind of user I think this other approach is better But we can still be sharing the the the foundational block and make sure that the user which is what matters the most That they are not locked into a different page builder and they can move around if they need to and that we can support them for like the next Decade or two or whatever I think that I think that's super important I can see some page builders feeling that they can focus their energies on things like building blocks or Building very specific blocks that they they have a lot of experience in how the And how their user base what are the needs for their user base? So they can probably refocus some of that effort in some of those areas Also also around themes like they can a lot of the page builders started from theme shops like they can maybe they can refocus their energy on what sort of put them there in the first place which Is a the whole visual aspect of the whole site experience and ideally that's something that unifies the different page builders? We can share the same The same structure for blocks It's it's going to be a portable mechanism if you switch themes you won't be you won't be losing everything that you did That's that's kind of the goal. So I think it's very complimentary I don't think I don't think they will be going away But I think they they will have a chance to to avoid many of the pitfalls that they have which is the content lock-in primarily Cool next question Back there Hello, I was one wondering if we could have a rundown of The initiative we have in both code wise and training wise on how to enhance adoption of Gutenberg once it lends in core and when I see it's released I'm meaning this both in terms of users So what they are going to get when they get a new interface and both for developers? How can we help developers get? Experiencing with it. Thank you So I think we're we're already starting to see it in the wider ecosystem already there are a lot of a lot of courses and tutorials and And that kind of thing that of the people have been creating in order to in order to help you Learn how to do these cool new things There's also the The WordPress training team have been working on some on some training material for to help at word camps and For people to be able to do To do these sessions there we're working on tutorials to free tutorials to be able to learn how to To build to build new content, but also to take your existing Existing features your existing plug-ins and themes and to convert them to work in this new This new blocky way, so it's certainly training material as an important part of it and also once for for the people who are actually Using the using the site and creating the content It's certainly it's a new experience, but it's still it's familiar and I think we're we're also looking at a ways to To introduce people to this new to this new experience as well So within going back itself. We've got something that I think it might come in the next release Called tips, which is an attempt to just start to answer the new user experience problem It's Experimental and that's part of Gutenberg. We just we could be trying something We have that freedom within a plug-in to try something see see what the feedback is and Basically in the really small form. It's just a little story walkthrough that says hey, this is the publishing flow This is what you need to do to add a block An advanced version of that which is being proposed and we possibly as a project might work on is To have I don't know if anyone's ever used like Vimeo or anything where as you're using it little tips of hey You're using it in this way. Have you thought about doing something like this? There's little I couldn't like helpful nudges There's kind of little Advances that as you learn you get better at using that interface. So that could be something explored Potentially and we have the groundwork to do that that also can then translate to WordPress as a project because WordPress itself Anybody using WordPress for the first time. I don't know if you've ever experienced someone using it for the first time I mean you did as well, but that might have been a long time ago But as she watching someone for the first time There's a Bermude's puzzlement on their face as they're trying to navigate the way through the things that we all appreciate and we all Understand so just been able to have that that little Story nudge and that that guide through is a way that we can work with Gutenberg To really try and make a welcoming interface that is something that can be picked up as well So that's kind of several approaches one. We have The training we have also that that education. I know the marketing team are working on even approaches of how to agencies That kind of say this to their clients all of those kind of discussions And then we also have within the interface itself trying to have that guiding that that welcome as well Anything else next question Back there How do you see the nature of a theme building changing with Gutenberg? I'm gonna start but I've got a feeling that everybody's gonna have an opinion on that which is awesome So I'm gonna start from a personal place I would like personally themes to get back to doing what they're good at which is being themes not trying to be everything And that's kind of what we've had that that working around WordPress We've had to do that and themes have suffered at the hands of that practice that we've had to do themes really Amazing at styling the front end. That's what they're amazing at and also providing an editor style So that you can have that near what you see is what you get experience So we have that within Gutenberg We have the ability to bring those styles from the theme to the kind of visual editor itself so that's kind of What I I mean where it goes is what happens when when we release something where the community adopts another aspect that I've already seen is Releasing a suite of blocks with a plug-in which is a really exciting Kind of potential way forward. So you would have a theme maybe it's for a certain type Maybe it's for a type of business and then you would have a suite of blocks that go with that So you get that kind of capacity. It's not putting it in functions. It's not putting it in custom post types It's having those blocks as well. So there's a lots of kind of exciting I also see it more going in the sense of a style guide Which is something a lot of people already do with agency work and really having that Reflected within the editor itself and themes just being a lot lighter as a result of that so I think As far as so well at say to the word yet last year Matt was talking about the the three phases of of Gutenberg content the content editing customization and theming so It's certainly I can see there's there's potential for Significant changes to theming, but it's important to remember that as with everything with WordPress backwards compatibility is critical so Existing themes will continue to work will continue to function. You'll still be able to build themes that way, but there's with this It's a time of renewal with this building this base for the next 10 or 15 or 20 years of developing WordPress then We can also look at what what would happen if we were to redesign a theming API from the ground up and as Tammy was saying letting themers focus on Building the theme rather than needing to needing to care about Laying out all their PHP files right and getting getting all of the strange pet all the all the theme tags and what have you laid out so I think providing that So creating a new API is certainly potentially on the cards. I think it's a little bit early to To be saying exactly what that will end up like but There have been some there have been some experiments and certainly once once they're a little more fully formed I expect that will Will be seeing more discussion of that in the in the wider community But as as always these things are kind of open for open for discussion and open for input At any time okay, Matias seems to want to share his screen and show us something So now I was just trying to know what Tommy was mentioning about the tips with the question or two before Okay, that's kind of that's what's going to go in the next release And it's basically a system to sort of guide the users through the interface and it should be extensible as well so we can That's Cool next question Back there you next I promise So my question is do you think in any time soon the the Gutenberg editor will replace the Customizer so the next phase of of Gutenberg's After WordPress 5.0 or perhaps a little bit there'll be a bit of crossover as is looking at what the What a block-based customization experience would look like so Part of that will likely involve replacing the customizer but Interestingly, I think that in terms of particularly in terms of backwards compatibility It would it's potentially a lot easier that customizer being JavaScript based having Having some more modern cleaner APIs to it will will potentially be easier to Take where you exit where you already hook into the customizer to add functionality then it's potentially something that could be Look straight into whatever a good customization looks like rather than needing to rewrite Rewrite so much certainly it will it will be a case of the best experience will will involve Will involve updating your updating code to match the to match the new style and the new new designs, but it's It's a thing that I think we can do a lot of work to smooth the transition Up here Hi, my question is about the columns block, which was introduced recently There is I think a still open issue on github about the fact that this is very useful for you know advanced layout options However, it's not responsive and it's not clear to me What is the direction in this in this regard because pretty much any other visual builder? You know fountains on having the possibilities to have multiple columns and decide what happens at different break points So what's gonna be with that? Thank you Thank you for your question and hi I Think it's important to step back a tiny bit and say this is the phase one of the editor And I think it's it's so because it's also quite fully formed, right? It's so to make that assumption that we need to have everything working in phase one It is something we maybe need to kind of Change a little bit. I will say with columns It really is Experimental it's been flagged as that because we are as a project and as I say we because it's also the feedback That's given of really adapting and learning about where that goes and that's That merge where there's a flow easy interface to that. That's one of the aspects that kind of flows in there Gutenberg as a whole is already better across different devices. It already adapts much better particularly from the experience then We've had before within WordPress. That's great and we need to build on that We cannot be releasing as a project WordPress itself cannot be releasing something that doesn't respond to different devices. I Think we need to stop thinking in terms of break points though We need to be thinking in terms of adaption and not fix points that you happen to say Oh, if it's this thing it fits here if it's this thing it fits here It moves and it dapps and it's and it morphs more That's why use word adapt rather than responsive or break points because truly adaptive means that it will change to be The right experience on that device rather than it just meets the break point and then we squish everything into that break point But there's something going on the screen. So I'm gonna pass to the microphone this side Yeah, and the so the columns block was We originally didn't plan to have it in the first version I was mainly a way for us to build the infrastructure so that any block right now the same way that the block columns is built any Any third-party developer can build their own blocks and have their own nested areas and that was the main goal That's why it took it took a lot of work behind the scenes to get to a point where there's nothing Particularly custom about our cut our columns block is mostly to get the infrastructure so anyone can build them It's we also did in a very flat way. So you don't have column wrappers which makes it harder to make it Responsive there's a poor request maybe today later on in the workshop. We can look at it That's actually adding wrappers to columns It should be I Think it should be easy to to get it to a point where it can be completely responsive But again, we have been focusing mostly on infrastructure so that we have both nesting We can drag and drop things in and out of the columns and not so much on the actual up front and Display of the columns yet, but it but it should happen. I don't think it's too much again We have called it columns beta so that so to set the expectations that it might not make the cut for v1 But it's I mean I'm personally pleased with how the infrastructure went and I think we can build like Many different variations on this. I think there are already some some people building their own like section blocks that have this Kind of column areas as well And and that's that's been kind of the main goal to allow people to to build this for themselves too Yeah, and of course, there's always tables if you need something responsive now So and you can you can you can even put tables in your columns if you want. Yeah Next question back there Hello, I guess this is for Tammy. I'm a designer and I design for WordPress and My designs then get implemented so they've They're not theme-based So I was wondering what you think is the Main changes that we should have in our design thinking while we are designing or when we are presenting So obviously I know WordPress Inside out in a design sense that when I'm presenting to clients I can Talk about the futures or why I've added a I don't know future post section or whatever sort of thing So what what is the main freedom that it gives do thing the designers and the The main leap from what we have now Thank you for that question. I'm gonna try there was a lot in that so I'm gonna try and answer No, we can have a conversation. So if I don't answer it fully Let's like you tell me what I didn't answer and we can kind of have a conversation. I Think So it's a very kind of personal thing that I think you both provides as well as a designer And I'm really excited about going to more of a component that something as designers we've The design world has moved into and and also the development world has moved into So it thinking of breaking things down into reusable components and pattern libraries style whatever you kind of Direction so I think that it provides that I don't know if you already work with pattern libraries and style guides if you already work that way Then continue that because I think WordPress is going to respond better to that now if you're not Start doing that start. I worked with freelancer. Well, and that would be my approach now I would have a pretty robust pattern library that I would fall back on So that that would just be kind of like my note point I would say there's there's more unification of the interface of WordPress And that's been something so frustrating from a design aspect. What does this do? Where does this go? You learn one way of doing something in WordPress and then maybe a plug-in or a theme changes that so it becomes a completely different way so from Teaching someone and from designing around it. It's like a leveling of interface So these patterns and the hope is that we will as a project move those patterns across Not just the editor where we're going into customization, but we have an opportunity to stop the confused Interactions and stop the cross patterns and really just provide a better base of design for the whole Ecosystem that then we can benefit from I Would say start thinking about block design would be another Exciting thing again get falling back because I'm just trying to respond to your kind of situation if I was still freelance I would be working on a suite of blocks that I could use across different client sites I used to focus on community design So I used to build a lot of had a buddy press sites and and that would have very specific blocks I would probably use across multiple sites So I would do that have the structure of those and then I would be kind of looking at the design aspect I think it's really exciting because it means that we can embrace all different types of designers within this project as well we Yeah, so did I answer or is there anything else because I'm happy to have like a bit of a conversation here You are welcome and you can find us Remotely as well. So it's a big building if you don't find me now I'm more than happy to discuss over the next couple days But also just come this is kind of an important thing the core editor channel is not just for developers It's also for designers to come in and also on make.wordpress.org We have a design team so come and join the design team on the Slack channel as well and Also come into the core editor and ask design questions because then I get really excited because then I can talk to you about design Now to switch gears, of course I've noticed that like all the developers on the side haven't had to answer a single question I'm very jealous of how much they're going to kick back So anyone who asks a development question which requires one of them will get two Gutenberg stickers That's the deal next question though is back there right there. Hi Thank you everyone and actually I have a little general question like for example for developers I don't know how it's gonna how the Gutenberg is gonna affect the way team developers trying to display content if It's gonna affect it all. I don't know How we are going to query and display content on a page Thank you So do you mean like as in how does a theme Builder style the blocks then is that what you mean? No, I mean If I Design a page for example before Gutenberg. It's most of the time. It's we have a pre-designed layout of a page And Gutenberg has a lot of possibilities. So how it's gonna affect The way I'm designing with the way I'm Actually, maybe we can talk about that it is going to affect the way I'm writing markup. I don't know No, I mean out of the box Gutenberg In its current form is more of a content editor. So It's not any different Fundamentally than a post that you would create in the current editor so far as it generates HTML which then shows up on the front of your site in wherever you use the content tag as far as like capabilities that you are given as a Theme designer theme developer to want to put some more restrictions on the types of content or the layout of content We have options already in place for Predefined templates for example. So if you have a custom post type or even for specific page layouts Maybe you can define a Set of predefined blocks. So as a user coming on to the editor for that post type They already see a bunch of blocks there. They just have to start filling out the information Which is really empowering for you as the theme developer Because in your mind you already have some idea of what you might want that page to look like and you just Want an easy way for the user to enter the information into the various areas on that page and I could I think In one of the future iterations, maybe not for v1, but is multiple page templates So when you go to create a new page or new post, you know You have an option of six different possible layouts for that page And then you you click the one that you want and fill out the information press publish and the it's already on the front of the set and Again, this is just this is just markup the same post content that has already existed but With this concept of a block and the markup that it produces It sort of comes out of the box So, you know columns already lay out in specific areas which as a theme developer is kind of hard to Provide for a user to do, you know columns layouts without really complicated shortcuts for example Any more questions we got time for a couple more so I'm gonna probably very quick Matias very quick Yeah, so the the main thing for theme is that the rendering engine is not changing like it's still like whatever you do in good Timber the theme doesn't have to do anything for that to be displayed Things can hook into that and completely change how blocks are visually displayed Can I enable the screen? Yeah, can you? To me that the biggest thing for theme is that you can start thinking Kind of like what Tommy said to decompose the your theme into these Individual elements and then for instance something like the author Think you can let the user edit this directly But at the same time you can protect that it's not easy to break this like there's no I can even like if I select the whole thing I start selecting the entire blocks so it's this provides the theme It provides the flexibility for the design to be as elaborate as you want But allow users to edit this and be very intuitive But at the same time protect the markup and make sure that the user cannot Cannot break the design and then have to call you again to say how can I fix this because my HTML is a mess So it's that's kind of the balance that we're trying to reach is to Expand the possibilities for things to express these more elaborate design elements while giving users the ability to I can Also change the image here directly To do these kind of things very quickly and without ruining the design or without having to learn how to manipulate the markup And right now we're just focused on the content area But as soon as we expand to be the full theme You can imagine everything from the site title to the header to the menu system All of those pieces are can just be constructed as blocks and that allows you to express a theme as a basically a list of blocks with nested areas whatever but just as a list of blocks and And you will be able to choose what's editable. What's not what can be locked down what can be open to the user So that that's where I see the themes going to Okay, next question. Oh my you got 10 seconds. Okay. Whoa pressure That facial expression that was saying when someone first loads WordPress placeholders is an answer to that if you rather than having just this white page of Cuzzleman as soon as you open up an editor you had placeholders loaded that suddenly becomes Monumentally much more easy for someone to understand and engage with and as someone that's made themes That's super exciting that I can provide that experience for someone So they don't just look at something and freeze and not know what to do They know what to do because there's the author avatar and there's this type of content And there's these placeholders and there's these awesome information that says hey upload an image here So the page starts having a conversation rather than a confusion Next right there Hello, first of all, thanks for making this awesome piece of editor So as a user, I never thought that this is something I always wanted so I'm more than happy to see Gutenberg and I can say that I'm patriotic and religious to it and As a developer, I will again thank the development team. I was a PHP developer four months back now I can say I am a JavaScript or React developer. It helped me push my envelope The question I want to ask is like every morning when I go through the slack or get up channel So your team is busy creating Gutenberg and world that I would want to convert into like another visual composer or something So I just want to know your reactions because when I see that I'm like I want to find you and I want to hug you Thank you So What's the question? So question is what is your action because people out there just want to convert into visual composure dv or below They are not looking at the Gutenberg as Gutenberg. They're not trying to see what is coming Because I see Gutenberg as a tip of an iceberg like there is a lot that is coming people don't see that So what would you like to convert to those people? I think this is more of Something that goes beyond just the Gutenberg team is more as a community how we reach to those people how we engage both the page builders into like seeing if this is a How can users become more like what one of our biggest challenges now is that Gutenberg is mostly known within the work camps systems and it's if you look at the plug-in downloads I think it's like 15,000 or something like that So we need to expand the reach beyond just the people like even like how many people know that something like Gutenberg This is a very narrow Amount of people that follow the WordPress development channels. So this is more I sort of Turn the question back to you all to the shoe So so my question is even if people are like there are people who are actively into the development and all they are So I see even of the pull request they end up saying that okay visual composer can do this So why not Gutenberg? So it the question always everything turns around those existing page builders. There's always a comparison Well, I mean this this really goes back to like the the V1 thing that Tommy said like we have to put a stop into The feature free so that we can release something and actually get to those users that are not going to be following all these channels At the same time, it's Anyone is free to open a pull request to submit an idea if they were inspired by visual composer or by beaver builder And they have an idea for a block or something else Everyone is free to open the PR We have a lot of I think we have like 180 open pull requests not all of those are going to be merged But sometimes they are just sharing ideas sharing how something could be done maybe in the next version of Gutenberg So it's I mean that that's a very flexible process and we're I mean we just need to be conscious that at some point We need to launch and and we also need to be conscious that the longer we delay these the more Potential users of WordPress that are not going to be choosing WordPress because it's too hard for them We're going to be losing all those users So we need to be we need to make sure that we're not just for the sake of having Everything we can do that we delay the project too much and we lose the sort of momentum Because also it's a lot of these things solidify when real users start using it and you get that feedback loop and you can sort of make maybe some of these decisions weren't the best ones and we need to change some things or maybe the like 5.1 make some revisions to the experience based on the Massive amount of users that we're going to get once we launch it to to everyone So we have to be very Very aware of that the process for building this kind of product is very dialectical We have to go to the users and back all the time. So we don't want to restrict it too much into the Like the development channels where we are now where I mean we could be there forever if we want to like just build bringing all the ideas from all the different page builders and But it's again, it's totally open for people to submit ideas I think it already happened with Some people building their own blocks and then submitting things that this could be in core or this could be like it's it's a very I Think it's a very encouraging moment for new contributors to come on board like designers as well It's it's it's a I think it's a very ripe opportunity for for doing that and figuring out what should be in core What shouldn't and what how the next faces would look not sure if that answered the question, but okay We have time for one more question. No, we're like running. So like I'm just a quick one You don't hear many people who aren't developers saying could I have visual composer and I think that's important to remember And I'm kind of underlining that point that we We use a lot of terms right in this room and we've used them today and as a project and The slack channel for core editor is not accessed by a lot of people that day-to-day Write content with WordPress and we have to remember that we're not building just something that If I was building just something might for myself It wouldn't work for Matias and it wouldn't work for Gary because it would be working exactly for myself And it wouldn't work for anybody else on this panel, right and it wouldn't work for you So we have to be thinking not just in these terms of thing and we have to understand our headspace is the word I is understand our interpretation and kind of come with that and respond with that So last question back there, and then we're gonna have to take a little break. So right there. Yeah Yeah, hi I've read this book a resilient web design. It's from Jeremy Keith. I don't know if anyone knows it Who'd advise it for everyone and he talks about the history of the web and how it's it's it progressed and hide This progress was possible and he talks about backwards compatibility like browsers If you have new HTML elements, the browser won't break If you have CSS markup that the browser doesn't know it will just not just neglect it and go further That was one of his points and the second point was that it was very easy to start To build a web page And I think WordPress is very much aligning with these principles But I don't think that creating blocks is very easy having all those workflows and build processes It's not my favorite thing of about this so Also, you mentioned redesigning the the team API maybe How do you think so my question? How do you think that? Gutenberg will affect WordPress popularity among designers and developers and It's general popularity as a Yeah flown from this So I I absolutely agree that that adding adding build tools and and Moving to these modern these more modern development practices can make it more complex and certainly With with good with like the Gutenberg plugin as it currently stands and then also some of the changes We've made in WordPress core as well in preparation for Gutenberg. It does Make it harder to To build things there But I think the issue isn't so much that we're moving to requiring these build tools It's that the tools themselves are not friendly the the tools provide Enormous benefit if we look at the history of Developing desktop applications and mobile applications that they've only ever used build tools and if you're if you're building a Building something with with visual studio or an Xcode isn't a great example, but it's okay and The the Android what's the Android? Android studio Android studio is quite good. And these this is because they are they're able to draw on a long history of of building of Enabling a wide range of people with a wide range of skills with developers of designers to build these Fantastic apps and so but we don't have that so much in the web the web world We saw a bit of that years ago with With net where when Microsoft came up with net, but it's never it never really caught on however with with this with this move to using JSX and Effectively compiling JavaScript into an application Where we're starting to require these build tools and that gives us a whole lot of advantages it makes it we're able to write Writing the code is easier once once you learn how to do it and Once there once the tools are set up they can be invisible so That's that's something I've been thinking about recently is How do we make it so that if you're if you're not interested in in build tools, which I don't expect Most people are I'm kind of a nerd, but they're but that's It's not something that anyone should really care about how to configure Babel or web pack or anything like that. So We should be able to provide a way for people to just Whether it be and whether it be an app or whether it be a like some pre-built templates that you can simply just use them and go so yes It is it is a step. It is a hurdle to to kind of start using build tools instead of Instead of what what your existing process may be But it's one that I think is valuable It's worth taking the time and it's also a step that we're able to that we're able to ease that we're able to to make it Not not to not only ease the difficulties there, but even to make to make the process easier than it is now Yeah, I just want to add that the Like Jeremy Keith point is very dear to me It's also why the like the foundation of blogs is really HTML and that's been a very contentious point but it's I think it's a bet on the longevity of the web format and optimizing for the user and not for Whatever is most convenient for us developers at the same time that it's important to consider that the The block structure is really a spectrum like you would have people that are writing complicated blocks and might need their whole build system Like if you look at Yoast as a plugin, they have the resources. They have complex needs They they might need their own build system But it from that point you can also consider like you can I mean you can just write some HTML in the in the editor now and I'll just do it quickly Yeah, you can just write some HTML and then you can say oh I want to turn this into a reusable block and then this becomes something that I can name I can This is my marquee block and then I can use this throughout So basically I've created a block here without touching code I can use this in any page and this will just work I can It's you can create any numbers of widgets this way just by using HTML. I still think that There's a bit of an overestimation that HTML is easy for users to write But I think again, there's a spectrum. It's much easier to write HTML than complex JavaScript So I can totally see a lot of people just you can set up a site for a client and create a bunch of blocks on the fly Just by writing HTML and converting them You can do whatever you want here because it's just HTML and then just make them available Name them properly and then when you go to the insert or the user will be able to to find all these blocks here They can preview them all of these are just HTML blocks that have been created and I just have a lot of mess here But it's like and you can preview them here and this is just Again, so it's a very trivial way of creating blocks that doesn't get into the build system and Expanding a bit on that towards what Gary said I think there's also an opportunity for having like an editor for blocks So basically you will be able to use like a visual editing experience where you write blocks and you're able to export them as plugins Different blocks be able to reach out the mobile apps which has been really hard for WordPress developers to do So I think there's a lot of opportunities for her that really wide spectrum from the super complexity of contributing to Gutenberg itself and Writing these complicated blocks to all like being able to allow a theme developer to quickly come up with a new layout Package that up as a block and export it without having to deal with any build system All right, so that that is a question that will lead into the next section Well, Brad wants to go really quick though. Yeah, I want to add the small thing about that So in Gutenberg we use a lot of buzzwords like in JavaScript like react Redux Bible or webpack and stuff like that this can be like maybe frightening for people like at first but Hopefully in the next part of the workshop we will see that Everyone can create a job without requiring all these tools and and step-by-step like go into details about creating blocks and hopefully it will make sense after that and That's it. We'll see like on the next part. Cool. So that's gonna do it for the Q&A Said took a bit longer than I thought but that lots people have questions Maybe take five minutes, you know stretch your legs walk around whatever come back in five minutes And then yeah Matias is actually gonna give an intro to the block interface and Jorge is gonna talk about the plugin system So that'll be in five minutes at 11. Well, technically be 11 23. We'll say 11 25, but come back in five ish minutes Thanks Okay, so then maybe you're more familiar Our plan now was to we had basically two areas to start exploring how to build blocks and share some of the some of our examples and then move on to building other plugins There are not specific blocks, but extending the rest of the editor interface But we really want to make this as interactive as possible. We have enough people to go around the whole room So if you have ideas for blocks that you have tried Actually, like if you can whoever has tried to build a block already if you can raise your hands Cool so a decent amount of people so again, it's like we don't want to make this like Just a presentation. We want this to be an actual workshop so we can Sort of rotate around if you have ideas or suggestions and you like we'll start with some examples ourselves But if you want to raise your hand and then say I was trying to build this is this the best approach What do you think about this other thing? That's the kind of interaction we want to go through And before we dive straight into the Into the the the block examples I want to give a sort of overview of how we how we think about blocks and how the API came to be There's a very important distinction in blocks between the what's the edit interface and what's the save interface and This is a this has many implications Not just technically but also in how we how we conceive of blocks from a design point of view Because it's what we're trying to do with the edit and save interface and to be clear For those that haven't built blocks when you're registering a block You have to define how the edit interface in the editor is going to look and behave and you have to define What's going to be the markup save and render finally to the to the end user and those two things are inherently separate Like some very basic blocks like a separator is just an HR in the editor and just an HR in the front end But it doesn't have to be like you could imagine the separator having a resize handler So you can make the separator line wider or you can I don't know have hooks to change the colors or change the style Like there could be more UI in the edit interface and what the final result would be So we want people to start thinking about blocks from the point of view of how users interact with the content And not so much from the old short code mentality, which is okay The edit interface is just going to be a text instruction to say the short code type some attributes and then Where we put most of the work is in the rendering mechanism behind the block We really want people to focus on the experience of how users Interact with the content an extreme example might be the gallery block where the markup for the if you look at the block In in core for a gallery There's a lot of different elements like the the final output is very simple It's I think it's a deal with some figure elements and the image tags but in the edit interface you have you're able to Remove images to add new images to change the columns to change You'll be able to drag and drop to reorder the images and all of that is like It's a completely different Interface than what the final output would be So just just keep that in mind as we walk through is to think about What are the possibilities or what's the best way for users to interact with this content? And that also leads to the other main point of Gutenberg, which is direct manipulation It's very we've seen it already that it's very easy to think of blocks as a Static preview and you have most of your attributes in the sidebar So what you like you just have this preview and then you go to the sidebar and you manipulate you enter the attributes And that gets reflected in real time But that's not what we want to optimize for we want if you have Attributes text titles in the block itself like the author block I was showing that that should be directly editable in the editor like as much as possible Should be happening on the block itself because that's where the cognitive burden is the least for the user Because they just see the text they edit it they see a placeholder for an image They can drag an image there and just have it working Some some things do belong in the sidebar more of the like advance attributes if you want to add a class name So there's still room for that But I think it's very important for everyone to think about how can we consolidate all the functionality in the block itself? Another example is caption fields for images. It could be just an attribute on the sidebar, but it's better if you just Bake it into the block itself so that when the user selects it they see oh There's a placeholder here for a caption and they immediately know where the caption is going to be rendered because it's Visually in context with the whole block So yeah, that's that's about it and we'll we'll start walking through some of the examples And again, we want to please if you have if you have ideas or or something It's not clear or you want to share an experience raise your hands and Yes We work with Bigger companies that have a lot of employees a changing content And I was wondering if there's a way to freeze The flexibility. I mean Gutenberg is great because it's flexible But is there a way maybe on on user role a level to say, okay This is a template that we're going to use and create a blog page or a landing page or whatever. Is there any Is there anything coming when it comes to that? So on one hand the templates definition that you can register for Gutenberg already support locking you can lock in So that people cannot add new content you can lock it completely down so they cannot even reorder their blocks They can just edit the blocks themselves There are some issues about how to lock individual blocks if you want to I mean a very if you're just creating custom blocks and you don't make the field editable That's locked. So it's that's another way of handling it But it's we can probably show some of the template stuff in in a bit Do you have something ready for templates there? I have