Discussion: Going from Creating classic themes to Building block themes

On October 7th, 2021, I had the privilege to host an amazing panel with Ellen Bauer, Andres Noren and Carolina Nymark on a Live Q & A.

We discussed block themes and how these three theme developers made the journey from creating classic theme, to building block themes.

On this post you’ll find the Video recording, the resource links shared and the transcript.

Stay in Touch with the Panelists

Video Live Q & A: How to make it easier to build blocks

Previous Live Q & As on Block themes and Full-site Editing

Theme.json resources

Block Themes for Full-Site Editing

Tools

SchemaStore: https://json.schemastore.org/theme-v1.json Most IDEs or code editors use the scheme json to help developers with labels and values

Theme Team experiments

WordPress Theme Team shares code on its theme-experiements repository including

Documentation

The Show Transcript

Birgit Pauli-Haack: All right. It’s being live streamed to YouTube, and I welcome you all here at the zoom in. Yeah. And of course, I was waiting for the YouTube screen to collapse. I can shut them up because now I hear myself in five minute increments. All right, so

Hi there and welcome to our 29th Gutenberg Times live Q&A. My name is Birgit Pauli-Haack, and I’m your host and the curator of Gutenberg Times. Thank you all for watching. It’s so great to have you here. In today’s show, we will discuss with three outstanding theme developers how they went from building classic themes, to building block-based themes, geared towards Full-Site Editing, and let’s introduce the panelists.

Introduction of Panelists: Ellen Bauer, Anders Noren and Carolina Nymark

We have early morning in New Zealand, Ellen Bauer, co-founder of Elma studio and with Manuel Esposito, the co-author of the A No theme. Ellen, thank you so much for being here on the show again, it’s so good to see you.

Ellen Bauer: Yes, it’s so good. Thank you. Thanks for having me.

Birgit Pauli-Haack: Also with us and for the first time on the show, Anders Noren, theme developer from Sweden and designer of the default WordPress theme Twenty Twenty. His theme Excel, probably the last classic theme from him. Palace to Gutenberg Times. It’s a pleasure to meet you, Anders.

Anders Noren: Twice, super happy to be here.

Birgit Pauli-Haack: As well and finally meet Carolyn, Carolyn, Sorry, Carolina Nymark. From also from Sweden, member of the themes team, co-author of the TT one blog theme, and development lead on the Twenty Twenty-one theme. And her second Full Site Editing theme is Armando. And it’s in the WordPress directory. So glad you have your back on the show, Carolina. It’s the third time I could call you my co-host. So how are you doing today?

Carolina Nymark: Thank you. I’m very well. I am excited to come and talk about teams. So thank you.

Birgit Pauli-Haack: So and we have people from Toronto. Hi, Robert. Hi, Jack. Hi, Pierre Maria, from Italy. Also star of the testing, Full-Site Editing outreach team because he translated many of the tests into Italian. And that’s a huge work. And thank you very much for that, Mario. And then of course, Brian Gardner. The minute I mentioned his name, Ellen just disappeared for the from the screen for a minute. Well, greetings back to Chicago. So, we are also excited. And for you joining us on zoom and on YouTube. 

Announcement

And yeah, so I have an announcement while I have you all. Next week. The next Gutenberg Times live Q&A will be next week with Helen Hou-Sandi, Mark J. Chris and Riad Benguella. So Helen Hou-Sandi is a commiters on WordPress. So I think this Mark and Riad. Riad is also the developer lead for Gutenberg.  They will discuss or continue our discussion that was started on Twitter some weeks ago, on how to make it easier to build blocks. All three have explored ways on how PHP and React JS could talk together to make this a better experience for developers. It will happen next week, October 14 at 11 Eastern 15 UTC, registrations are open, and I’ll share the link in the chat window. So you can kind of if you’re interested, can register there as well.

Hi, Miki from Tokyo hi to Nepal. It’s good to see you all. 

So, speaking of the questions for those who are watching this on YouTube and livestream, use the chat window on the right-hand side. I don’t know where it is. But Oh, and if you’re on zoom here, use the chat box, the Q&A for the questions and the chat bubble for all your other thoughts. Please keep it family friendly. Even if you disagree. So, this is a family club so to speak. Alright, and hi, back to Atlanta to Sequester McKinney. It’s all so great to see you here. All right, so what’s today’s show about?

How do theme developers move from building classic themes to building block themes?

Our topic is how do theme developers move from building classic themes to building block-based themes with Full-Site Editing features that are already in WordPress 5.8 and more will come to WordPress 5.9 and WordPress 6.0.

Development has been going on for almost two years. And some of you might remember our previous shows here.

On the same spot, one in January 2020 was the first one then in June. Then again this year in January, and in June was the last one with Jeff Ong, Daisy Olsen and Tammie Lister where we talked very extensively about the theme JSON. And Jeff did a little demo there.

So if you want to go back in our records on YouTube to see that so with Full-Site Editing and global styles, themes are changing in architecture, as well as in functionality, they will enable much more customization for users than ever before.

So today, we’re having that conversation with the theme developers who already walked the path before you give us in building blocks, block by seams and put them out for users to use. So Anders first and then we’ll Ellen we will have a demo of the work and to give us an overview and then by then I would think we will have already some questions from the audience from you. So before but before we go into the weeds too deep, let’s do a round robin to a question for everyone.

