 I'm Kel. This is Alan. We're gonna tell you about how we made our first Gutenberg theme and We'll start off with a quick introduction So, you know who we are a little bit. I am a designer at automatic. I Do a lot of different things there, but right now the majority of my time is spent working on the WordPress.org team at automatic So I am spending most of my time just contributing directly back to WordPress Which is a lot of fun Hey, I'm Alan I'm a theme imagineer at automatic and what that entails is mostly designing and developing WordPress themes with the future in mind and so trying to Prepare themes for Gutenberg and other things that are coming in our future awesome so We're gonna spend a few minutes up front to tell you a little bit about the theme that we built and then we are Going to jump into the details of how exactly we made it I'm gonna talk about everything from the perspective of designing the theme and then Alan is gonna talk about the development angle of it as well so it really started earlier this year at that point both Alan and I were fairly Comfortable with Gutenberg at least using it. We both tried it out but We were really unclear on the effect that Gutenberg was going to have on themes Which is something that both of us build and use every day, so we Built this theme to try to figure that out The whole thing was really built out of a quick experiment. I spent a little time one afternoon Building out all of the default Gutenberg blocks in sketch. This is actually something that Tammy talked about Very briefly in her talk this morning But in case anyone's not familiar sketch is just a design application for the Mac So in the same vein as Photoshop or Adobe Illustrator And in sketch you have the concept of something called symbols and those are just reusable design elements so things like icons or Or buttons things that you'll use really frequently in your designs And you may not want to recreate them every time you need to use them So you create a symbol that you can just place in a document anytime you need it So I spent one Friday afternoon building out a sketch library that included symbols for all of the fault Gutenberg blocks and What this did is this library allowed me to quickly build out a page of Gutenberg blocks in sketch and And then customize them so my thought was that I would build out pages and then jump in and start customizing them I'm messing around and I figured it would be a good way to start a theme design Here within my my design tool Well keeping Gutenberg blocks as the base of that design So for instance, I built a page like this, which is just a quick like homepage exercise for a band that I made up Just some simple elements like cover image up at the top some text blocks a photo of the band and a grid of album covers and Then I somewhat aggressively Adjusted all the styles and colors and typography to transform those default Gutenberg blocks into the beginnings of a theme and So I kept all the same elements up at the top there is still like a cover image block It has all the same elements of a cover image block, but they are highly styled and moved around Just with like brighter colors bolder typography So that I implemented a new grid And I made this single mock-up and I posted it along with the that library of sketch symbols to Theme shape right, which is a blog that both Alan and I contribute to And soon afterward Alan suggested that he and I actually take this home page comp that I have made and Make that into an actual Gutenberg theme so So we did Yeah, so Once I saw Kaila design I was Super inspired by it and I was like we need to make this thing happen just to show how You know awesome Gutenberg could be and so we really wanted to press the or push the boundaries of it And an experiment with it to see you know what things we could get away with and what things we you know couldn't Another thing we wanted to make sure that we did is You know through our experimentation Share what we learned both the things that were useful and that Worked the same from a theme perspective and then also the things that might change and that might be difficult and so we wanted to document that process and Share that information with the the wider community And so we you know we're you know most of our code is on github it's an open source environment and we also have a couple of posts that are up on theme shaper that Explained kind of how we got to where we landed on with the theme and and what we learned And we will include links to all that at the end So I'm going to jump in and I'll talk about Just the theme from a design perspective for a little bit I'm going to walk you through a handful of things that I learned while designing the theme and I'll share ways that My design process ended up being different than it used to be before Gutenberg and some ways that it ended up being very similar in the end So the first thing that I did after we decided to like really build that home page into a theme is I Designed some blocks and that may a lot of sense to me at the time because you know Gutenberg is all about blocks That's what everybody talks about. So I was like I'm really excited. I'm going to design some blocks But I quickly realized that it was important to design them within the context of pages so stepping back for a second this is the initial home page mock-up that I had and It did a really good job of setting the general design aesthetic that we were going to use for the theme but So what I wanted to do is I wanted to apply all those styles to all of the default blocks. That's what I did I figured we'd need all of these blocks designed. I figured it was creating kind of a pattern library Which is a highly prized tool for designers But after a little bit I realized Designing each of these pieces individually on their own was a really weird way to go about it because You know, no user is ever going to see a page like this No user is ever going to see just these blocks individually. They're going to like use them all together to build something So I was missing the bigger picture, which is that like a theme isn't just about individual blocks It's really about how they all work together so I wrote up a whole bunch of fake content for this fake band, which is a lot of fun and I started arranging all those blocks that I had designed into full pages And so this is a tour page that I started making using all the blocks that I designed before They got the cover image up at the top a wide-width image below that There's a button for person purchasing tickets and a table for tour dates and so I would iterate and experiment with all the styles on that page and Work out how that would they would adapt different breakpoints and stuff and then Once I had things kind of the way that I like them I'd migrate every one of those blocks back into my global pattern library So that I could use them again when I started the next page that I was designing and so after a while this Resulted an increasing a pretty decent span of pages enough to make a somewhat convincing fake fans website and And I was fairly confident that all those blocks that I designed Would actually work together nicely in the real world because I had I had made these pages And I used those blocks together with the with each other So I had a good sense of how they might work But in general that cycle worked well for me there I just designed a page just like you normally might when you're designing a theme today But have it start from the base of blocks and then when you when you have the page looking the way you like it Just take those individual blocks out put them in a block library somewhere whether that's you know I'm a set of symbols or whether it's just a separate document or something So that you can reuse those later on But this process did highlight a few things that I was missing and this is really where I realized that Designing a good power Gutenberg powered theme is still very similar to what we've always done designing themes and There are lots of very traditional theme design elements that still have to be designed You'll still need archive pages page footers the menu comments All of these things that we all know and love from designing themes already In designing these really wasn't all that different than it would have been without Gutenberg. However It was a little easier because I was thinking through the lens of blocks so for instance This is just an entry summary, you know pre Gutenberg it might have looked exactly the way it looks right here There's a title. There's an image There's a paragraph of text. There's a button But thanks to Gutenberg all of those elements Are part of a pattern library? They all have names They all are meant to be reused and by the time I got to designing this element of the page I already had all of the pieces and I just had to put them together The next major thing that I learned What's once we've got a little farther into development? I realized that there are way more block variations than I originally thought So I didn't know originally that like cover image blocks could be aligned to the left or to the right I didn't know that buttons can have Full or wide width variations and as you can see here at least today in the editor They don't even showed any differently if you set them to full or wide width But that's something that your theme probably should hook into and in half styles for even so So not only was I just completely overlooking different variations like that I was actually making design decisions early on that we're actively working against things that Gutenberg does out of the box so for instance this is our cover our cover image design and You can see that the text is aligned to the left-hand side and when we originally built this in We hard-coded that because I hadn't realized they you know users Canon should be able to Adjust the alignment of the text And so once once we realized our mistake I had to kind of go back and adjust the design and make sure that you know everything was going to work with that And it ended up being a little better in the end But you know you'll likely run into things like this when you design your first Gutenberg powered theme and you'll probably run into a few Less of them the next time you do it But really there's just a whole lot to discover in Gutenberg and it's gonna take a little time for for us all to learn all of the ins and outs and so the last thing I wanted to note before I Hand it off to Alan to talk about design stuff for a little is that I really liked designing cover image cover images specifically and I think the cover images are a really great example of Exactly, what's so cool about Gutenberg? So anyone who's tried out Gutenberg is probably familiar with the cover image. It's one of the things that everyone shows off It's probably one of the first blocks. He might use But we all know that something as simple as this was so it's just a Some text over an image And something as simple as that Was really difficult to do and they the old editor, you know, you either had to know HTML and build that out you had to find and Install and activate a plug-in that did that or you had to hope that your theme Allowed you to have something that looked like this somewhere on the home page that you could you know Maybe adjust with the customizer or something, but it was a hassle With Gutenberg anyone can just put this in there out of the box and they can put it anywhere They want on their entire site. So it's a really great example of Taking something that used to be really difficult and just making it easy for everyone and From a theme perspective cover image blocks are like a designer's playground It's basically just a poster or a page design exercise in itself. It's just text and an image and You can do whatever you want with that So I really personally loved exploring the relationship between an image and the text designing different variations of sizes and colors and alignments later on and Explored the way the different types of images like illustrations versus photographs would work with with the design of the cover image blocks and The absolute coolest thing is not only did I get to play with that? But thanks to editor styles, which Alan will talk about in just a minute Thanks to that Users can they can make all of these themselves They can play with it and they can design right there within the editor, which was really not possible before And so with that it really turns the editor into a design tool for the user And I think that's really exciting Yeah, because Alan with more development Yes, let's talk about this the code that went into this music thing to be worked on The One thing that I was a bit scared of before doing this working on this project is you know I didn't I don't have a ton of JavaScript background. And so I was worried that building a theme with Gutenberg would be just not possible not without having you know, JavaScript as a strong point But what I realized is that the theme process doesn't really change that much which was really good news for me like most of the Templating that you do like archive pages indexes header dot PHP Almost all of it stays the same And so it just kind of gave me a lot of confidence that I'd be able to build, you know, Kell's amazing design The one of the things we realized early on as well was that you know You're gonna want your theme to work without Gutenberg Especially now where it's still in the process of being worked into core And so an easy way to do that is to develop your theme without Gutenberg first and so if you You know use a process similar hours where we focus first on the design in the beginning and then jump into the code we're able to kind of Build the theme as a normal thing first and then add in Gutenberg and then that way We're covering both of our both of those bases without having to do additional work or take things in or out Based off of whether a user or a customer has Gutenberg install And then from there after you get your theme developed without Gutenberg Then you go ahead and add Gutenberg support to your theme and for this I won't get too deep into code just because it's just hard to really get into it in this this presentation format, but To install it you basically can go to wordpress.org download a plug-in and install it manually install it via the WP admin later when WordPress 5.0 is released Gutenberg we added to core and You'll be able if you want to keep the editor, you know add a plug-in to use the old editor For those that basically want to stay in the past, but you're like us. You want to keep things moving forward You'll just go with the Gutenberg standard that'll come in core in 5.0 And this is all you really need to get started with Gutenberg today It works mostly out of the box even if your theme doesn't directly support it You can still the the work that you do with Gutenberg does display on the front end of the site But you know for us we wanted to make sure that we push that further than just out of box out of the box experience and You know build the theme in a way where we Support a Gutenberg Once installed you'll get an editor that works essentially like this where you can Build in blocks and organize your content in a more dynamic way They use utilizes blocks to give you a content rich experience That helps you just build a or tell a better story. You can do much more detailed Layouts and organize your content in a way that it's just much more dynamic than which you can do with the traditional editor The other thing to be mindful of is just a WP content function, which is essentially what outputs the content that's in the editor When it comes to Gutenberg, there's you know because the blocks are so much more complex than regular Editor content. You just have to be careful with wrappers and any Other type of HTML that might interfere with what is output by the WP content function And this will just allow you to do more things with the blocks that You know that come with Gutenberg So the next thing is with styling Music theme for Gutenberg A lot of that went into adopting The blocks that kill design and turning them into Uh, or basically making css to support the designs that he that he built and so um, it's kind of similar to What you do with editor dot css. Has anybody's familiar with that? A lot of themes or not a lot, but a few themes use that currently where you can kind of make the Appearance of the the current editor look like the front end a little bit With Gutenberg you can push that much much further. And so we spent a good amount of time making sure that the Basically the Gutenberg experience looks Or it's been a bunch of time making sure that that Gutenberg experience looks as much like the front end as possible Um, and this just basically makes it so that your users Aren't you know confused by what they see in the back ends versus what they see on the front end And you also kind of have to Because of the some of the options and stuff that kehl mentioned and the the different things that Users can change within the blocks you have to kind of be keep that that all in mind as you're developing Because they'll you know be able to do things beyond some which you you might envision for a particular block And so you just want to uh, keep that in mind as you're as you're going through the development process Um For this part i'm just going to explain some of the uh, how we have the styles organized in music theme and this is kind of a I guess maybe an optional way to do this There's a number of different ways to organize the styles in when using When building a thing with Gutenberg But this is pretty close to what we ended up uh building for ours And so the first file you see here is uh editor dot css and those are or this this file is specific for um The editor experience with Gutenberg And so it's only styles that don't appear on the front end And you'll find this useful because the Blocks in the editor have different class names than they do in the front end And so you'll have to basically build a style sheet that just addresses the Gutenberg editor And so editor dot css is that style sheet? You also see style dot css here, which is the main theme style sheet and this is Basically the global Theme style sheet and so you know everything from the headers the footers archive pages Everything that's not Gutenberg and everything that is Gutenberg Can't exist in that style uh that css file But for music theme we sort of broke out Blocks dot css just to address Gutenberg specifically And so the blocks dot css file is essentially uh In queued on the front end of the site and so it deals with blocks from Gutenberg, but it doesn't touch the editor Like in the admin area at all Here's an example of how we in queued our blocks dot css for the front end It's just similar to what you would do with uh, you know styles like the main theme style sheet Where you in queue it on the front end And in doing it this way we just were able to have like a separate Style sheet that only addressed the blocks and how they appeared on the front end In the same as for the editor Where instead of but the only difference is that instead of addressing the front end we're addressing the back end here And this just gets include in queued uh to the Directly to the Gutenberg editor. So it only appears there And again, you can use it to fine tune blocks so that they appear More consistently uh or so they appear, you know in the editor more consistently With how the front end looks This is another optional thing here that you can add uh for edit. It's for it's an editor color palettes Support thing that that you see here. So what's what's happening is that it's Basically adding a color to the Gutenberg editor for certain blocks You can change colors like background colors and text colors And so if you include in queue the colors that you're using your theme Into Gutenberg then users can select those same theme colors right there in the editor so that everything Matches on the front end So it's really useful. I highly recommend using this But it's definitely an optional feature that you may or may not want to include And the same goes for this aligned wide support This is something I think that everything's your support But you may have a case where you might not want to use it, but essentially it's a way to break out Certain blocks so that they Can span wider than the actual content area of a theme um And so for a lot of times like on a lot of medium sites use this quite a bit where you'll have like a wide image That just stretches the full size of the of the browser window Uh by adding this support you'll you're able to to add that functionality to to Gutenberg Um and kind of like what I've been hinting at uh earlier is the the editor experience is integral to uh To to Gutenberg and for us Making the back end look like the front end is it's just it just makes things easier for everybody including uh particularly for for your users you want them to Know what in the back end? How things are going to be organized how they're going to look so in the front end they feel confident What's what's going to appear and so seeing this example here on the left is just a standard Gutenberg Layout need to notice how like the cover image block doesn't really look the same The fonts are a little different the spacing is a little different um And this is just it's uh, it's just can make things confusing for your user where they You know won't associate the front end with the back end and that's can can be problematic And so instead you want to uh, you know spend a lot of time in that editor dot css file Making sure that the blocks look as closely as possible to the front end And so you see here the cover image now looks the same The spacing and the fonts and all that ties in we did run into a few issues with the alignment and the background colors where we Just didn't couldn't find a good way to have that Gray background with the white box around the actual block It got a little tricky to do that in the editor and so we're hoping we'll We can basically iterate on that a little bit later Um And so another thing when you're working on the theme Both in the design and the development phase is you're going to come up with ideas for blocks that already are that don't already exist There's tons of them, you know that that come with Gutenberg out of the box But depending on what your theme's purpose is and uh, you know, who the audience the theme is for You might have ideas for for blocks that don't exist Um Unfortunately, uh when it comes to the theme portion of uh, or the theme development portion It's not a good idea to build your a custom block inside of a theme Um, it's it kind of follows the same rule of thumb that plugins do where Uh, when you're working on a uh, when you're trying to figure out whether to add a feature to a plugin versus a theme the rule of thumb is essentially kind of that of On the theme side is is essentially it is just dealing with the, uh Presentation layer or how things look how things are organized. Maybe how they behave Whereas for plugins you're adding new features. Um, and uh blocks kind of work on the plugin side where You're adding new features to the core functionality of WordPress And so because of that you don't want to create a scenario where if you have a custom block in a theme And a user wants to change that theme later on Once they change that theme they're going to lose any data or information that they had in the in the block That only existed in that theme and so you don't want to create that scenario So it's really important to if you do have custom block ideas If you're going to make them then just build them into a theme and install them separately. Sorry, build them into a plugin And install them separately from the theme Another thing is that uh block development and theme development are very different I kind of learned this the hard way. I thought that uh, you know Actually while we were working on music theme kel came up with a couple of really interesting Blocks that were just really nice like there was a audio one with track lists There was a few others that were really useful for a musician, which was our target audience, but And so I spent a little time to try to figure out, you know, how to you know, build one of those things and My background is mostly theme development. Um, which is largely php html css And when it comes to block development, uh, it's just a lot of JavaScript and not having that uh background Just yet it just it made it difficult for me to to uh, uh, Figure out how to build one, um From scratch and so something I'm definitely going to you know, take some time to to get a little bit better at But uh for now, it's just good to know that, you know, when you do have that idea If you do want to make those a custom block or something like that, it's going to be different than Developing a uh a theme Um Another thing you can do is Extend a block, which is a base. It's basically like um adding an additional option or feature to a block that already exists in core Uh, again in some situations, this is okay to do in a theme But more uh more than likely it's better to do it in a in a plug-in Just because if you're if that new thing that you're uh adding to a pre-existing block Uh has content associated with it. You don't want to lock it into the theme otherwise if it's a uh You know a feature that you're adding and it doesn't have content associated with it Maybe it's a extra class or something that you're at it or a color thing that has to do specifically with your theme You might be able to get away with doing that Uh via extending a block within your theme and so you just want to you know be mindful of how you know Any custom things you do to blocks might affect a user if they switch away from your theme Um And so this was actually an example of of uh how we were able to get around Extending a block like I mentioned I had a little trouble with the java JavaScript stuff But what we ended up doing is adding um some additional classes to our blocks that allow users to Uh type in a color class right on the block that on the fly changes the color right there in the editor And so it's not as smooth as like an as extending a block might be but it works really well And it didn't require any extra job scripts knowledge to to pull this off And so um you can do you know some some interesting stuff with uh, just the classes on on a block And we'll share a bunch of resources on this link here both to The theme shaper posts that we we both worked on and a few other resources about You know extending blocks building blocks from scratch In a few other things so be sure to check out that link and If anybody has any questions Yeah, so the question the question was about uh cover images and It's actually how how to make them work on various screen sizes And so the way we handled it for the music theme is I think we have Yeah, I'll go back to where we have the screenshot of Cover image So, um, yeah that image right at the very top I think we're coming to see you and then the image What that is is a cover image block on both and When we built this we just used View porcite units and css to make sure it was matching uh The the screen size that we wanted so in this case If you were to view this mobile screen on an actual device We have responsive styles that kick in and we'll make it the exact height of the viewport because that's what we wanted in this case And and it behaves a little bit differently on larger screens because like you said we didn't want it to be like Taking over your entire screen all the time in that case so it was really just hooking into responsive styles and and Just tweaking it to get to get it however you want But there was a lot of flexibility there because it's really cover image blocks and all blocks really are just They're just basic html output. Um, so they're really easy to hook into and style however you'd like anyone else So the question is uh, if you if you don't want to include custom blocks and things In themes, could you rely on short codes instead? Right, uh, you can Right you you can However, I think it still goes back to what alan was saying before in that if it's something that's really just going to affect the presentation of the theme then that makes sense, but Just like any other short code if if it's something that would Break if somebody I guess a short code would break if they changed their theme if it was built in so you just don't want to Build something in via a short code that's going to Break the user's site or look like it's broken if they were to change away from the theme If it's built as a plugin that yeah, that's all set. Yeah, then that's fine. So you can still use that in that case Yeah, that's interesting. I uh, it sounds kind of like a like an extending blocks is what you're doing. Um, and Uh, I definitely found some examples of that and they're they're linked on the uh slide that we'll put back up But uh, yeah, it's it's that would probably be the best way to do that And if you did those extensions in a plug-in then they could be You know interchangeable with the theme Or as you change things rather that went in the back Oh Right there. Oh, can you speak up to something? You said so extending the blocks Ah, right, right. Okay. Yeah, good to know Uh, so he was just saying uh, because gudenberg is built on react It is it's built in a way that kind of expects you to extend on blocks There was another Yeah, that would Yeah, so we Yeah, so we we built uh music theme with sass and that made it much easier to kind of manage Where code would appear where styles would appear? Um, I we didn't show all of that just because it's really complicated to Explain if you don't already understand how sass works, but we did, you know, use that to basically make sure that um You know the the block style is both in the editor and the front end our presence And then we had the editor dot css file would basically add tweaks on top of that just for the editor Um, because the editor, uh, you know, it doesn't have the same theme with it doesn't have a lot of the Wrappers and stuff that that are actually exist in the front end. And so your selectors are going to be different there and so we basically use sass to kind of uh Make sure that the same things that needs to be in the same place We're there and then any tweaks we would just add on top of them with editor dot css For the back end and then for the front end it was just you know, the full Main style sheet that that appeared there. So yeah Yeah, so that that's something you could do with extending a block and like I mentioned like that would be a case where Especially if you're taking something out you could probably do that in the theme When a user would switch they wouldn't lose anything They just would probably just gain a few extra options with a different theme And so you could definitely extend the block to remove stuff from it which sounds kind of backwards But uh, yeah, that that would be the way to do it That was just for two I think we had Well, we we didn't have a building any. Yeah, we didn't build any Yeah, but we designed um, I know that there was an advance one. Yeah, there was an an events block That was specific for music where it had like the time like the places where you're going to be visiting ticket links All that type of stuff. Um, and then there was like a player Like a music player that had like an album list album cover type of thing And there's some examples of it in the mobs in the slides. Um, But uh, yeah, we only designed it. We didn't get to the to the code Yeah Also, we didn't develop the custom blocks. We didn't yeah, we didn't get that far. Yeah. Yeah, it's it's uh Still a bit of a hurdle for me personally just uh, not having a huge javascript background And so I want to uh, I probably have to spend a little time with the slides in the previous session Before I jump into that pool, but um, yeah, but it you know, I'm not exactly sure at this point, but yeah, makes your question I think just so Much of this feedback has already been shared, but um But alan alluded to the fact that in the editor not all of the block class names are the same as on the front end and in fact some of them for instance, if you set a uh On the front end if you change the block and set it to align wide or align full You get a class that's added to it that says align wide align full And you can just hook into that with your styles and it's really easy that doesn't always happen in the editor. And so you have to um For a couple blocks you have to hook into like a data attribute or something in your css, which is really weird to do um, so really I think the biggest piece of feedback would be to to make sure that That all of the the structure of the blocks and the naming Class names and stuff are all consistent but in both places because that would really speed up development And eliminate a lot of the kind of testing and and uh back and forth that was necessary All right, I think that's all all we got but um, we will be around in case anyone has questions and thank you very much