 My name is Zach Torell. I'm going to talk a little bit today about how We've adapted a fairly big premium plug-in to Gutenberg It's a journey. I'm going to tell you about that journey some of the some of the highs and the lows Go through a bunch of that Little bit about myself. I'm currently the director of products at modern tribe I've been using WordPress since 1.5. So that's 13 years WordPress. I've Quietly been in this community for many many years. I attended the second word camp in 2007 back when when this was a much smaller community But I've been in this space for a long time across a few different companies Modern tribe itself if you're not familiar with us We are a digital agency and a products business our agency does big contract projects for brands, you know Our products business is most famous for the events calendar We also have a fairly heavily although declining because of core functionality image widget plug-in and an event tickets plug-in. I want to talk just very briefly before I go too far into this slide I'm going to talk a lot about this particular journey. We've been on with Gutenberg, but These 12 people are are the team that I currently have at modern tribe who are focused on Gutenberg They've got other things on their plate. They're doing other things, but really most of the work I'm going to talk about is their work It's it, you know, I'm going to show you some sketches of some designs that we've done Those aren't my sketches. You're gonna see annotations on those. Those aren't my annotations This team has been doing some really amazing work here And I I would feel really bad to take credit for the effort that's been done there I'm the director of product. I'm not doing as much hands-on. That's primarily these fine folks here All right briefly the events calendar the events calendar is the most popular calendar plug-in on In the WordPress ecosystem anybody use the events calendar in the room. Yeah, I'd love to see all those hands. It's fantastic Yeah, we currently have 600,000 active installs. There's certainly bigger plug-ins, but we're really big in the space We've been doing it since 2010 And so insert Gutenberg Gutenberg is you've heard a ton about it over the last couple days Not couple days a couple hours many hours Gutenberg is a needed disruption in the WordPress editing You heard you heard this morning in the in the opening keynote the discussion about About that part of the journey and why it is needed and why they're doing it at modern tribe We very much agree One of our partners read has been speaking at word camps since like 2014 at least about how How the WordPress editing interface really needed to evolve and take on the next step and act differently We have some internal stuff that we use with our agency customers that actually is very similar to Gutenberg We were very much waiting for this and hoping for this and realize it was needed I don't think I have to talk much in particular about the specifics about Gutenberg works because we've seen so much of that today But as a product's business I came back from word camp us last December and It was a very clear moment. Gutenberg was coming We saw it on the stage at the state of the word when Matt showed showed a live demo of the product And it became clear this is not you know There's not theoretical anymore Gutenberg's coming and as a as a product's business. We said do we Do we try to survive this? Do we just do the minimal and sort of coast into Gutenberg with with a base? Functional events calendar and then figure out how to do it the right way later Or do we go all in and totally and fully Embrace this new editing experience and and all of the complexities of the implementation and the uncertainty And I went to I went to our partners and I said, you know, how comfortable are you with this? It's gonna be a big investment. We got to put our roadmap on pause Because we're gonna have to do this instead They said yes, let's do that. I went to my marketing team and said if we're gonna do this We probably should talk about it a bunch. That's gonna be work for you And they were like yes, we want to write about this and I went to the developers and said this is gonna be some new stuff Matt told us to learn JavaScript deeply. We sort of took some of that We've learned it a little bit deeply, but you're gonna have to go even further Are you ready for that and and they were and the and the designers were excited about the challenge. So the whole team really bought into this idea that Gutenberg is For plugins and and for in some ways for WordPress in general. It's kind of like the biggest Innovation we've seen since custom post types, right? It's this huge change to the way that we interact with WordPress and we decided as a team as a company That we were gonna be all in on this we were gonna put all the focus that we needed to be ready as soon as possible So get past this big decision point. All right, we're deciding to get into it Let's talk about the events calendar a little bit The events calendar is at its core About events which are different than posts and pages. So now we're talking about a custom post type and in the case of the events calendar, we're actually talking about lots of custom post types and in addition to lots of custom post types we're talking about lots of post meta and custom taxonomies So it's a fairly unique and complicated challenge. It's a lot of pieces for us to try to figure out How we're going to address So I'm going to take you through a few pieces just to remind the folks in the room who are using the events calendar what you know Some of the core pieces of this editing experience look like in our current product as well as those aren't using the events calendar to just Quickly understand what we're talking about here current classic post editor, right? We zoom in a little bit. We have this meta box in the events calendar This is really kind of the heart and soul the core of the events calendar is really this meta box and If we start to break this down We've got probably the most important piece which is the date and time right events have dates and times We have to essentially every event has to have a date and a time It has to have time zones and Whether or not it's an all-day event We're gonna have UI components like a date picker and a time picker These are more custom and more specialized than what we get out of a core post editing experience we've got Locations right because events happen somewhere sometimes where they happens online, but generally they're somewhere right like word camp You've got to have this particular location for your event Sometimes events have multiple locations in this case. We're also talking about an associated another Post-type we have a venue post-type and it's associated with the event So we've got more complicated UI components to worry about so you can select existing ones in addition to creating new ones We've got organizers same deal another post custom post-type that has Custom post meta associated with it another thing that you have to define and associate with an event We've got things like an event website an event costs and costs are different depending on context sometimes It's free sometimes. It's show up with a can of food to donate right like you need it really complicated and strange We have custom taxonomies like event categories, which are slightly different than regular post categories We have these weird options that have no reflection on the front end things like Whether or not this particular event should show up in event listings at all Well, if you think about the model of Gutenberg That's the kind of setting that really doesn't have a place amongst the block editor The ability to feature an event and you know, maybe a little less essential to people Conceptually but important to us as a business. We have this concept of upsells They need to be small and not obtrusive, but we also still need to make money and pay our mortgages and things Right, so we do have to sneak some upsells in somewhere so that we don't go out of business This is just one of our plug-ins. This is the events calendar. We have many plug-ins as a business When we start looking at this challenge and the scope of it even in the context of one plug-in. It's pretty intense Just you know lots of components lots of inventorying and then we start thinking about okay We in baseline wordpress Gutenberg right now. There's there's isn't an idea of required blocks Well, how do you have an event with a date and time without a required block, right? You can't have you can't let your users remove that block from the editor because then it's not really an event We have things like those extended settings. I talked about When we first started there was no idea of multiple layouts or those sorts of things And our blocks maybe get mixed in with everybody else's blocks and and that experience is sort of weird And then on top of that we've got this uncertain roadmap, right? Gutenberg early phases still No launch date right try to get you to understand the complexity of this once we start Stripping the layers away and then on top of that we have these concerns and anxieties and I'm not going to go through all of these Partly for the transcribers benefit, but also just it's overwhelming There's lots of things here We we heard John talk about the the block storage format and how to make sure We weren't being blobby and we were still being chunky right the events counter is chunky and we want to kind of stay that way Accessibility mobile response all of these things right this is this is sort of where our concerns and anxieties start to kick in But we're still optimistic We we've got a look and start breaking down these challenges and looking at them and thinking about how do we how do we get through these? One by one so the so one of the big ones we needed to address right away is Gutenberg isn't done. It's changing. It's it's going to change the way that we hook in is going to change the particular Implementation the functions we call all these things right it's going to change So our first solution here was to decide kind of follow the model of what Gutenberg itself was doing and Release events calendar functionality as an extension this allowed us to not disrupt or add additional bugs or complexity for the existing users of the events calendar while we could Still iterate and have early adopters grab our extension install it see how the events calendar might work in a new Gutenberg world This allowed us to do a lot of regular iteration Certainly not as much as the Gutenberg team who I think is at like 30 plus releases. We were doing much smaller ones We've done 15 since March The the additional benefit of this we have to share that that progress in public instead of Holding those changes back and waiting till it was perfect. We can roll those out and start getting feedback from early adopters This has worked really really well I think it's the sort of thing we might do in the future doing big features or big changes in this kind of standalone Silo is actually really free The next challenge we started thinking about was block flexibility and and the last session hinted at this a little bit When talking about building a theme or building components, there's lots of different ways. You can configure Gutenberg There's lots of different options Early on we had our designers Take kind of a blue sky look at what an event might look like they did up some sketches They imagined, you know, these are these are conceptually the sorts of things that might look really nice as an event And and I agree, you know, there's some fantastic stuff hidden in these sketches But it's also overwhelming. There's there's so much here that's changed There's so many different ideas Stacked in here and again, right Gutenberg still changing So one of the first things we decided is is to start We would do our implementations with this design concept of layer cake Gutenberg itself allows us to take blocks and put them in columns and and make things go side by side That's a very idealized nice beautiful way to do design But it inserts a lot more variables. So we said okay to start just to get our initial release out Everything is going to be just a single single full width block So when we're talking about date and time, we'll make it go the full width when we talk about the organizers or the venues You know, we'll make these blocks go full width and then we can then we can interspersed the other Gutenberg blocks reduce the complexity and really kind of lean into this layer cake design and and every time a designer would Come forward and say like well, but you know, we can make this a little smaller and show it this way we'd be like no just We just gotta get through this this let's let's let's focus on making everything full width for now. We'll loop back and We'll address that later The other piece is that when you start thinking about all the Possibilities and all of the optimism of Gutenberg the potential scope of what we're talking about feels infinite I think it might actually be infinite But that's kind of hard to test but you start thinking about it You start thinking about all these options that we can put in the settings and all these different ways that people can configure Nice job, Amanda So infinite scope right they felt it felt overwhelming And and my strategist Leah went off and she imagined all of the different things that we could do not not just for Feature parody but off into the future and she came back with this with this beautiful document that I jokingly call her crazy wall Or her, you know her rainbow diagram which talks about how do we start thinking about you know addressing the core functionality addressing what feature parody for the events calendar before worrying about About the new and the shiny things the things we really want to do can we address? Can we address the things we have to do to be ready and to provide a good Gutenberg experience before? We worry about the really the really fancy stuff So our solution there again kind of shown in that rainbow diagram is we broke this up into multiple releases Early on we would just let's just get an extension out like something that introduces these concepts of blocks for the events Calendar works with our post types just let's get that out We're done with release zero then we said okay Let's make sure the events calendar fully supports Gutenberg. We're very close to done with release one You can go check it out right now Release two is where we start to move outside of the events calendar and apply those patterns to all of our premium plug-ins and our other open source plugins and Then once you get past that things start to get more interesting that stuff's further out I think those are the new and shiny things when we start talking about You know redefining our interface for dealing with recurring events or Really fancy layouts and advanced block settings that we're all really excited about doing pushing those out Implementing all of our short codes as blocks these sorts of things so breaking it down into multiple release phases Was something that was very helpful So then we said okay Here's the title slide for the for the session is adapting to Gutenberg What are we going to do to actually adapt to this to this new interface? So we started off Inventory let's let's create some sketches and look at each of the components that make up an event and And imagine each of those components as a block So Leo went through and and she did this fantastic inventory or she said we need you know We need this for for the dating time block We need you know We need stuff for our organizers and these are the various fields that we're going to we're going to be talking about We're going to need things for the venue with maps and addresses and various settings, right? And again with the price block and then again with the website block Right all and and then finally, you know with this export block where we've got buttons This one was interesting. We don't have anything about export actually in the editor But when we render an event we have those export buttons on the front end So this was an instance where we took something that was on the front end And we needed to map that back into the editor We never let people control that in the editing experience before but now with Gutenberg Rather than just have a button at the bottom that says export to iCal We might want to put a button at the bottom and let somebody change that button label, right? This is sort of getting into the Gutenberg thinking and inventorying not just the things in the editor She said okay, we've we sketched all these blocks it all these potential blocks that we're going to need We'll send the designers off They can create kind of some beautiful design UI kit for us to use that that straddles the fence between Looking like core WordPress while also introducing UI patterns that that work for our particular components that we have so they created these these great Sort of sort of UI kit for us We're like yay. We're done. We just have to take and we have to apply that paint to our blocks and everything Will be perfect But nothing's quite that simple That that would have been far too easy We could not simply just take those blocks put a coat of paint on them drop them in Gutenberg and say we're done Instead we have to actually think about adapting to Gutenberg So back to the date and time block So we think about this piece One of the things that the meta boxes allowed us to do which isn't necessarily a good thing, but we could construct a fairly dense UI that that had the important chunky data elements that we needed but not have to really worry about The user interface and how it would look on the front it right, but there was no one-to-one mapping We didn't have to worry about that editor experience Translating all the way through to our customers visitors experience So that immediately added some complexity. We we inventory those components. I showed the same sketch before We started thinking about how do we how do we take these these UI elements and And present them and map them in a way that will be intuitive on the back end So our first attempt at this Look sleeker, you know, it was was like, okay. This is this is pretty tight people can click on the date and change the date This is the sort of edit in line kind of concept But these icon affordances are really strange These weren't going to show up on the front end. They weren't really appropriate but without them it sort of felt weird to not know like what am I looking at here it felt kind of incongruous to us and and Also lacked depth for some of the other options. We had we still had to be able to say things like all day We still had to be able to control Control things like the You know the at symbol or the dash those kinds of things in the time zone all of this stuff And so this was kind of awkward So then one of our designers came back to us and said well What if we when you click on the date we actually sort of Kind of like if you've seen the Twitter block or the image block you get a slightly different UI when it first shows up Right or or when you click into it you get a slightly different UI. They said hey, how about a UI like this? We said okay. Well now we're getting into something, you know, we've got a UI that kind of makes sense We've got a little bit more space to work with But there's a lot of pieces here That we don't really need most of the time If you're creating events when you first, you know, you do a few you might be a changing some of these settings like the date separator or the time separator You might be toggling that multi-day on it on an occasional event or adjusting your time zone But but most of these things you don't have to change all the time So this is where we were like, okay We're starting to actually understand Gutenberg. We're starting to understand some of these patterns And this is where we said okay now we understand we've got the block settings where we can shift some of that stuff Right we can push things like separators and time zones into block settings And if you need to adjust them or it feels right You can go do that, but it's not required for most people and then we still get enough space for this multi-month view We've got some nice toggles for for multi-day We're starting to feel pretty good and when you're not in that you get a pretty nice tight sleek UI No more goofy icon affordances Think things look look pretty good. This is where we ended up Lots of lots of iteration to get to this particular UI, but suddenly we were like, okay this this is starting starting to look like like something that's functional in the editor and Reflects what it's going to look like on the front end and and is a piece that actually can work Obviously we went through that same Process for each of the blocks we talked about before we went through that process for For price and for organizer and for venue And I'm not going to bore you with the details of going through each of those explorations individually But but the the main lessons we learned as we were building these is that we still needed feature parody We couldn't go to a new version of the events calendar that suddenly had less features or less Customizability we just needed to maintain all that stuff We learned that that this idea of having a slightly different state on the block while it was active Versus when it was kind of in this like preview was something that was effective when we had a lot of UI components that we needed to display for Structured data elements so we turn a field We could turn a block more into a form when someone was interacting with it As soon as they got out of that form we could show it to them more like the way that it would look In reality and then the final thing that we learned as we were building these was was about Really how to employ those block settings and really to say okay in block settings We can put things that are non-essential and really just impact the way that something's gonna Gonna look on the front end more more alternative Appearance options So the beautiful thing that we got to was you know you can put together an event You can enter in that metadata and and in that event editor interface You can you can start to put these pieces together You can lay out those blocks and you can start to have an interface that Closely maps to what's on the front end Adds the extra power of Gutenberg to that event editing experience And and really kind of embraces Gutenberg while also maintaining as much of that structured Component that were that we're used to So kind of kind of wrapping up a little bit Some of the main lessons that we learned is first you need time to think this stuff through Gutenberg's a big change You're not gonna just take things that you've been doing for years and immediately map them To this new paradigm or this new Technology stacking interface you do have to kind of embrace these things and learn them You want to break it into smaller pieces what What Gutenberg offers is pretty vast and that vastness can feel overwhelming And what we don't want is to get into a situation where we're like do nothing, right? We want to we want to get into this it and move move forward smaller pieces help for that Looking for patterns helps, you know identifying areas where where you can use Gutenberg to accomplish a certain task and then reapply that again and again like our UI kit like figuring out the active versus Understanding truly how to use block settings these sorts of things those patterns help you move faster One of the challenging things throughout this process and is I think kind of remain very true As Gutenberg continues to move forward and new phases and and new modifications to the WordPress dashboard come out Is we need to stay informed and adapt to the changes that are happening? We need to You know, I had both Leah our strategist and Gustavo our lead developer They don't participate a lot, but they are reading the slack conversations every day They're looking at all the code that's coming through the Gutenberg get repository They're watching those tickets that come in because all of that stuff affects the way that that we have to adapt the way our plug-ins gonna work with Gutenberg and honestly Almost every Gutenberg release that's come out so far has broken our extension That's that's part of the reality. We needed to know that those things were happening and then react I know Gutenberg 3 3 came out on Friday, and I was thankful. I wasn't doing a live demo today I didn't know if it was gonna work. So, you know, this is part of the process. It's all it's all new. It's all fresh. There's lots of like adapting So in summary I Part of what our our kind of recipe here has been is to is to get stoked about Gutenberg Like it really excited and really optimistic about what this is. We are all in on this It's the future of WordPress. We across the board on our team are are legitimately excited about about Gutenberg Then from there, we've been thinking big We've been thinking about not just what we need to do to exist or to survive But but what the events calendar can become and what additional power we can put in the hands of our customers as As we adapt more and more to it And then finally this act small idea is that we don't have to address all of that stuff Simultaneously, we don't have to build the final ideal state, but we do need to make some progress Now so that we don't get left behind and so that as so that we're learning this stuff as quickly as we can all right, but Before I start taking questions We have also on our team been doing a lot of kind of public outreach work There's a link here sort of working from the bottom up There's a link here to the Gutenberg extension that we've been working on for the events calendar. I go check that out install it I'm sorry if it's broken right now. I literally don't know if it is or not I hope it's not but but check it out if it is broken Let us know because we'll fix it as quickly as we can which will be hopefully very quick We're still trying to put iterations out on that Every week to two weeks. It's it's changing constantly We are currently writing an e-book about about Gutenberg and some of the process that we've been through I expect that to be published later this summer and and you know look out for that We have been writing a going Gutenberg blog series which my slides Stole very heavily from we've got a great author on our team who's been Acting sort of as an embedded reporter and attending all the dev meetings and capturing the process of how we've been evolving The events calendar if you're interested in that kind of stuff You want you know a peek behind the curtain any of the things? I said sounded at all interesting you should go read the stuff that George wrote He's much better than I am and has a lot more detail. It's a really great series I think we've written just released our six post six post in that series. It's really fun. Check that out And then finally if you're looking for me Twitter WordPress Slack those are great places Modern tribe itself my my company is is a cool place to check out What we've got going on All right, let's take some questions So she asked for the video. She asked when a user is Creating an event. Do they have to select all the blocks themselves or are they presented with those to start? And I'll just quickly I'll just quickly go back and if you look at this particular slide You'll see this is the state when you first go to create a new event So we we have we're using it on a block layout to To pre populate the blocks that we know most people are going to need now You can insert regular Gutenberg blocks in here. You can rearrange it. We do whatever you want But we pre populate that with the stuff that we think for an effective event You really should have this stuff So the question was our plug-in one of the big advantages of the events calendar is it's highly extensible We've got lots of hooks and filters and all kinds of things and people build weird fancy stuff that we delight in How are we gonna address that I actually have no idea This this goes to the I have a team behind me. I it's it's a concern I I don't know the answer to that question. All I can say is Watch our blog series. I'm sure we're gonna be publishing about it soon Whether or not we've solved it already which maybe has happened or if we're waiting to solve it We'll we'll be publishing when that happens. So the question was This lady has Their site has lots of events like 300 events. Are they all gonna break when Gutenberg comes out? The the hope the desire everything we're testing for is no we we do not intend to break anybody's stuff We're working very hard to make sure that's that doesn't happen Core team is working very hard to make sure that doesn't happen I can't make any promises, but we are gonna be testing very heavily against that Both the idea that you could install the classic editor and stay on the classic editor and not make this jump That's one option, but we're also testing Going back and forth between the between the classic editor and the Gutenberg editor and having that that Compatibility go in both directions We're actively testing that it seems to be working really well right now. We have Less fear from our developers than I have at the moment right like they're telling me this this seems to work This seems to be going pretty well. I Share your concern and we will still we'll be testing very heavily. Yes, sir Yeah, the question was about required blocks Unless somebody from the core team can correct me there's still no concept of a required block correct No, there's still no concept of a required block What we're doing is some JavaScript hacks that remove the possibility of you removing specifically the date and time block I think we are letting people remove the other ones, but you can't have an event without date and time So it's really really awkward for us if customers can remove that block. It's gonna cause them confusion They're gonna be weirded out by it. So We have a JavaScript hack which we're hoping maybe core support will come and we can remove our hack But right now we have achieved required blocks with a sort of weird hacky customization Yes, sir Yeah, so the question was about API access to the events calendar data Entertainmently we we added API support last summer specifically because we've been building a SAS solution off the events calendar Not to replace it as a completely parallel solution that we're really excited about check out loxie. It's our new SAS space calendar So we had built extensive API support That was a really nice thing that we did because we needed it for Gutenberg so that that API we're actually actively using our own APIs as a part of Gutenberg and then So far we haven't had it to make any major modifications to those it everything seems to be similar The one thing that's a little bit weirder is the actual post content that fetches backs a little bit different If you're rendering content out of the API, you might have to act a little bit differently But overall we're not making any major changes to that Which is great. Did you have another question Amanda? Yeah, so the question was was really about the chunkiness and whether or not we are Still using custom post types custom taxonomies associating, you know organizers with events and those kinds of things and absolutely That's what we're doing many of these blocks From a post content perspective are kind of dumb, you know, they don't they don't show a lot of like they're not It's not a lot of complexity there because really we're associating with in the case of an organizer or another organizer and One of the things we actually played with Was how to do multi organizer support? Right now our working theory is you would add a second organizer block and just choose another organizer in the background We can now associate with two organizers just like we always have But we're doing it with by adding two separate blocks as opposed to adding some extra UI to the organizer block to select another organizer But yes a vast majority of the stuff you're looking at still, you know the date and time are being stored in custom post meta The you know all day toggle is stored there the you know all that kind of stuff Yeah Kelly I missed the I missed the tail end of what you said So the question is do we have third-party developers for the events calendar? It's fairly limited. I would say we have Two or three significant third-party add-ons most of our add-ons are our own add-ons Some of them are free some of them are premium But yeah, we do we have a few Do you say oh extensibility? Yeah, I actually I sort of half answered that question earlier the question was about how how we can handle extensibility for those third-parties I Don't actually know I'm not entirely certain You know, I know a lot about hooks and filters and you know actions and all of that kind of stuff I don't I don't yet know totally how it works with I'm much smarter people than me who I really hope do because it's important We care about this third-party people we care, you know those are like that add-ons We know about we also know that there are tons of agencies Including our own that did do a lot of extensibility That is you know custom for a theme or or they're actually Divi does a does a great override of our themes We want to be able to support that we want to make sure that those sorts of customizations remain possible Yes Yeah, so I think that this is core functionality That you can make a block only addable once or is that something that we did as well I'm getting sort of a Uncertain head bobble. I'm not sure. Yes, you can only add the date and time block once Which is also true for like the price block that we have you can only add the price block once for some of the blocks we've also played with the idea of It might actually be the price block now that I think of it the idea that if you add at the second time when you edit either of them They just synchronize so that they are effectively the exact same block and when you edit either one the other one just updates real time React makes that stuff pretty easy But I'm being told I'm out of time and if anybody has any other questions Please approach me afterwards or at the after party or any of those sorts of things. I'm always happy to talk about this stuff. Thank you