Q: What kept you going through the transition? What excites you most about block themes?

When you were building the themes, you are on the cutting edge and some would say on the bleeding edge of Gutenberg development, that must have been quite stressful. So, what were the factors and situations that kept you going, and what is it that excites you so much about this new way of building themes that you kind of went through the experience, and what kept you going and jump head in first? Carolina first, then Ellen and Anders.

Carolina Nymark: When I first when I started it was all about having new toys to play with right, and then we would work on the Twenty-Twenty-One and TT1 Block started did one box was a little later. And yes, it was stressful. But also a lot of fun. But again we’ve got to contribute back to Gutenberg and improve on the things that we found that weren’t got they weren’t working and also figure out what features do we need to add later? What’s our wish list? And of course what is not working now, what bugs need to be fixed.

Birgit Pauli-Haack: Okay, thank you thank you for going through the bug fixing part and the testing part

Ellen Bauer: Hello, I need your my audio.

Birgit Pauli-Haack: Yes, very well I can hear you

Ellen Bauer: I just enjoy so Carolina was like started way longer and she did have cool Full-Site Editing website which I knew for a long time and like I knew the terms and stuff and we were kind of busy building blocks and that took up a lot of my time kind of learning getting into that part. And so it’s like back and forth switching between themes and blocks for us, which was challenging or is challenging. But the final like 5.8 the release of 5.8 was the final like straw for us and we’ve been building I know for like over a year like building kind of testing where we should go it was and it was like we felt a little bit stuck at times like what would we do.

We played around with patterns a lot and we just thought like there’s something missing with our Aino theme. And we just started the project for this whole transition. So obviously, then we had this Aino theme kind of sitting around waiting to be a black theme And with 5.9, we just kind of like, okay, we go with it. We had the theme in the WordPress org repository. And yeah, it was just always meant to be for this kind of project. So 5.8 got us ready, like there’s a site editor, let’s just try it out. And I thought it’s, I thought it will maybe take me like a few days, which was a little bit naive. And then I think it ended up being three weeks, mainly. And there’s like, still huge, like work in progress. Our like, we had the theme already on, like, the WooCommerce. And I was like, eager to get WooCommerce into the block theme. I didn’t want to lose any of our work. And yeah, there’s still like things to do. But it has WooCommerce support. And it’s kind of cool that we can jump in like right from the beginning and kind of explore what we can do and what we can’t do. And then yeah, we updated the theme as a blog theme. And we were super happy that we went this way. But then there was like, oh, there’s quite a lot of Gutenberg updates, like pushed. And I remember Carolina you said this, oh, there’s a lot of Gutenberg updates do we push, like, quite like fast, you have to be on your toes. And one of them like got me like I was like, Oh, god, what are they doing? I didn’t pay attention. I was so busy. But yeah, now it’s, I think I have it a little bit better than the control, like after the first one or two update with like, as a block theme.

The one thing that caught me a little off guard, like transverse translating to the converting to the HTML templates, was that I didn’t realize once people use the templates, and I change something in them, that it wouldn’t change for them automatically. Because they customize them. So I and I made changes to the page templates. And so that was a little bit confusing. And I learned my lesson from that. But we have awesome. Yeah, we have awesome users. And they like I think I got it sorted out together like a lot of help. And we have a Slack channel, which is super useful. People can like shout out like, Ellen, what are you doing? I think it will be smooth. And yeah, we learn like, we learn big lessons.

Birgit Pauli-Haack: Oh, good. Yeah. Thank you. Anders.

Anders Noren: Yeah, I was gonna say that. I didn’t really feel like Trailblazer were early adopter in block teams.

Because by the time I actually delved deep into it, then people like Carolina with FullSiteediting.com had already found the path through Full-Site Editing theme, some document that pretty much everything theme developers need to know, I feel like, actually get started with Office themes.

So it felt like the path was very well worn by the time I actually started working on it. Because that was the like around summer this year. Whereas Carolina has been working with it for a year plus, at this point. So I feel, like pretty much everyone who works with block based teams now owe a lot to the people who really spend time with them in the early days, because it has only gotten easier to build them up up to this point. And will hopefully get a lot easier as 5.9 gets closer as well. But I mean, I’m going to echo Carolina, as well was saying that, the thing that keeps it going is just that it’s so fun to play around with all of the toys that Full-Site Editing brings. And the really fun part is when you actually release something, and other users start to use your theme. And they actually use it in ways that you didn’t imagine at all, while you were making it.

I had a support request from a guy just the other day, who sent me a link to a site running my block-based theme. And at first, I thought that he had actually sent me the wrong link because I couldn’t recognize that as to my theme. Because the layouts were different. The colors were different. The typeface was different. So it just looked like an entirely different thing from mine. And I feel like that’s always the really exciting, but when you step in and do something completely unexpected with it. And I think We’re going to see more and more about them in this space overall, as 5.9 gets closer, but I think the next two months will be really, fascinating.

