 Yeah, we don't need the notes. We ran through it. All right. It is one o'clock now. We're going to go ahead and get started. Thank you so much for coming here today and being with us. Hope you're having a good word camp so far. We are going to talk about Tackling Gutenberg and NC State the Blocking Spiel. Sorry, I don't have a mic. I will talk louder. Thanks for reminding me. My name is Miles Elliott, and this is... Lauren Etheridge. We're going to talk about Tackling Gutenberg Development at NC State. If you want to follow along with these slides, there's a website link at go.nccu.edu slash Blocking Spiel. I do not have a mic hooked up. She has a mic. There's only one mic. There's two of us, one mic. She can say it louder if you can't hear me. But yes, do let me know if I start talking too quietly. So Lauren and I are both part of the Office of Information Technology Design and Web Services team, which is myself and Lauren, as well as Jen McFarland and Brian DeConning, who are here as well today. If you want to hear more about us, you can go to design.oit.ncsu.edu. And that's got stuff more about stuff, what we do. Other, we write blog posts occasionally. You can laugh at us for being silly. Good stuff like that. Now, so about us, we are housed in the Central IT Office in part of the Outreach Communications and Consulting Department, which means that we interact with campus more than the rest of Central IT. We provide resources as well as general help to campus. We manage several major WordPress multisites, including like a free blog environment. We work with a number of clients on campus and building custom WordPress themes, custom WordPress plugins, and doing maintenance for them. But that's elective clients. People on campus don't have to use us. They make the choice to use us. And so there are a lot of departments that may have their own IT staff, especially the larger colleges, College of Engineering, have their own IT staff. So there's a lot of stuff that may be happening in WordPress around campus that we don't know about. If they run into problems, they may come ask us, but there's stuff out there that's outside our purview. And we also do training across campus for WordPress in general and, well, now Gutenberg. So in Gutenberg development, step one is learning. So Gutenberg, what now? We knew that Gutenberg has been coming for a while. Matt Molenweg said it at WordCamp US a couple of years ago, like learn JavaScript deeply, and then they're saying, oh, we're going to make a new thing. So it had been on our radar that there was a change coming, but change in WordPress happens slowly. We've never seen a revolutionary change like this, and we figured this might be some of the same. And you could download the Gutenberg editor and play with it, maybe like last year in the summer. But I didn't try it then. I don't know if anybody else did. But it wasn't until our colleague Brian went to WordCamp US in November of last year and sort of saw several talks about how big Gutenberg was going to be and the change that it would engender in the ecosystem that we were kind of freaked out that this is going to be a huge thing and we had to get started because this meant big things. So it really was going to be a change in the ecosystem. Once we really started playing around with it, we realized that probably we were going to have to rewrite some of our stuff. A lot of our themes might need to be rewritten. We were going to be writing a lot more JavaScript, which didn't really feature heavily in our development process before now. And we were going to be able to do a lot of cool things even though it might felt kind of like that. We're still excited about the cool things. But it was definitely a scary thing for us. But we're going to go from sitting in a darkened room writing on dusty paper with our quills and pens to cranking out bibles by the truckload with our fancy presses. So that's Gutenberg. He invented the printing press. They named it after him. So put it over to Lauren. So in thinking about our Gutenbergs, we wanted to make sure we had the right tools for the job and to sort of assess. I also had used React before, but it was really interesting. Ben, Brian, why did I just call you Ben? Ben, I don't know. I just rolled up with Brian and Jen had a little exposure to Hetmanly Incorporated. It was also a relatively new charge process. We were talking about it, but we hadn't really done it. We then maybe used Webpack on some one-off projects, but we weren't really using it. So with that team, well, let's pull our resources and figure out where our methodology starts and where it ends. And you know, it's kind of spread well. So we had to arrange a lot of intro team meetings with more of us and kind of figure out where we were with respect to Gutenberg development. We gave a lot of smaller presentations. Miles gave a crash course in React to all of us and tried to talk to us about how React will, how it works with Gutenberg. And also, some team members took on a lot more work to help some of us get down to Gutenberg development. And let's see. So in planning, we needed to think about... I keep going the wrong way. The way things are on campus. So we have a huge university. There are roughly 32,000 students and about 8,000 staff and faculty. And across that, we are thinking about how is the Web used across campus? So with that, we have some major campus multisites, which our team owe it to design managers. We have a three-blog environment. And basically, that's anyone with NCSU ID can sign up and have a WordPress site. We also have some clean and posted environments where clients, usually departments or maybe student organizations pay us and we do a little bit more. Maybe we'll do some custom development or we will do some maintenance to help them maintain their site. And then we have some unit-level multisites, which include major departments like the HR department, the department of student affairs, things like that. And then we have a whole truckload of single installs of WordPress and stand-along sites and the rest of campus. Who knows what they're doing? Why do we keep doing it? So, in keeping up with that, this is how we do it as an OIT design. We have our development relies on the NC State shortcut plugin, which Brian developed. And it's basically a plugin that helps deliver and empower clients to make fancy page-level elements on their website. And it's used heavily with our clients, many other people who find out about it or request it through our ticketing service and we will add it for them. We also have some of the themes on campus that rely heavily on advanced custom field. I'm going to do it the whole time. Don't worry about it. So, with that further breakdown, Hillsboro is our primary theme and it uses short codes and we also maintain another theme called Poulton and it uses short codes and ACF. Other campus is using some combination of short codes, ACF page builders. We also have a lot of vendor-made sites which are outside vendors outside of NC State and it relies on one of those three and again, who knows what else is going on. Maybe an elephant or a giraffe or something. We're not sure. So, we are four people which may seem like a pretty big team but it's not when you think about how large the campus is. We're not formally trained in web development. We have a wide range of skills. Between the four of us, we have degree in graphic design. We have degree in social work and philosophy, mathematics and technical communications. So, there's a huge range of skill but what stretches across all of us is the ability to problem solve and critical and analytical thinking and those are some of the skills in web development. Let's see. We work in the central IT office which is to say, we have some power but not really one. It's really like an illusion of power. We can't really dictate anything or really make any rules but we do provide resources to campus in the form of trainings, tutorials. We do video tutorials. We make blog posts about what we're doing and how we do it. Justin went the right way. So, we knew we were a bit ahead of the curve in knowing about Gameberg and wanting to work with it but we wanted to make sure our fellow developers on campus knew about it too and we're excited as much as we were and to get ready to gear up with development with us. It sort of made us feel like... No! Super good. Nailing it. All right. So, part of this process of planning is sort of looking at a current development stack and thinking about how we... what we're doing and how we can sort of break that down and determine what we have going on and what's working well and what could be fixed. So, we use a campus built plugin that relies on GitHub to distribute themes and plugins across campus. Who developed it? Who's in this room now? A celebrity among us. So, that's good. We use GitHub pretty heavily to distribute themes easily. We use SAS a lot for compiling our CSS and that's pretty much the only thing we've been using on the command line. A lot of times we don't even have a package JSON file with those commands. We're just running node, SAS to compile that straight from the command line. We haven't really been doing much testing. We've been talking about it, but it's not part of our standard process. Also, we don't really have standardized development environments that we use. I use VS Code. Lauren, what do you use? I use VS Code sometimes. I add on. We have other people using Sublime and so we're not really centralized around a common development process. We might be using different tools and so sometimes I might be having a team. Also, the way things are, sometimes we need to fix things quickly. When with PHP, you can just jump into a live server and make those fixes and change things, which is fun sometimes, but it can also present problems if something's done on the cPanel live environment but is not done in the source. It's a bad habit, but we do it because we're human. But let's take that stack and bring it down. That's where we're at now. Turn it down. Part of that process also is looking at the things we like. Life is too short to code. We use our short codes plugin pretty heavily. It is heavenly. It was developed by our colleague Brian who actually gave a talk on it last year here at WordCamp. You may have seen that presentation if you were here, but it works together with another plugin called Shortcake where you can get a live preview of what that's going to look like inside their editor, which makes it pretty easy for them to build those more rich layouts. That's been a thing that's super helpful for our team to be able to have those tools for our clients and we can use it as well to quickly build out layouts without having to build those custom every time. We're really looking at that as a cornerstone of the way we're building sites and interacting with campus, providing that for them. That was sort of the key thing so there are great things to come. We know we like some of the tools we have but there are some issues presented by our development stack as well. We're a little bit fractured. We're not centralized around anything. We use a lot of disparate things. Some of you in this room are our clients and know that we have a variety of plugins. We sometimes will run into three different forms plugins on a site. There are some inconsistencies and so Gutenberg does sort of present this moment of chaos and destruction as everything collapses in on itself and chaos reigns. We have an opportunity to rise from the ashes like a phoenix. We're really looking forward to this as sort of it's going to be a hectic next six months for us as WordPress continues development and we get closer towards the actual launch of Gutenberg. It's going to be chaotic but also it's exciting for what we can build anew. We really decided we wanted to mimic that short codes plugin with a blocks plugin that everyone sort of contribute to that. So we're all working from a shared basis. We're all improving the same thing. There's less duplication of efforts across different teams and everyone will have a great time and sort of generally rising tide lifts all boats of NC State websites with our Gutenberg development. So a quick detour. Gutenberg uses React under the hood to render its user interface and for those of you who don't know, React is a JavaScript library that you can pass data to and that determines what HTML is output on the screen and so that's a pretty interesting UI library that makes it easier to work with HTML with JavaScript. And then there's another talk that's focused entirely on making Gutenblock so I'm not going to go into that but suffice to say that it happens mostly inside of JavaScript. You have a JavaScript function that registers the block and you need to enqueue that JavaScript or CSS you're using to style that block but PHP doesn't really do much in terms of actually making the blocks it's all pretty much in JavaScript except for dynamic blocks but that's a separate thing. And then when you're defining it you have to define an edit and save method I'll use the thing instead of just pointing and those are pretty much just React components that define the edit one determines how it's going to look when you're actually editing the page and then the same data is passed into a save method to determine what HTML is actually stored in the database in the post table. So, step three implementing our grand plan so our plan and see state blocks. That's Johannes Wolfenberg everybody. We've been heavy on the puns with the Gutenberg so I hope you picked up on that and that you like it because it's not going to stop. So we had an early start we got started with Gutenberg development about six months ago and at that time there were not many tools available for Gutenberg and it still doesn't have that many but there's more now and so the documentation was there but was sometimes scarce or out of date so we used that we relied on the community there were blog posts written that sort of broke stuff down and so we definitely relied on that that was great thanks to the WordPress community for that. But also there was a lot of things that were there in Gutenberg but weren't documented so we really spent a lot of time looking at the source code and seeing how they were writing the core Guten blocks under the hood and sort of figuring out how we could steal their code to do other stuff so it was sort of us just banging around in the dirt trying to figure out how we could advance and learn agriculture I guess. So our dev processes sort of a timey wimey wibbly wobbly stack so like we said before Node was mostly just CSS preprocessing so we really had to look back and modernize that to start including our package JSON defining those scripts that we're using to do things to have a common process using Node.js Webpack and React and JSX JavaScript heavy tools incorporating build processes to actually build stuff which means that there's going to be less of that live fixes to the template when things are on the cPanel server because whereas editing live I can be reasonably comfortable that I'm not going to totally white screen the site and if I do I can fix that whereas if you're looking at like built JavaScript it is very difficult to look at that and then make a change you want to change so we really had to modernize our stuff and come up with a better process to sort of see those problems before they made it to production with more thorough testing of our code and so if you have used React at all you may be familiar with the concept of components but if you're not familiar with React the idea is components are sort of these modular little blocks that you can add that have the same functions and so it's very much a part of React development to have these parts you can build a site with put together sort of like Lego blocks but it was less of a paradigm in classic WordPress development it was more along the lines of we might write something that would work in one template and then if we liked it we would copy and paste a function to another template and it was sort of we'd have to go back and make changes but with templates you can keep it dry don't repeat yourself and use the same thing in multiple places so that if you change it in one place it's going to get updated elsewhere as well so that makes it really easy to build new blocks and let us build common campus components like inside Gutenberg you can have different controls and one of those controls for default blocks is something like a background color and so we could have our own special component that automatically feeds in those NC State background colors so that we keep it on brand and we can reuse those same elements in different blocks easily so what's the difference? we don't know it just seems to be confusing because they both serve the same purpose and they look almost identical so those are some of the things we were thinking about we want to actually remove some of these blocks for our clients to help make the transition easier there are also blocks that come within the core blocks called verse and that's for mainly if you write musical lyrics or poetry that's not really something that happens on campus within a campus site so that might be a block that we wanted to turn on we're also thinking about how we need to incorporate incorporate the NCSU and not just to the blocks that we built but the default core blocks so we're thinking about applying filters to change and maybe having to add some CSS to make the default blocks accommodate our brand yes! so up here you see an example of oh god we're going to try to use the laser alright so you see here this is a heading and then you have a button these are all defaults that come in the core blocks and what we did was we added some CSS so these would render within our brand standards and one of our brand standards is NC State is against border radius border radius not now, not ever not with remakes, not with ham not with a cat so we had to remove all of the border radius that's one of the things we did we also have a set of premium fonts that we always use so we wanted to incorporate those fonts with the default blocks as well and we have some standard font sizes and overall styling of our heading so we incorporated that as well we also applied a filter to incorporate our custom color palette our NCSU color palette to default blocks and our custom blocks and as you can see here this render so that when you create a button your color options for background and text color are our brand choices and that's just to help our clients and help people who are inside of the NCSU web space to make good brand choices and to keep things universal across campus with that we were really excited about all the things we were doing and how we were able to incorporate the brand so we wanted to spread the love much like the Hobbit, they love everyone so this OIT design so we started talking about Gutenberg and the work that we were doing at co-working co-working is on Fridays all the web developers across campus get together, we talk about things we hopefully share our knowledge we give each other presentations we started talking about Gutenberg there a lot we did some development days we made campus wide documentation which augmented the WordPress official documentation but it made it more specific to how we use WordPress at NC State we also did a lot of outreach to campus we started slowly notifying our clients that Gutenberg was coming and that we were changing our teams to accommodate Gutenberg and all of that culminated into in March we had a big Guten day and well developers across campus came and we shared all the knowledge that we had about Gutenberg and the things that we were working on it was really successful even web developers from our UNC sister schools came so it was overall a good turn out and we had a good day so one of the things we were definitely thinking of when we started working on the blocks plugin is the CSS and if you've ever worked on a larger application or a larger code base that shares CSS it's pretty easy for that to get out of control in terms of inconsistencies and bloat and other issues of you might be re-declaring styles that are already declared and it's sort of harder for people to be able to jump into and change things with confidence and not you know being afraid of those unintended consequences of rewriting CSS because you may not know what's relying on those classes so yeah because custom styles are kind of hectic and yeah re-duplicate efforts we're also thinking about how we're developing this plugin we want other people on campus to use it but they may have a specific sub-style for their unit or for their group and want to override the decisions we make with their own theme styles and so we want to think how we could make it easy to override without having to use important and everything that just mucks things up and also every Gutenberg block has an additional CSS class block so you can add classes in there and that's the thing we're using with the short codes and so we're thinking what kind of classes can we have so that additional CSS classes block can become pretty useful and allow us to make specific changes on the fly for certain situations that might need it that don't really need to be in part of the styling of the blocks on the whole so we looked at utility CSS frameworks and eventually settled on tachyons which I really like if you're not familiar with it it might look kind of crazy it's a little bit antithetical to the standard of semantic class names in that you have classes that do very specific things and so we have one main class panel heading here so this is from one of our blocks the panel and so we use that class just to help other people be able to latch on to that element and override those styles or for javascript to grab on to and so that one's not really doing any styling but it's just a sort of a hook and then you've got this PA3 that adds padding relative, positions at relative background red adds red background white gives white text and so that is sort of oops did I do something oops okay so the classes on there they sort of do very specific things which means that nobody can go crazy adding weird sizes because they have a limited set of sizes to choose from they can only add the sizes permitted by the classes and we are using those components as I mentioned earlier so we'd have to repeat things which means that you know you don't have to worry about having to rewrite these same classes all over the place they're just stored inside that component we have run into some issues with Gutenberg adding its own styles you know a single class is only so specific and there's some cases where Gutenberg will do some things that have more specificity than a single class which makes it hard to override so we've run into some issues there and then also we still need some custom classes for more advanced things like your hover states or things that are getting heavy into pseudo classes or complex things like that so it's not a complete solution but so far it's been working well for us check back in a year to see if we regret this decision but I'm pretty excited about it so yeah next up we also want to look at you know possibly filling the gaps or cleaning things up and things that we didn't need anymore because default blocks are uncovered we had a short code for creating branding for the button that I showed you previously well we no longer needed that anymore because it came with as one of the core blocks so this is a reflection of the current blocks that we have available we have a panel we have alerts we have danger links we have callouts and we have a table but under development on a directory block which will help augment a directory plugin that we already use on campus and what it does is it will pull in information from anyone on campus that has an NCSU ID so that's helpful we make a lot of sites for departments and student organizations and they want to pull in info about their members or people in the department we're also working on an RS SP block and this one which I'm really excited about is helper block we're trying to introduce and what that will do is help us when we start to transition our clients to Gutenberg this would be a block that would pop up and say this is where the advanced settings are for a block or this is what you can do with this block or maybe suggest a block after someone has started making edits to a page you might want to incorporate this or you might want to change this and prepare for a block it's like Clippy for Gutenberg and we're also working on an icon component which we have in short cord form right now but it's not visual it's to have visual selected for an icon so you can select an icon block and get a preview of what that icon looks like because we have maybe 100 icons right now some of them are it's also the dash icons in there and other common icons it's hard to tell from the name what you're actually going to get so our review is to actually give people a preview so you can see before you actually select it and what the icon looks like yay demo time okay so I'm going to give you a preview of our blocks that we have available don't be too mean because this is still under development and I'm going to do my best to show you let me get a little bigger so you can see up the top that's our brand font and that title there it's not the default title so let's look at let's say we got like this call out block so here's the call out block and that's a common like element we're using across canvas and so with the blocks we're able to sort of easily lay out what you know areas that clients can edit and so this is a call out this is the we know we sometimes users want to use this to a link so we're able to easily add links there and then so earlier I talked about having those sort of custom components that we can pull in so here's this little area on the right hand side you see the background color that's a component that we can pull in easily to any future block that we make to allow those brand color selectors so we can make sure that people can use the cool colors that they want to without going too crazy and picking colors of other universities will also map the font size so it'll make sure that the text color that goes on top of that is an accessible combination so that it sort of helps users make better sites and then also having the different fonts available for them and then also being able to set the different heading level so that they can really have control over their site there's different alignments and that's all good stuff so another one is the panel there's a nest block and so this is like a collapsible panel and it has its own styles it's pretty similar you can nest blocks in here ignore my grammar and then again it's the same color component but I can pass a restricted number of colors to it that I want only for this particular component I can change the collapsible not collapsible then other blocks there's a common thing you'll see across campus which is these fancy links that you can arrow next to them and that used to have to be a shortcode you have to know what the shortcode is and what the parameters are which is not always clear to end users in shortcake help with that but I can add this is my this is my major link add a link to that let's do another one we've got an alert block that's also going to do alert thing nobody usually watches me when I type um so yeah it's h2 it says h3 um and then um yeah so those are fun blocks um another one that's brand new so this may break so bear with me if this breaks um but a um table of contents block they'll automatically scan the page for the headings and then make a table of contents based on that and you can use it inside the editor to actually jump to those blocks it doesn't actually render the front end now but that's the example of sort of things we're doing that are fun tools or not fun but very actually helpful tools they're fun for me to develop but they're also incredibly useful to our clients and to campus um to sort of things that like previously inside the classic editor would have been like pretty hard to do or would have been very restrictive or you would have really had to know what code you had to write to get but it's now like pretty easy and it's right there for you so if I publish this and look at the front end um you can see that there's those things there I told that panel to be collapsible and it is there's a link the spacing might need some playing with I forgot to show you how cool this thing is with an image so I can add my beautiful sunset image to that and then you know left right image what have you that's easy to do whereas before it would have been pretty complicated to have those options now um they're right there so that's the ntsc blocks plugin as it stands now under current development and now back to our regular programming um that's the button I want uh we will probably I don't think it's on our public github yet but we'll put it there once we're sure that y'all won't laugh at it um so uh but yeah we do intend to make that public so people can look at that and sort of learn from that in the process of testing it out now yeah it's still got some bugs we're trying to work out um but yeah so here are the images in case that live demo went bad um but now couldn't angry so with that issue was lack of documentation so the wordpress documentation washed out so we were doing a lot of guessing checking checking with each other um and scratching our heads banging our heads sometimes sometimes yelling very awful thing um so situations we come up where um you know as gunberg is an ongoing development process things like the component names which which doesn't necessarily break our flaws but it makes us have to be on our toes constantly for when they update things um and change the name of things um an example of that was there used to be um a component which is called edible and it became um the rich tech like within an update so that made us have to switch gears and figure out how to incorporate that instead of the edible component um also there were just weird changing locations of methods and how they did things with them on having ongoing development and rearranging their code so we also had to look out for that as well and again because of lack of documentation it was hard to know is this a bug because they're working on this too or are we just messing it up usually there's a little bit of both maybe a lot of us messing it up um but with that you know a lot of uh block validation issues and block validation issues it's essentially when your block breaks and it usually breaks because you've made some kind of update or change to it and it's currently available and that can include changing you know basically anything but mainly like if you change an attribute when you're building your block and then while it's already made then it will render your block and then there was some documentation on this deprecation process that you have to use when order you want to update an existing block but it wasn't fully fleshed out so we're still kind of trying to work that around and figure out how can we um incorporate some things into our dev process we found some filters that they just started about which may fix our problem from breaking our blocks constantly when we're developing them made us sad sometimes because we love Gutenberg is it? Yeah. Okay yeah so the future of blocks the future of blocks is going to look like this Skynet No the future of blocks things that we're looking at for in the future are relational or conditional blocks blocks that are aware of the other things happening inside the page the table of contents is an example of that that it's aware of those other blocks but things where it may be you know if it sees several things in a row and you know it might suggest a more interesting layout for you or no hey you've done this maybe you should do this next and then also using like common layouts or block templates so that somebody working on campus if they need to make a page we can have templates for them so they can really build something easily and rather than having to go in there configure that every time it's easy for them to produce something that looks good and you know everyone on campus and probably in your jobs as well is pretty busy all the time so anything we can do to develop tools to help our clients build things quicker and empower them really is good for us we're also looking at integrating with our ticketing system service now we're also looking at having protected content blocks so we can have blocks that encapsulate content that require you to log into view in case they're sensitive information and then also you make maybe a block that can connect the API to our library of campus stock photos to again allow people to easily build these things without having to go there and find that out on a separate webpage download that it could just grab it for them and pull it in as they're building that page so there's a lot of excitement that we have towards the cool stuff we're going to be able to do in the future and right now you know sort of those ideas I have but like what ideas the community is going to come up with as Gutenberg development you know builds off of itself and we see what the future has to offer so step four is maintaining and this is really a big question Mark because we're still in the process we're really still in the implementing phase and maybe the planning phase so this is a big question Mark like who knows what's going to happen the decisions we've made with CSS is that going to come back to bite us you know those block validation issues are we going to find a way to work around those you know what's going to change you know what is it actually going to be like when it's in the hands of you know thousands of people across campus so that's a big question for us our process is Gutenberg was pretty big and scary and terrifying and it still is but it's also been a great opportunity to sort of refine our development process and our collaboration as a team so it's really been a helpful catalyst for us to kind of refine and update our deaf process so it's been really great so some resources up at the top there we have the documentation we've been working on for Canvas for Gutenberg it's there also the Gutenberg handbook and again these slides are at go.ncsu go.ncsu.edu go.ncsu.edu go.ncsu.edu go.ncsu.edu slash block and spiel are these slides that's spiel German it sounds like the second letter whatever and then the Gutenberg handbook which has the documentation Gutenberg has so far we've also been I made a block that automatically checks all the blocks you have installed on an instance and we'll pull those attributes which is helpful for building block templates so you can look at those there and then also that code is available on GitHub now at that link there then also check out the WordPress GitHub repo the main one and read the source code also we heavily like our blocks plugin and other random blocks we've been making rely heavily on the create Gutenblock package scaffolding tool which is available there on GitHub that's super helpful if you're starting to get working with Gutenberg development pick up create Gutenblock if you've ever used create react app it's similar to that it's going to configure webpack for you it's going to do a lot of the hard stuff so you can get straight to writing the code and so that's been a big development help for us and I think it will be for you as well now if you have any questions we talk about that now also though we have a sandbox for the front end if you want to play around with our blocks you can go to su.edu slash block dash sandbox but yeah any questions for us sure what happens is so like Gutenberg will validate the block so if you open up a page that's been saved in Gutenberg it's going to take that HTML that you've saved and then it's going to when you define the block you define like those attributes that are saved and so it's going to pull those attributes out of the code run it back through your save function and it's going to make sure that HTML that it gets with what HTML you already had and if it doesn't match up it's going to save this block as invalid and then in some cases it will be able to recover in other cases not so it will basically like delete the button or you might have to convert it to a custom HTML block yeah but there is not yet no there's nothing like that yeah we wish that's the thing we've been looking at the block filters that might able us to tell it so much if it's invalid but that mostly happens like we're editing a block so I make a version of a block and then I make an update and then it sees it's invalid because it's changed so that's going to be a challenge for us definitely as we roll out and change unless we write all of our blocks perfectly the first time so that's our goal but yeah yeah we've not success so there is a way to say like okay here's the old code like if you see this that's okay just transform it this way we haven't successfully done that yet to get that work but theoretically like that is the thing is that you just keep those old versions in the code but you know we're kind of worried that you know what if you end up with hundreds of old versions in there do you want to keep all that if you're using components in those blocks then you also have to keep all the old versions of the components in there and rebuild that tree and so there's sort of these willing questions right there no yeah so if you like turn on Gutenberg if you want to install the plugin now or when Word First 5.0 comes out Gutenberg on and it will it won't change anything on the front end until you've edited it at the very back it's possible but we haven't ran into any of the regular plugins that we use we haven't had any that's very good news because I'm from you awesome yeah like if you're using page building plugins I don't know what's going to happen there with Gutenberg but that's you know that's crazy anyways yes does it go beyond that or because it looks great the way yeah basically it's a page builder it's sort of a instead of sort of using advanced custom fields or other page builders we're all sort of centralized around Gutenberg now so yeah it's a page builder there's rumors and like vague vogue posts by the people who develop Word Press that it's going to be something more and take over more of the theme process something like that that's going to happen but right now it basically exists as a page builder so the front end is not powered by React at all so the React is the editing interface and so it will it saves the content that was HTML in the database and that's what's output to the screen so it won't I think that the caching plugin should all still work because those all are based off the front end content which is still just static HTML and I imagine the image optimization will work the same way where it's not interacting with that much unless you're doing stuff on the admin dashboard side with the page editing yeah so I think that it you know those caching plugins should still continue to work fine same with image optimization yeah no I mean like the most there's been not the many like actual breaking changes and so I mean there's probably been some like things that like I learned that are no longer relevant but for the most part it's we've been glad that enough of it has stayed the same that definitely the stuff we've learned is helpful in sort of getting on board with it and sort of being able to dive deep over the time has been helpful so I would definitely say jump on board now yeah yes so Jen and I will be giving a session all about that yeah we have some sites that are live using it now for like places that we're really heavily into and sort of have more control over and so I mean in some ways we're already using it but yeah I mean listen to their talk about more but we do have a plan and it's going to be a long process yeah but definitely check out the create good block because that sort of sets everything up for you and create your act apps the same way but definitely a foundation JavaScript is going to be super helpful it that'll depend on the environment I mean I think that it's going to roll out probably not as a must use plugin but as an option like network available for people to turn on I think that most of our development like any step for us making is going to involve turning it on but like for places where we're more back up and they may manage their own thing that'll be kind of optional for them I don't think we're going to force anyone to use it but we think it's going to be helpful enough that if somebody like has an issue you know we're not going to say you know first step you know try and do something turn on in state blocks plugin so that is an ongoing discussion in the WordPress community and you are not the first one to coin that the classic editor there is a so there is right now Gutenberg exists as a plugin when 5.0 launches they are well also now there's a classic editor plugin and so that will be a plugin you'll be able to have in your site and install that and that'll have the classic editor basically be available to you now they've said that they will continue to support the classic editor for a while what does that mean who knows some people like relying heavily on page builders are grumbling and say we're going to fork WordPress is that going to happen who knows and so it's sort of unclear I'm sure there will be people who never try and upgrade to Gutenberg I'm sure there will be people who get fed up and leave the WordPress community any other questions are you envisioning like forking those for Gutenberg are you creating new things so that's sort of a question so Gutenberg really it just populates like in the past you might have a v-content function and so like as long as that still works like that's going to work so for our main plugin Hillsboro or our main theme Hillsboro that a lot of our clients are on that's kind of a minimalist theme and so that is sort of I mean we are making enhancements that Brian's making enhancements to that so it'll work with Gutenberg and sort of enable some options but at this point it doesn't really require a whole rewrite of that rewrite of that theme it's going to be the same theme there's another one we work with Poulton and Kim my main clients here who uses that plugin that will probably require more major rewrites of that plugin because it relies heavily on advanced custom fields and a little bit so some templates do so like if your theme templates are like calling you know get field and stuff and there's a lot of stuff in there that will yeah so if you're heavy into EACF that probably will require like a very advanced rewrite because you're not using the post meta to pull stuff in anymore it's all coming from the content so it really depends on where your existing theme is now yeah I mean they're working yeah their whole business model is built on page builders and so like they're not I assume they're not going to let their company just wither and die so but I mean it's hard to say like what are they going to do you know their whole business model is page builders and when page builders in WordPress core you know what are they doing as a value add so I would be very surprised if they don't make it compatible WordPress 5.0 but then it sort of becomes like what's the value add of that thing so personally I would you know like right now Divi is like kind of proprietary and if you want something to work with Divi it has to work with a Divi and so like is that going to be the case in the future where like using Divi is going to lock you into Divi then you might want to look at doing something else that's not so proprietary but if they build it in an open way that's going to integrate with other WordPress Gutenberg specific plugins you're going to have to look at you know how well that's integrating with your theme so yeah so yeah check out what they're saying yeah any other questions most of the stuff like our main themes are custom written sometimes like you know they'll come to us on campus they'll do their own thing and buy a theme and be using that and then they'll come to us and they want you know support and help in which case like we may inherit those and be using those and those are purchased but most of the projects we try and put into our Hillsborough theme which is custom built yes there thank you I think are we out of time yet I don't know yeah we're out of time okay thank you if you have more questions Miles and Lauren would you