 My talk is gonna probably go a little short, so I'll give people five minutes to wander in, so I'll just do like a really long introduction, and then I'll go into the talk. So my name is Joseph Dixon, and that is my Twitter handle. I've been using that Twitter handle since before Twitter, and AOL days. So that was before people used their real names on Twitter, so I thought I was being really clever. So yeah, graduated high school in the 90s, and that Joe for Skaw handle still lives with me today. My website is joseph-dixon.com. The dash is important, because there's another Joseph Dixon in Canada who had his website hacked, and the guy tried to sell his website to me, which was actually kind of amusing. So he was a politician in Canada. He didn't pay for his web hosting. It got cyber-squatted. I guess that's technically not hacked. He got cyber-squatted, and I got a lot of traffic from Canada for a few days, people thinking I was him. And then a couple weeks ago he contacted me on my Gmail account, trying to sell me the account. Not the Canadian politician, but the guy that stole it, which was nice. I told him no, and he hasn't emailed me back, which was awesome, actually. I'm a web developer at Pitzer College. That's a Small Liberal Arts College in Claremont, California, with about 1,100 students. So we use WordPress for the entire front end of our website. And I'm also a member of the Illinois Empire Meetup Group. What? What? I'm a big fan of WordPress. So let me see. What other random trivia about me? Can I stretch this introduction out for a few more minutes? I thought you were talking to... No, I don't. Oh, I do have an answer for your question earlier. It was automatic that did some Gutenberg Jenga blocks. And I think I saw somebody had them at a WordCamp late last year. Yeah, they were Jenga blocks with like the different automatic properties on them. So now that it's on video, I hope I'm not wrong. And then... All right, so let's go ahead and get started. Okay, so this is what I was working on. The Kubrick theme, if you're not familiar with it, was designed in 2004 and became a default theme for WordPress in 2006. It has not received any updates since 2010. And that's why I decided it would be a fantastic item to develop a Gutenberg, to prepare for Gutenberg, right? Because I would set it up, I would get all these air messages, right? I would run it through a debugger and find out that it's running a ton of different deprecated functions. This would be a... So it would appear as though my website has not been updated in nine years. And so I actually fixed those features pretty quickly. Surprisingly, the only error that I saw, like right up front, was the sidebar here, completely disappeared. After they stopped updating the theme, they changed how sidebars getting queued in WordPress websites. So that was really the only fix I had to do. And naturally there's some other things that you could improve with Kubrick, but this is more of like an experiment in updating it to be Gutenberg compatible. So for context, this is Michael Hillman. I hope I just pronounced his name correctly. And it was the default theme from 1.2 to 2.9. So I'll give you some context as how long it was a default theme. Now we have default themes that basically last one whole year and then they get replaced by another theme, with the exception being for 2017 when they didn't release one for 2018. So this was a default theme for four years and was eventually succeeded by the 2010 theme, which introduced a lot of those new template tags and functions that WordPress had been developing over the previous four years while it was a default theme. And I forgot to mention that is the original, that is the developer of the Kubrick theme. Yeah, I mean, he's bald. It's just a coincidence. I had no idea that we were both bald. So you might be not asking yourselves, what did the Internet look like in 2006 and why is Kubrick super important to WordPress? And so I figured well, why not just go to the Waybag Machine on archive.org and literally take screenshots of some social media websites, which quite honestly in 2006 was the competition for WordPress. This is back when it was a blogging software first and people were starting to use it for business. So that's your Facebook login page from 2006. Yeah, no, I mean the color palette is still the same. I don't know what MySpace looks like today, but if you guys are interested, apparently they had a really good article on Fast and the Furious Drifting right around June of 2006. So you guys could check that out for your Fast and the Furious Tokyo Drift Twitter. This is funny. Now I have a feeling that this is probably a CSS error in the Twitter platform. When I was using Twitter at this time, this is before we had smartphones. The iPhone didn't come out until the following year. So people were using Twitter on the website, but I was actually using it on my phone. You know, you'd sign up for an account, you would tweet a message to, I think it's 40404 is the phone number, and you would send out tweets. And back then it was just me tweeting to the three other people I know in real life at that time when we were just doing it as group text messages. And YouTube in 2006 was, this is way before Google bought them out. This is back when they were the video blogging service. So if you take a, it's a little blurry here, but if you were to take a closer look at the screen grab, you could see that a lot of these things were just people video blogging. I did forget to mention, I think at the beginning of the video that these slides are available at my website. They're in the footer. So if you guys wanted to follow along on your laptop, you can. So the Kubrick theme by contrast was easy to use, had a clean design, was very simple and extremely modern. Back around this time I worked at a newspaper, right? And I was a web developer back then as well. The idea was always get everything above the fold. Well, I could tell you right now my editor would freak out if they saw how big that header banner was in 2006. Because that was the idea. People had computer monitors that were 1024 by 768. So, you know, you'd probably see the first third of this page. But if you're using it for browsing and reading, then it's, it was very clean and easy to read. It's impossible to read now at 13 pixel font size. But back then it looked a lot larger. So getting to the meat of this presentation, the idea was to analyze what Kubrick looked like. I updated it a bit. You can see a little mistake there on my search box. This is actually a theme that I had forked. And I started to get it to work. And you'll notice I'm running it on a local host that's using WTP, WP debug. That will show up alerts and messages if there's something wrong with the code. So it's pretty clean. The search box is the only thing broken that I noticed. And this is the inside page. So, so Kubrick was really simple. It had a front page and it had interior pages. And, you know, naturally you're going to say to yourself, well, why would I want to update such an old website for Gutenberg? And that is a legitimate question. Because you have to ask yourself, I'm going to spend 20 maybe 30 hours coding the inside of the dashboard to look like the front end of the website on an old theme. So ask yourself, would it even be beneficial to yourself or your client to use it in the first place? One of the items that I'll notice is like, well, blocks are super easy to deploy, right? So if you needed to create a button with some text on it, you could do that in like a matter of a couple seconds. Whereas if you did it in the classic editor, you'd have to go do some class tag, hackery, maybe even a short code. And then again, ask yourself, well, should I just be redesigning the website? And I mean, you know, if we're going to be using Gutenberg, maybe we should just like reanalyze whether or not this website has any other problems that need to be addressed. So it's a good time to think, OK, well, maybe I'll redesign it during the use Gutenberg in the redesign process. Additionally, this is what I found in personal practice. If you switch somebody from classic editor Gutenberg, you also have to adopt their training, right? I work at a college. Some of my co-workers and colleagues have been using it for three or four years. And as soon as you change that dashboard, they're going to be like, this looks nothing like what I was using yesterday. And they call you on the phone, they send you an email. And I still find myself referencing documents on how to do something. Or I'll discover some hidden feature in Gutenberg that I didn't know about. Gutenberg has a way of hiding things under contextual menus that are literally hidden. You hover over something and then suddenly a little plus icon shows up. And that is just really frustrating. But it is clean. So once you get used to it, it's good to use. So chances are you've at least installed Gutenberg for a few minutes. So this will look familiar to you. This is the default styles that if your theme does not support Gutenberg, you'll end up with this large serif font header followed by a paragraph of text, a quote block. All these things are the default blocks you would find in the editor. But what if, what if it looked like the theme itself? And this is actually key. I found that when I started editing my themes for the back end to look more like the front end, it actually saved the clients being my coworkers and colleagues a little bit of time. If they floated an image to the left or to the right, then it would look something like this on the front end. So sometimes people get concerned about the line break of a word showing up right next to an image in a particular spot and they'll edit the text to get it to land there. It's just little things like that. So if you can customize the back end of the website to look like the front end, you can save some time for the people developing the software. Jason, yesterday morning, was presenting on Elementor and block editors in general and block, block page builders, page builders. And what he was saying was effectively what I hear from everyone else who doesn't want to develop is like, I just want to know what the website is going to look like before I hit publish. And this is kind of a gray area in between that can allow you to do a little bit of that without having to install a page builder. So during the rest of this talk, I'll be showing you how you can go in and override some of your design changes to do something like this. The first part is learning how to enqueue block styles. The top one is the one that we'll be covering today because this is a classic theme that was designed before before the before Gutenberg. But there are two other functions. You can have the style show up on the front end of the website and on the back end or even just on the front end of the website. Those will be used for different reasons. So let's say you're building a theme today from scratch, you'd probably want to use the second option in queue block assets. Because then that way you're only setting up your design styles once and it goes in both places. The last one, let's say you're designing a website today and you know that you're going to be using classic editor for a while. Then you could just throw them over to the front end and not worry about what it looks like on the block editor. It's kind of a backwards way of thanking because if you installed Gutenberg it wouldn't work on the on the back end. But there's reasons for that. So we're going to be talking about just styling the editor for the rest of this talk and that is in queue block editor assets. So I'll have that. The slides are on my website if you guys want to inspect it later. This is what an entire code block would look like in functions.php if you wanted to enqueue the block editor styles. So starting at the top we build the function. We enqueue the stylesheet. I'm giving it a name of Gutenberg editor CSS. That way if I look at the source code later on I'll know that this is pulling in the Gutenberg editor CSS. I should not be seeing this on the front end of the website but I should be seeing it if I do an inspection on the editor. If I'm seeing it in both places then I probably enqueued it with the wrong with the wrong assets. They're on the right. And then of course the path where the CSS file is located. So because there is I lost count of how many core blocks there on Gutenberg and they're adding a few new ones every couple months. I'm only going to be covering four. No one's got time to go over every single video embed block from the 12 different video services that they have included. So the first one is clockwise from top top around would be the title block, the paragraph block, the quote block on the right and the list block on the left. All of these have unique styles for Kubrick. So they also tend to be the most used when you're developing a informational website. So that's really low resolution guys. I'm so sorry. The what is happening here is I inspect the editor while I'm working on it to try to see what CSS classes I'm going to need to override in order to get the title to look the way I want it to. So on the left you have the class tags that I ended up overriding for my theme that allow me to change the font and the size and all the other information. So in this case you'll see some similarities as I flip through the rest of the slide presentation, the reference to the word editor, the reference to what it does and then underscore underscore something else. And it's it's it's a repeated method so that developers know what they're editing. I don't know if it mentions it in the handbook just yet but but I've been noticing a pattern so I might as well work with it. I'm sorry I forgot to mention so what I'm doing here is setting the font family to liberation sands which is kind of like Ariel and Helvetica and then fall back is a sans serif font and adjusting the line height. The reason I'm doing that is I want to get rid of some of that additional padding on the titles because the default Gutenberg styles are this really big title and Kubrick was was tiny. So also overriding the editor with something I've noticed in the other direction is that the blocks are very narrow in Gutenberg and the front end of themes tend to be very wide. In this case it's actually the opposite so I needed to change the max width to 480 pixels so I could squeeze it a little bit but you can go in the other direction. WP block is more of a general class tag that applies to all the blocks and so you know I set the font family and the sans serif and the line height and all this stuff that I would like to see flow further on into the process. Some of it doesn't really work and I'll go on to that in a later slide. It's because there's a lot of inline CSS in Gutenberg right now and I'm hoping that it gets addressed later on but by simply inspecting and and grabbing the paragraph block and that's all I'm really doing is saying okay if it's a paragraph and it's in the editor styles wrapper then set the font size to 13 pixels and the line height to 1.4. Really simple right? I don't want it to be 18 pixels and and super spaced out. That's not what my theme is looking for. Unfortunately I'd use important tags because the way that the JavaScript works in Gutenberg when you focus on a block when you start editing the block JavaScript and class tags start showing up it's very responsive to your whether or not you're inputting with that particular block or not and that affects some of your styles. So in practice what I found myself happening while I was editing this particular block is I'd be like oh great it looks great it's 13 pixels the line height is perfect looks just like the front end then I would click on it to edit the text and the line height would increase and then I would unclick it and it would squeeze back down. Sometimes it wouldn't even squeeze back down. So the last thing you want is bouncing text in your editor. So important tags. Fortunately oh unfortunately the list block is really busy. Same method. The list block you actually have two default blocks a large no sorry ordered list and unordered list. So there's a lot of code to go with that. Same idea. Identifying which class tags are in the editor and then overriding them. So you see a lot of repeated references. The line height for 1.3 for whatever reason this this theme wanted to make the list a little bit smaller line height. They didn't repeat the exact same line height in the design but I still had to run an important tag through it because of some CSS issues. The next one is the font size and the padding above and below the list elements to try to squeeze them up a little bit and the padding left of the the standard block. In this theme if you're doing an unordered list it will pad it over to the right make it look more it's not in the same alignment as the paragraph block but the ordered lists were. Six months is watching this video and laughing right now. Okay sounds great. So the remainder of this code is just styling the the back end of the editor to look like the front end. So a lot of what I was working on at this point was referencing the original style sheet and code from the original developer and trying to apply it to the back end and and and doing a lot of a lot of code because none of his code will show up in the block editor. I liked this one because it only had four lines. And it still had its own weirdness. The quote block has two options in Gutenberg. You have the large quote and I'm guessing the is not large. So if you take a closer look at that top line right there there is a pseudo class in that class tag. What that is trying to do is saying okay if this is not the large block then apply these styles. Well one of the problems I ran into that isn't sort of direct related to this project is if you're adding additional quote blocks to the core blocks because you could extend core blocks in Gutenberg which makes it really great if you have a block that does 90% of what you want to do and you want to adjust it. So you create a third version right? No big deal. Well then these styles would apply to that one too unless of course it was labeled is style large in the class tag. So that that had its own little issues. I know that's a bit of an aside but if you ever get into it it made things a little tricky. No doubt there's a lot of trial and error in overwriting the Gutenberg styles and a lot of inline CSS that required me to go in and use the important tag. I found it kind of frustrating because I kind of pride myself in not using the important tag. I've been doing CSS long enough that I know if I have to use it it's not because of me. So testing the CSS overrides on the left you have my my block themes so you'll see some commonalities there with the underscores the post title it gives you an idea of where the CSS is going there's references to wrappers for the paragraph block but you know this tells you that the code that I'm writing is just going to be for the post editor itself and this is the style from the original theme itself and actually the end of the style sheet which is a surprising 731 lines of CSS this guy was really lean with his work and a reference to a quote at the end of 2001 Space Odyssey where Hal 9000 is singing Daisy Daisy as he's getting shut down which is why the theme was nicknamed Kubrick if you look for it in in a theme archive it'll just say default theme but people in the community refer to it as Kubrick theme and it's because of that little line of code yeah yeah yeah so this is a before and after of of the editor where the fonts were the default styles and then what I was able to work on in a couple hours of CSS work to make the the front end and the back end look more alike and more importantly this is what I was going for making it so that if somebody is editing on the back end they know what it will look like before they hit publish or schedule because if we're working on a website especially what I do with and in higher education is I want to post a press release and I'll kind of want to know what it will look like before I schedule it for three weeks out and this is kind of like that sure you could use the preview button but this will save you literally seconds every single time you would have maybe hit that preview button and that doesn't sound like that big of a deal but if you've seen how low that these how slow that some page page builders will edit with I mean come on they have a loading sequence you know this this will save you a little bit of time and this is all stuff that you could do in core without installing additional plugins it just means that you're going to have to edit some CSS create your own CSS and drop it into your child theme or or your original theme so oh I upload you guys missed the animation on this because I uploaded it to Google Slides and it's no longer animated I know I'm sorry I mean I'm sure you guys have all seen 2001 a space Odyssey so I'll just tell you it's just him asking how to open the pod bay doors in a loop for like two seconds which is kind of what it's like you're working with Gutenberg right you're like all I want to do is get to this button to go right here just right there just right there why is it not that way so yeah yeah no kidding so quite frankly possible nested next steps you guys might be interested in is you know go in in queue the block the block editor start with WP dash block and see what kind of styles that you can adjust for you yourself for your clients website that will just adjust the width or whatever and start playing with it you can visit the Gutenberg handbook it the documentation is really getting good it's written in such a way where you kind of have to start on the first page and flip through it like an actual novel which is a little strange because I like to go through stuff like stack overflow style and just find the solution like at the bottom of the screen that everyone upvoted yeah no the handbook is not written that way so so it's best to just read it left to right up to down and heck why not watch 2001 a space Odyssey while coding or your other favorite movie and then just throw a little quote at the bottom of it just to see if anyone references it you know a couple years later part of the reason I wanted to give this talk is as an example I hear this a lot from from meetups and friends who also use WordPress is that they're scared of Gutenberg and and yeah it's it will have a time commitment to learn how to edit and work with it but the payoff is down the road once once you get a few things under your belt it's actually really responsive and quick to use I started using Gutenberg in ways that I didn't think I would I I I've used Evernote as a notebook I've used other different type of apps now I could just use my WordPress dashboard and you know I there's like little tricks in Gutenberg like you can like hit return and it creates a new block right but did any of you guys know that you could just hit slash and start typing and you could search for the blocks yeah yeah I really should have put that in the slideshow because that's probably the one largest thing that you guys are gonna get like want to check out later so create a block hit the slash right next to your shift key and start typing and and so if you're looking for image block it'll just pop up right there so what you could do is just start tabbing through and then they made so many accessibility improvements to Gutenberg that the workflow of typing and writing in Gutenberg is so streamlined that I don't even bother using Libre Office or Microsoft Word I just start editing and working in the in the editor I mean I'm writing for myself right so I'm not gonna have to share it with a another editor so that that's all on the presentation and I did finish a little early about 15 20 minutes early I'm hoping you guys have some questions yeah question time let's go to let's go into questions oh I was getting a little bit lost earlier are those all in function PHP like like to to to work on the way is that all in functions dot PHP like those blocks these here oh this is my my blocks css file yeah yeah so what you it probably didn't pick up your question he was asking if this code here was in PHP it's actually in CSS man it would have been so much nicer if I put CSS at the beginning of this slide thank you for referencing that yeah no I probably no this is the only part that was PHP in the presentation and and you're right I didn't have a PHP tag at the beginning in the end of this to provide a hint so it looks very similar so this is the only PHP you would have to do is add something like this to your functions tag to reference a style sheet I came in a minute sure is this now in the repository and I can go install Kubrick right now today because you've remade it no no I I do I actually okay thank you for that I have the code on GitHub if you want to download it I ask that you do not use it on a production website that you do it in a safe space that's not going to eat any content because all I did was edit those three or four blocks and everything else on that is not Gutenberg ready but yeah if you want to see the code in the blocks I'm going to be adding the code to my post on my website but also the you could you could follow it on on GitHub if you wanted to check it out I might actually go back there make a few small edits over time the problem with Gutenberg isn't Gutenberg's fault it's just not responsive and people don't look at 13 pixel fonts on on their their desktop 4k screens so if you if you if you guys thought that this is very hard to read it's hard to read for a reason it's because we don't we don't consume websites the same way today and I still know a few mathematicians who actually use the old-school thing okay okay well you might want to you might want to fork the the project you're free to do so over there on github and then fix all the errors that I haven't addressed there is I don't remember the developers name but his talk is on WordPress TV and his talk was from I want to say 2014 where he literally went through did the same thing I did so it would work with WordPress but before Gutenberg and he audited audited the code and so for instance he turned this background image into an actual CSS background and rounded the edges and it works on phones I didn't do that but you know what I might I might fork his project to and save myself some time and then you know I can call this Kubrick 3.0 or something or 5.0 and make no money off of it 2010 I could do that but it's still nine years old oh I got you to 2010 yeah yeah but that wasn't that wasn't filmed by Stanley Kubrick okay question I guess would you say my question would be what would you say you really pulled out of this project while you were working on it okay that's a really good question because this was the first thing that I had done in Gutenberg and it's kind of like you most of you are designers you and you might inherit a website from somebody that has not been redesigned in five years and they hand you a theme and and they say to you I really love this website can you make it work and this is kind of that process right you don't have to throw out the old code you can go in you could refactor it you can audit it and you can customize it for for Gutenberg so that it's modern again that was really really what I was trying to get through it also taught me that I don't have to go in and add additional blocks from plugins I could just go into my theme and add adjustments and then that website will literally just have the theme and and core WordPress and that just means I have to hit update less frequently which saves me time on maintaining a website any other questions in the back not just for the site for any site back it does not adopt the style in the front and I think that someone said that that capability is supposed to come into Gutenberg at some point. Well it's been four months Gutenberg was released in December and it's still not here and and yes it is in a way and on the function slide that's kind of what's going on here is that let's if you plan out your CSS correctly well if you plan out your CSS saying correct would be inaccurate because any way you use it is your way of using it if you plan it out you could say okay well I know these blocks are going to be on my website I'm going to literally write a style sheet that applies to every single Gutenberg block and so you can in queue your blocks on the back end and the front end and then anything else that isn't related to your blocks you could place in another style sheet or you could place them in the same style sheet if they don't conflict with each other because at the end of the day your back end is still going to be the back end and you don't want all those extra styles interfering with your admin bar doing some other weirdness so so you could do them in both places and I think that what you said about the the front end of the back end looking the same I think that what they're referring to is the third one where no second one where you're doing it on the front end of the back end any other questions okay we are super early so I guess that's it you want me to put on the wig all right the MacGyver wig I got to touch the MacGyver wig so David was hacking Gutenberg for what was it no what was the name of your talk earlier today yes MacGyver plays with box yeah but I really did feel like I was MacGyvering I really did feel like I was MacGyvering Gutenberg in the sense that as you could see when I was going through some of the slides some of the CSS I had to apply in some places didn't work in others so I had to literally go through and fiddle like crazy I spent more time working on that CSS than I did at the slide presentation for for this so I think that shows everybody so awesome yeah yeah yeah I think what it feels like with Gutenberg as Gutenberg has a bunch of features that you want to implement yes it's waiting for certain wet technologies to catch up to make them feasible to implement yeah I mean Gutenberg has a lot of features that are not implemented and and a lot of blocks that I think that are missing from core blocks when I made that joke about having a video embed if you go through and look at every single core block there is at last count it's about 40 about half of those are video embeds for different platforms I would really really like them to spend the time on having a list thing where you could put a little checkbox and you could check things off and like make a checklist rather than rather than a stop yeah so I mean there's a reason right there anyone listening today you can create a block and and make billions of internet dollars just for having a checkbox on it so people could check stuff off fun times like a checklist block I mean come I like like no seriously how many times have you gone in and and went into your email and no not email but Google Google what's the Google list keep go keep has a block that you could check off right we could be able to do that in WordPress yeah so awesome thanks everyone