Birgit Pauli-Haack: Yeah, definitely. Yeah. All right. So I don’t see any comments for our audience to get to. So I’m glad that you are. And thank you very much for saying that for about Carolina. And all those who worked so hard on it. Yeah, it’s nice of you to say and to acknowledge that. 

So I think it’s a great time now to see the finished product. First Anders, as I said, and then Ellen. And dear viewers, if you do, you probably will have questions right away. And I’m asking for a little bit of a patience, then we will switch to the Q&A after the demos. And a note, if you write long blog posts before you get to your question, I’d probably skip it, as it will be too long to read first for me and then aloud, and I will get you an answer after the show. Promised is Andrea Middleton wrote, Be kind be brief. So Anders, are you ready to share your screen?

Anders Noren: Yes, let’s do it. There we go. So I thought I was gonna keep this pretty simple and just show a little bit from my block face theme, which is called tool that after the after two rounds on the finish, creator of the Roman characters, and basically give a brief overview of power block-based site running a block based team can look like.

But as I said earlier, it can really look like anything, which is the whole point of block-based themes in the first place. So what we have here is the demo site for the theme Tove, which is on wordpress.org. And I created this with cafe/restaurants in mind. And a lot of the patterns here on the front page, including the header pattern here, is sort of geared towards that audience. We have a little color spot on the on the top, we have the social icons, we have opening hours, and a small menu.

And everything on this page is thumbed completely within the site editor. So opening hours, again, here, we have one of the cafe/restaurant-oriented Block Patterns that are included in the thing with information for location and our cafe restaurant chain. We have some testimonials, a call to action for when you want to make a reservation, somewhere nice looking coffee, cafe menu, a different call to action. A very tasty looking lemon cake, I think. And then some more information about the theme itself.

And my plan for making this theme is that I was going to keep it as simple as possible within the constraints on Full-Site Editing, and block themes with just something I struggled with. Because I want to basically tweak and adjust everything. So when it’s something in the like core Block Editor styles that I don’t really agree with I to try to override them, which never works out well because then they need to keep up to date with the latest Gutenberg updates and so on.

With Full-Site Editing, what’s going to happen is as the Block Editor gets better and better with every Gutenberg update, and every WordPress release is that theme developers will actually remove CSS from their themes step by step.

Because the whole idea with dropping Sr. eventually there will only need to be the theme of JSON file, which Ellen will show in our demo. Where everything that makes the theme a theme, all the colors, all the fonts, all of the layout adjustments will only have within a single JSON file which can be easily changed and adapted for other themes and so on. So hopefully CSS will be something that you can have the doesn’t need to add to make your theme look good. So I look forward to removing a lot more CSS in the future in future updates. And here you can see a brief overview of the structure of what files are included. So we want to get this where this file is the only file in the theme folder. So one day, hopefully, maybe a screenshot as well. 

The second big component of the Theme is really all of the Block Patterns which are bundled with it as well, which are all listed out on this page. And this is really the second big puzzle piece I would say on block-based things it needs to look good and and include a few examples of how to combine the different blocks in patterns that make the styles look and work as well as possible. So that’s a very brief look at the WordPress theme. Alright, I think that’s all.

Carolina Nymark: I can say on this that what I like most about this theme is not that this block team, but it’s so cute, just really makes you happy to look at it. Really, really cute.

Anders Noren: I’m really, really happy to do her that. No, thank you. I have some. I mean, since the themes, the block-based themes themselves are so simple to actually make. You need to spend that time that you would otherwise spend writing a bunch of PHP on something else. So I just made illustrations for two which was a lot of fun. I mean, maybe I got a bit carried away with it as well. All right. Oh, I think your audio is muted.

Birgit Pauli-Haack: Yep, I muted it because I entered a few comments on YouTube. And there was Marcus Kazmirczak and I need to ask him if I’m butchering his name now he says “I’m an Anders super fan. I’ve been running themes for years. So and then he loves the bright colors and the feel Yeah. And Gangoff says I did recommend the theme done who wants to learn block themes and the theme is really good looking. So these are comments and love saying thanks Carolina and Anders for the block themes and she has a question about we’re gonna go through the question just in a bit. Ellen, are you ready?

Ellen Bauer: I think so. Yeah. Yeah. Okay. I share my screen I have to select them so um, I thought that it’s a little bit improvised because and showed kind of the front end of the themes it’s probably fun to look at at the back end so just kind of to give an overview for anyone who hasn’t looked at what we are building so this is our I know website it’s like the presentation website for our for our project, and I just opened the different pages so you kind of see what we’re building like the layout wise. So the different pages we kind of present the work that way and what our approach is with this site is that anything we put out here that’s just the block and post is always the latest version of our I know work so everything you see here you can build with our patterns and with everything we have like out in the beam and with our blocks. So I thought it’s fun like we don’t have any showcase website and stuff yet up we will add that because that’s gonna be fun. See, but you can see like what we are building you can build so I think that’s an awesome approach. So we had I know as like classic theme with just patterns in the beginning and then we converted it to block theme. So I don’t know, not everyone has started using block themes. So what happens if you use block theme instead of instead of a classic theme, you see the site editor, which is currently in beta. And actually, at the very beginning, I kind of didn’t know that is the customizer was kind of fun like for us they have it anymore. So you kind of need to work around it.

Birgit Pauli-Haack: You were breaking up in a bit.

Ellen Bauer: What do and what we have? Actually? Am I frozen? Yeah, a little bit.

Birgit Pauli-Haack: Okay. Oh, no. No, we got to know the screen changed

Ellen Bauer: My screen or the audio?

Birgit Pauli-Haack: The audio was going on the screen finally changed to the experimental settings. And I think with the latest plugin on the site, actually. Oh, you can’t hear me. Yeah, I hear you. Okay, yeah. Go ahead. Go ahead. I’m sorry.

Ellen Bauer: Okay. it’s my internet connection. Oh, my God. Oh. Well, the site editor is?

Birgit Pauli-Haack: Yeah, I think the internet connection in conjunction with the video going back and forth. Might be a problem. So let’s no audio at all. Um, Ellen, can you hear me?

Ellen Bauer: I can hear you. I it’s my internet connection is unstable. Should we maybe talk and then I can do the presentation and a bit later?

Birgit Pauli-Haack: Yeah, let’s do that. And we have our first. So what you wanted to show was how the site editor works with your theme. And yes. And I think there’s too much power that needs to go out of in and out on the visuals for your internet connection. So. So if you want to try things for those who don’t know it? And yes, that’s a theme JSON file with the template parts. And so the end headers and header logo header dark for the stork and for the live columns, like these all sections on the same. So do you want to stop sharing?

Ellen Bauer: Should I try again? Oh, should I stop?

Birgit Pauli-Haack: I would say stop sharing. Okay, because that you can we can try later. Yeah. Either later or kind of put it in a we saw your theme. Yeah, you’ve scrolled very well through it. So I really like it. And there were also some comments there. I love your design said Lobsang wangdue and then we had no audio on Wi Fi problems. Check. Yeah, it’s the internet. Yeah. When Facebook went offline for six hours. Yeah. So it’s still a little fragile. So Badlob Song had a question for how to inherit theme JSON to child theme, JSON at the moment, that doesn’t seem to work. Do you have an answer for that?

Carolina Nymark: I do have yours. Maybe because it should work since the latest version 11.6 from last week, it should actually work. Oh, yeah, I haven’t updated Gutenberg. I suggest that you try again with the Shan theme.

Ellen Bauer: I actually tried that out too. Am I can you hear me here? You know, I think I’m totally off

Birgit Pauli-Haack: No. Yeah, it was just a combination. Good New Zealand. video that kind of made you

Ellen Bauer: Yeah, I don’t. I tried that too, with the child theme and it didn’t work like just two or three weeks ago, because we actually really want to get into child themes. And there was an update. Yeah, like Carolina said, it should work a lot better now. And I think it will be worked on quite a bit like over the next two weeks.

Birgit Pauli-Haack: Okay, so um, so that was the first question. And that seems to be the only question right now from the audience. So I have a question. So when you were trying to what were the concepts, going from classic to block-based theme that you had a hard time kind of connecting. You mentioned, Ellen, the HTML part of that was, what were other things that were that are totally different, but that kind of a little bit of a hurdle to get it all right.

Ellen Bauer: From our side, it was mainly like, not the like, not the actual development, because the file template structure and stuff kind of stays the same. So you just kind of need to, you can actually go into the editor, and then switch to code mode and kind of copy paste your work. And luckily, like under said, we could look like we also looked at Carolina’s theme. And especially also the block based theme from, like Automattic is building. And that quadrat theme that really helped me just to get a first idea of what I’m actually doing. It was mostly like after we can watch it to that, like with updates, I didn’t quite understand completely understand the structure that, like once you edit anything in your template, that it becomes like a custom template. And so a theme author updates their work, the templates, it doesn’t get updated for every user automatically. That was kind of the confusing part. I because normally, as a theme author, you had complete control like of your template files, and because more things like users can customize themselves and adapt in the template files. And they use they kind of customize it. So you need to be more careful with update, like what you update or what you shouldn’t update.

Birgit Paui-Haack: Do you think that’s a bug?

Ellen Bauer: That No, no, no, I think it just it was like just I didn’t quite get it. Like think the concept you kind of really have to play around with to get the concept because it’s so different. And like Anders said, like, he thinks he will kind of get rid of his CSS work. And which I think is cool. We I think that definitely true that like global styles will be there. And but I think it’s also awesome that there will be different approaches, like we will kind of have a base CSS and then work with different things to solve that. So you can use child themes for that, which is awesome. So that totally different kind of approaches going forward, which is cool. It will be cool to see like people building totally different things. And I think the global styles was pretty easy to get into the theme. json. And then also I think we need to mention that it’s the first version of the theme JSON. And it’s kind of like chaos Kartik and gets like long pretty quickly. And that will definitely change. So we have to be on our like, be on our watch to see what how the theme JSON approach will be improved, probably split up into multiple sections and stuff.

Birgit Pauli-Haack: So Anders, would you were there concepts that you found difficult to grasp? And that kind of took a while to actually figure it out?

Anders Noren: Yeah, I think one of the most challenging part for me was actually the design phase of making a theme. Because usually when you make a classic theme, you can design it pretty much however you want. And know that using PHP and CSS, you can recreate your design exactly, because you have full control over where all elements are, what elements are used and how you style those elements. But with the with block-based themes to really govern by what can be created in the site editor, so how users can combine the different blocks to create the layout and how you can combine different blocks to create the layout. So my initial designs for to the were pretty involved in like the header and footer areas. And I was really happy with the design and then they said about recreating those layouts in the site editor. I quickly realized that I couldn’t create them as I have designed them because The Block Editor is still somewhat limited in how you can layout the page and added scale correctly down to mobile and stuff. So thing, the approach for the signing block-based themes will rely a lot more on you actually deciding what colors you will use, what fonts you will use, and then the sign how specific blocks and block styles will look. And after you have all of those components, and basically your global styles set, you will need to go about actually building the design with the different header layouts and footer layouts in the site editor itself. And I think that would be a pretty big workflow change really, for everyone builds classic themes now and we’ll move over to block-based themes. Because I believe a lot of designers will have my experience of designing something really involved trying to build it realizing I can’t build it like this, and then basically re-evaluating the original design and try to work within the constraints of the site editor. And what you can do, as the Block Editor gets better and better. I think that was really my The biggest change I had to go through.

Birgit Pauli-Haack: Understand that. So it’s more like you need, you need to know the end product, before you actually have the product. And also, there is probably the design system approach for the patterns can have that will come into much higher attention there. So we got some questions, and one is from Tim Bowen. And the theme JSON color naming. And that’s of course, one that will occupy plenty of so is there a primary, secondary, tertiary kind of naming? Or would you rather do the blue and the green at the red kind of thing? I think it would also goes into that question also goes into the theme switching problem, or changing colors later on. To get this done? Do you want to take that wants to take Carolina?

Carolina Nymark: I switched from using slugs. slug is the code the name and the name that is visible is a different can be different, right? So I switched from using red blue to primary secondary trader because there were a lot of discussions around it. How do we make Block Patterns match when we switch themes? And then how do we make colors match when we use Block Patterns from the Block Patterns directory and so on. So you can this be red, the color can be red, but actually naming the code can be primary or secondary. That should reduce some of the problems.

Birgit Pauli-Haack: That was also your approach. Anders I think when I looked at things.

Anders Noren: Yeah, exactly. And that was actually the as I’m sure everyone here knows Twenty Twenty Two. The next default theme was unveiled just the other day, and looks really, really good. I think and the first thing I checked when the GitHub repository for that went live was how the naming scheme for the colors are in that theme. And they also use the primary secondary tertiary model. So I’m assuming that a lot of people will use Twenty Twenty Two as a foundation for future block-based themes. We should say that, I think the original proponent of using that structure, one of the foremost proponents at least was recover as well in a blog post. He sort of got the ball rolling on this discussion.

Ellen Bauer: A tiny bit because when I got into it, what is actually pretty cool is that you have your general color palette for the theme. And then you can also add specific color palettes because I was got kind of like long, I thought maybe not so helpful. And so you can actually name color palettes just for specific blocks, which I think is super helpful. So you have a button block and you only want your button colors in the button block. So you have like, and like block specific color palettes as well in options in the theme JSON which I think is helpful to kind of split it up and make it more approachable.

Birgit Pauli-Haack: So another question is can I use theme JSON with a classic theme? I am using Genesis and that comes from Lapsang Wangdue. Again, and I can answer that quite fast because Marcus because music has on his blog exactly that using theme JSON on classic theme, and I will share the link in the chat window. So you can read up about it, it’s, it’s actually quite nice. Have any of you use the theme JSON for classic themes?

Anders Noren: I haven’t tried it yet. Actually. Yeah, I want to look into it.

Birgit Pauli-Haack: Yeah, what I really like is that in the classic theme, up until that point, you had to use the color or assign the color in your functions, PHP for the palette. And then in your CSS, you had to actually have a section for the background color and a section for the text color. So you were talking about the three times. So but the theme JSON, what it does, you put it, what you put in the functions, PHP, kind of similar on theme JSON and that’s it, you don’t have to do any CSS. And that’s really helpful. So I really enjoyed that when I was reading through that then trying that out. So Jonah Sander has a question. So I know includes some PHP files, but not Tov, but which is Anders’ theme, where will the journey go with or without PHP files?

Ellen Bauer: So obviously, the function PHP will stay. I think like, but it’s just it’s like super stripped down. Yeah, you can replace a lot of things from the functions into the into the theme JSON file. Sorry. But why we have still PHP files, it’s mainly because of our WooCommerce support. We needed to keep some things in for further WooCommerce support, because some of the things are not quite yet ready. That was the only reason so we kind of like a little bit. It’s still in between theme. But I think Yeah, with without PHP files for, for us, at least. Yeah.

Birgit Pauli-Haack: You did a little introduction to your toll theme. And you made a comment about that. Your classic theme, Excel was so elaborate and had so many thousands of lines of code and CSS lines, and it was so much lightweight, so much more lightweight to do a block-based by theme.

Anders Noren: Yeah, yeah, there’s really no comparison in terms of your scale, or the themes. That was another thing I noticed on the Twenty Twenty Two github repository as well. You can see the GitHub stats for what type of files are included in the folder. And it’s just like, I think it’s maybe 6%, PHP, or something, and maybe 24%, JSON, and then just HTML. Because the HTML is obviously the templates and the template bots. The tool has a lot more styles right now, which I want to get down on as I can move more into the node JSON. But even with the style, the size, sort of style sheets, the comparing it to a theme like Excel, which has like seven PHP classes, like 2000 lines and functions for PHP. It’s just completely different scalable theme. And I mean, obviously, with a block-based theme, the potential for what you can do in the theme is so much greater than that classic theme. So I’ll be really interested to see how many people actually get into creating themes. Now the block-based themes become much more easy to create. Because I think a lot of people don’t have a background in development, but rather in the sign will have themes.JSON. That’s a very nice entry point to start with colors and typography, and then getting integrating patterns and so on. So if we really open up the entire theme creation process, to people with less of a technical background, and hopefully that in turn can lead to more interesting theme design. So we’re all which is something I know everyone who does this had been asking for, for years. So I really think the colors and typography will become king. In the theme development space so that’ll be really exciting, I think. Yeah.

Birgit Pauli-Haack: Totally if you want to say something regarding the weight of things.

Carolina Nymark: Yes, right now we need to use PHP to register Block Patterns, but for example the the block styles, we can do them with JavaScript if you prefer. So there will be some PHP left, but I’m looking forward to plugins catching up, so that they don’t need to have some fallbacks. Right.

Birgit Pauli-Haack: Okay, so the next question was, can you sign also from Lobsang Can you assign header and footer template ports to different pages and posts. She couldn’t find it from the dashboard.

Carolina Nymark: You can assign them but you have to open that page or post first. So there is no dashboard you have to go to the site editor. And then either replace your current header if there is a header or add a new part. Okay. You have ideas for how you would like to assign them, please do share them because this is something that’s very interesting for Gutenberg development.

Birgit Pauli-Haack: Yeah, that is actually quite a good point. Yeah, this has all not been it’s not all yet in WordPress, so there’s always a chance to have different approaches or fixes after the initial rollout and 5.9 then for the next version, so it’s good to try out the plugin Gutenberg plugin on on a test site and enable a block-based theme and then play around with it. So Plum Mood has a question for Ellen please share your experience in developing WooCommerce websites what is possible and what are the restrictions?

Ellen Bauer: So there are like it’s not ready for production yet. But I think as you just said, the good it’s super important for our for us right now to just look into it and try to make the best of it and what they’re building with whoo is they’re building woo blocks which is an extra plugin you can install at the moment so that is super helpful for anyone who has like worked with WooCommerce for a while the experience in the checkout and cart templates were not like it wasn’t really customizable a lot. So that will change tremendously because they’re also building everything in WooCommerce with blocks so at the moment you can install the woo blocks plugin and see how far they’re going and that they actually documenting it quite nicely and they asked some questions and they answered right away they have like a roadmap going but it’s a little bit behind compared to like just themes at the moment so we need to wait a little bit for them to to get it going. But yeah, we actually got WooCommerce into our theme and they I think variable pose like products are not working at the moment but it’s kind of working like it’s I wouldn’t like put it up for production sites but it’s cool to kind of go along with the development and it was module better than I thought it would be and I got into the the blocks already which is super helpful to get like a head start of what what is going on in WooCommerce if you’re developing for it so I think that was helpful and whatever wanted to mention like with the themes like where it’s going it’s so cool at the moment so I think as you said Birgit, there are so many different approaches and kind of like make your own thing out of it which we like we just fall out like teams were so established like plugin established now it’s like an open field where we can kind of our way into and I think that’s gonna be so cool to see. 

Birgit Pauli-Haack: Right? Yeah, you keep….

Ellen Bauer: Oh, I had what is happening with my internet Connect, Okay, I’m gonna shut maybe, maybe someone else would take over sorry, that’s so frustrating not only our connection is quite fast.

Birgit Pauli-Haack: So Carolina shared in the chat window a link to WooCommerce roadmap in connection with blocks and Site Health. And Derek is a publisher. And he says, Okay, this is what we’re doing now, and why we are not yet ready for blocks. And this is what soon to come. And yeah, in flip chart block as well as for the checkout block. And that was the reason why they’re so behind with a few things, because some of the features that they need are some of the hooks that they need. They haven’t been in the Block Editor yet. So they block, the Gutenberg team cannot need to catch up on things, especially with the connection with the REST API. So we have another question from Tim Bowen. Thank you. What are the current best practices for theme JSON, and responsive font sizes.

Anders Noren: So when it comes to best practices, and this ties in into what Elon was saying, as well, the interesting thing is that best practices hadn’t really been established for a lot of stuff around block-based themes. And I think that’s sort of what people will look to Twenty Twenty Two for, for a lot of those best practice discussions to happen around the next default theme, the first block-based default theme, and have those best practices be established as part of that development. But there are, of course, a lot of different approaches to everything. Basically, indoor play seems right now, which is very exciting, very fun. It feels like it’s been a long while since people basically wrote think thesis on their blogs about the best way to do stuff and WordPress development. And we’re really seeing a resurgence of that just in the last couple of weeks, are people arguing for the different approaches. I think, I think the current Twenty Twenty Two font sizes, use this CSS protocol, message method or function called clan, to set a base font size, and then use the viewport based on size for smaller screens, to scale it down from that original font size. And I know a couple of different themes that you start as well. So maybe that would be the current answer. But it could change. Keep a lookout on the Twenty Twenty Two GitHub issues, I guess.

Birgit Pauli-Haack: Yeah, it’s so I still come across a lot of websites where the font size is so large, that I barely can scroll fast enough to with my reading speed. So it’s gonna be really one of the things that I love designers. 

Ellen Bauer: I think just I think that it’s it’s true like under said, I think the clamp approach will be taking over. And we are also like in the works to convert our, like, kind of responsive heck in our current team, like and I know like base to clam because it’s just the smartest approach. And it’s like, we can use it now in the like most browsers I think. And Rich actually posted a blog post yesterday. Rich Tabor on his blog about it. So maybe we can link that in the woods styles. He posted about fluid typography. Oh, right, right. Yeah. Like you said, like people start sharing again. What? Yeah, it’s kind of fun. Yeah. Facebook being out and stuff. We can all blog again.

Birgit Pauli-Haack: We could blog before that. Yeah, you’re right. Oh, I got a copy link right down there. Just bring it into the chat window. And we have another question. From Jack Cannot surprise to hear and see different options to the admin panel. What do you think? The admin panel will look like in the future with blocks? Anybody wants to pick it?

Carolina Nymark: I’m not sure which admin panel if you want to expand on that, Jack.

Birgit Pauli-Haack: Jack, do you mean the site editor or the WP admin? Just answer so I can see that plugin developers could use Gutenberg components in the Login in the WP admin and I know there’s also those core CSS team is also working on streamlining the color selections on an admin, because they found that in the CSS they had they had about, I don’t know, 500 different colors. And when you want to change your color palette, then it’s really hard to actually adjust all the 500 lines of code or colors there. So the site editor is actually will mimic what the front end has and styles. So and that gets better and better. As far as I know, what was your experience with that Anders or Ellen or Carolina to get the side editor kind of match what’s on the front end? So the user has a really what you see is what you get to experience?

Anders Noren: Yeah, I definitely think it’s getting a lot better. I think if you stick to only using theme.JSON right now, it basically will look the same. Because they are they are very good. The Gutenberg team about mapping those values to both views, I think the more difficult part is when you have a lot of custom CSS, like Google still has that knowing what elements to target and having those elements be targeted, consistently, both in the site editor and on the front term is very difficult, especially since the borrower through all the Gutenberg styles can differ quite a bit between the two views. So I think that’s another area where the sooner we can start to move more stuff into themes.JSON, the easier it will be. Because one of the common problems even with the blog, comm block-based Content Editor is that the priority of CSS and the names of elements change from update to update. So supporting those changes, could be quite a hurdle for themes that rolled a lot of custom CSS. And I think that’s what I look forward to with moving more stuff into theme.JSON. On that I can’t be less terrified of new updates. Fedora style center core element Nice.

Birgit Pauli-Haack: Yeah, yeah, I can see that there have. Have any of you watched Helen Hou-Sandi’s presentation on the White House site at the WordCamp US?

Anders Noren: I missed it, unfortunately.

Birgit Pauli-Haack: Yeah. So I, she also talked a little bit about it, because they have this whole header, full width header image, and then a box that kind of is on the left side on the right side, on the header, with some links to go deeper into whatever the topic of the day is right now. And she said it was a little bit harder to match up the front end with the back end, because the side bar of the Block Editor has to get into the way. Yeah, it’s not going to be full screen. And so she said, a good remedy for that would be if you have custom blocks, that you put most of the most important things that people will use all the time into the block toolbar rather than into the sidebar. And so that’s kind of a remedy for that as well, just to kind of organize your real estate there. So Jack came back and said, Carolina, you mentioned something about no pages, maybe I misunderstood. So he had the question that about what you think the admin panel will look like in the future with blocks. And then he might have misunderstood and Ellen, you showed that you didn’t have a custom tab. But I think what you might be referring to Jack is that Ellen said she doesn’t have a customizer that some of the settings will all be in the global styles sidebar, right? Yeah. And that’s definitely to come here.

Ellen Bauer: Yeah, so the customizer disappears with the site editor with the, I think probably in 5.9. I don’t know I think Carolina you probably know more about that. So I’m actually not missing the customizer at all, so we’re fine. So we end but we always used it pretty minimal, but there are different themes out there that kind of used it heavily. And yeah, we just had to kind of rewrite a lot and I will write a blog post about that, like, how we manage without the customizer, because that’s super interesting. And yeah. We don’t have any.

Birgit Pauli-Haack: You said at all. No, we all expecting that blog post stuff.

Ellen Bauer: Yeah, I will do that I will do it definitely. Because I just like all the transition, I thought, Oh, I have to share that, because it just makes sense to share now, like, since it’s all still in progress, and it’s more like snippets that we’ve learned along the way. And yeah, you managed better without the customizer set than you would expect. But I think yeah, just get into like, new approaches now. And I think in general, just the like, the theme JSON will replace everything that we had in the customizer for, for themes. And it will be more, I think, I think beam can be more like viewed as just like a skin, like you have skins and in the code editors and stuff. So it’s just the skin, you lay over things. And then you come in with blocks, and you come in with patterns. And you have all these, like more modular kind of ways to to add things to WordPress. And I think that’s just the smart approach, and will be a lot more user friendly. In the long run.

Birgit Pauli-Haack: Sorry, Carolina, I wanted to say something about customizer. And well, Ellen thought you might say something.

Carolina Nymark: I do not have any more information on what might or might not be in 5.9. The customizer is not being removed. But if you activate a team that has support for Full Site Editing, the menu option will not be there. Yeah, but it will stop the global styles. So for all the teams, or for new, what we call classic team to customize this will still be there until the team developer has come over this initial period, the transition as soon as they learn that it’s so much easier to work in a theme JSON than creating custom customizer options. Yeah, then the theme.JSON will take over.

Birgit Pauli-Haack: Yeah, but I think that it’s not gonna the customizer will not disappear from WordPress in the next three years.

Carolina Nymark: Is not supported, right? And no one is going to remove the code or defines for the customizer, it’s actually only the menu option. That is no longer there.

Birgit Pauli-Haack: Right? And you approach it with slash customizer PHP. Yes. 

Carolina Nymark: There is on the ad teams page, you have the live preview. But you can still actually view a block-based team in the customizer, so it’s not gone. Yeah.

Ellen Bauer: And also WooCommerce at the moment you use it uses it still like even with block themes, because someone asked about like WooCommerce support, they still needed. So if you have WooCommerce active with a black theme now you can still access things now.

Birgit Pauli-Haack: I think we have one last question, because we are on on the hour mark here. And so that was Timbo and again, will theme.JSON always be adding so many important references in the CSS. So I think the talks about the color palette and coming into that.

Carolina Nymark: Until you come up with a smarter solution. Unfortunately, I mean, it is it is something that no one wants. But this is where we have ended up with because no one has been able to do it smarter.

Anders Noren: Yeah, I think I prefer the importance to the same class name five times in a row to increase the priority of the targeting, which has also become pretty frequent. But I totally understand that it’s a difficult problem to solve for the people who actually need to write the CSS as part of Gutenberg and core because there are so many different themes and so much different CSS to account for. So they really need to bump up that priority to a very high level to make it work. But it is a bit of an eyesore, but it’s unfortunately, necessary, I think.

Birgit Pauli-Haack: And I think that the team is very hard exploring also creating the theme JSON not in code view but to create an interface so that way you can you can then we put all the things in and then it automatically creates a theme JSON file so maybe that’s not connected to that topic completely but there’s also something people that are more comfortable with CSS have a hard time thinking Oh Do I have to write my CSS now in theme Jason I don’t like it kind of thing. So there will be a remedy for that as well.

So Lobsang has a question Carolina I was thinking about you can sign template parts like main template page or post from the dashboard. What your I think that’s out of context, in certain things i o that you can assign the index.

Carolina Nymark: I almost need an image of what’s what you’re thinking about to baby 10 standard, I think.

Birgit Pauli-Haack: And Brian says, I have to leave this for another call. But I thoroughly enjoyed the discussion. And Tim, is 19 so thank you all so yes, it seems like we all that’s all the time we have today and we I have just two more questions for our panelists. So do you have an announcement or something that you couldn’t get in before and you want to have people in mind and how can they reach you if they wanted to get in touch with you? 

Ellen Bauer: An announcement is just sorry for the failed presentation that was maybe I can do a little I can do a little video or something like as a replacement I can share on Twitter that is a little bit sad from my side I’m sorry about that and yet just like us on twitter on our blog like comment yeah we kind of everywhere around our event even like on on the in the support forum for our blog and theme and stuff.

Anders Noren: Yeah, you can follow me on Twitter. I guess. It’s mostly WordPress related stuff these days. But I’m under Ashmolean at Twitter, one word.

Carolina Nymark: No announcements, but I have enjoyed this shot. And I can be reached on the wordpresser slack. And my name is Brianna, or on Twitter at Carolina Cuyama. So one name one word.

Birgit Pauli-Haack: Well, a big thank you to you all, and to our viewers for the great questions. And I also have a survey for you. So I’m gonna share that in the chat. If you want to fill that out, we are always trying to improve our shows and with your opinions. That will be great. And if you have any more questions, you can always send them to pauli@Gutenberg times.com that’s pauli@ Gutenbergtimes.com. A recording will be available in a few minutes on the YouTube channel. And we will publish the transcript and the resources. Also for the resources of the theme.JSON. You will think looking for a website. I think the earlier post to Marcus Kazmierczack you can use the theme JSON also for classic theme. I think he had a quite a few resources in his blog post as well. Yeah, thank you to Carolina, Ellen and Anders for spending time with us. It was a great joy talking to you. Be well and good bye and good luck.

Carolina Nymark: Good luck. Thank you. Thank you. Bye.

Ellen Bauer: Bye. Thank you. Bye. Have a good evening.

Birgit Pauli-Haack: Yes, and that’s that’s it, you Take care and I’ll see you in the slack.

Related Posts