Live Q & A: Block-based Themes for Full-site editing feature in WordPress

Earlier this month, we hosted a Live Q & A with Carolina Nymark, Kjell Reigstad and Eileen Violini. We had about 90 people register, of which 40 attended on Zoom and 20 on YouTube. Kjell demonstrated on how to create a template part for the current theme, with blocks and no code. We answered about 12 questions about block-based themes and full-site editing. It was a lively discussion among the panelist and attendees on Chat in Zoom and YouTube. The recording is available on our YouTube Channel. In this post we share additional resources with links and the transcript.

Thanks to Justin Tadlock and his article on the WPTavern, we had a full house on Zoom and more people than usual joined us on the YouTube Live Stream.

Table of Contents

Next Live Q & A: Updates on WordPress Site-Editor (FSE) and Themes


Trilled to have Carolina Nymark, Ari Stathopoulos and Anne McCarthy on January 29, 2021 at 11am ET / 16:00 UT

Resources on block-based themes and full site editing

Transcript

Birgit Pauli-Haack: Hi there. Welcome to the 23rd show on the Gutenberg Times YouTube channel. My name is Birgit Pauli-Haack, and I’m your host and the curator of Gutenberg Times. Thank you for watching, it’s so great to have you all.

Introduction

We have a full house today, thanks to an article at the WPTavern, and thank you to Justin Tadlock, whose article brought quite a few of you here. Today, we will discuss block-based themes, full-site editing. If you’re here for the “How do I do my first plug-in,” that’s on the other show. That’s a “post status.”

Carolina Nymark

Let me introduce today’s speakers. I’m extremely honored to have Carolina Nymark on the show. She is a team rep on the themes team, creator of the full-site editing course, and a contributor to the 2020 theme. Good evening, Carolina. Thanks for joining us. How are you and where are you located?

Carolina Nymark: Good evening, and I am well, thank you. I am in Stockholm, Sweden, so I guess I’ll tell you we’re all safe. There’re no worries here, we are staying inside. We’re also having a bit of a heatwave right now, but we manage.

Kjell Reigstad

Birgit Pauli-Haack: Oh, good. Well, thank you for taking the time out to come here. Next up is…where are my notes? Kjell, I’m thrilled you’re here. Kjell Reigstad is on the show. He’s a design director at Automattic and a major contributor to the Gutenberg Design and Themes team as well. He is also heavily involved in the design and development of the 2019 theme, together with Allan Cole. Good afternoon, Kjell.

Kjell Reigstad: Hi.

Birgit Pauli-Haack: How are you doing and where are you located?

Kjell Reigstad: I’m doing well. I’m located just outside of Boston, and it’s a lovely sunny day here today.

Birgit Pauli-Haack: Waving at Boston, was a wonderful WordCamp, I have great memories with that last year. And it was a very hot two days there as well. You also prepared a short demo.

Kjell Reigstad: I did.

Birgit Pauli-Haack: What will you show us later on?

Kjell Reigstad: I’m going to show you how it’s quite easy to start taking an existing theme that is not a block-based theme and start using that as the basis for experimenting with block-based theming. And it’s pretty cool because you can leverage some of the styles that you’ve already built into your theme, and you can do the whole thing without touching your code editor.

Birgit Pauli-Haack: Wow, that’s amazing. I’m really looking forward to that. Fabulous!

Eileen Violini

Also with us is Eileen Violini. She is an active WordPress contributor on the core editor team. She’s also a design engineer on Sidetrack Studio and has deep roots supporting plug-ins in the WordPress community. Good afternoon, Eileen. Thanks for joining and where’s home for you?

Eileen Violini: I am located between Lancaster, Pennsylvania, and Philadelphia, Pennsylvania.

Birgit Pauli-Haack: All right. We met at the WordCamp Lancaster in 2018, it feels like a long time, but it’s only two years that we know each other. It was great to meet you there. Thank you all for joining. 

I really can’t tell you how excited I am. Before we head into the topics, I have a few housekeeping notes and an announcement.

Gutenberg Changelog podcast

Mark Uraine and I will record the next episode of the Gutenberg Changelog on Monday. Not today, on Monday, June 29th, and it will be published a couple of days after that. Mark is on vacation for a few days more. If you have heard about it and haven’t subscribed yet, you can find us on any popular podcast app. Search for Gutenberg Changelog or go to the gutenbergtimes.com/podcast, and you have all the links there. We answer listener questions and you can send them to us via Twitter to @gutenbergtimes, the DMs are open or via email to changelog@gutenbergtimes.com.

Live Chat Audience Participation

We have people here in the audience on Zoom, but we also have people joining us on YouTube, I believe. YouTube, you have the chat window on the right and that’s the place where you can put your questions in. For the Zoom people here, there is a Q and A at the bottom of the screen, on the right-hand side, and you can put in your questions there.

Two things, one is, the sooner you come to a question mark in your question, the probability that I can ask your question fast is actually going up. For both YouTube and Zoom, please be kind even if you disagree, this is a family-friendly endeavor. We have quite a few people here and we might not get to all your questions. We will probably stay over that normally one-hour showtime to answer them, but if we won’t be able to get to all of them, we will answer them in writing and post them on the recap post for the show on the Gutenberg Times. 

So with the housekeeping stuff all out of the way, if you all see your chat window, just tell us where you’re from. We want to know who’s here, just take your keyboard and start typing. In the meantime, I have the privilege and the advantage that I can do the first question. Then after the round robin of the first question, Kjell will show us his awesome demo. And by that time I anticipate that we have already the first questions from the audience and we can dive into that.

What are the two aspects of block-based themes that excite you?

My question for you Eileen, Carolina, and Kjell, being in the minutiae of the creation process, sometimes it’s hard to see the big picture of what can this all become. What are the two aspects of full-site editing and/or block-based themes that excite you the most and why? Eileen, do you want to start?

Eileen Violini: Sure. As a designer, I’m really excited about the potential to be able to create page solutions and how easy it’s going to be for us to be able to do that right within the editor with the blocks that we’re already used to working with. And just from my experiments that I’ve seen with the theme parity, flipping from one theme to the next theme is going to be such a huge benefit for theme maintainers moving forward. We’re not going to need to mess around with shortcodes, all of the layout content is going to be available in the database where we expect it to, it’s not going to end up someplace else. So that’s going to be a huge benefit to everybody. 

On a personal level, just participating in building this open source product and seeing how so many people from across the community are contributing has been really inspiring. And it’s amazing to see it all come together and the professionalism and dedication of everyone on the teams. I work heavily in core editor, everyone there is just fantastic, it’s been an incredible experience for me.

Carolina Nymark: Should I go next?

Kjell Reigstad: Yeah, go for it.

Carolina Nymark: Well, I’ve not been as long as Eileen so I’m going to keep it short. First of all, we have no option but to be excited about shiny new toys because if we ignore it, someone else is going to be making all the decisions for us about team development. That is why it is important that we get involved, and test, and try out, and bring new ideas. I’m excited about the little things, for example being able to place a cover block as an actual header. Everything like that, but also especially global styles because they will make it easier to style our blocks. Because that has been a big problem, adding different changes to the markup on the blocks for example. That’s all.

Birgit Pauli-Haack: And you, Kjell.

Kjell Reigstad: Cool. Yeah. I’ll do one from a theme author perspective and the other from a user perspective. As a theme author, I’m really excited because I think that Full-site editing is going to make theme development a whole lot simpler. If you take a look at the current documentation for it, just the templates are really, really simple and you can create them in Gutenberg. And I think we’re going to end up needing to spend a lot less time debugging code and a lot more time just building things. 

And then from a user perspective, the first thing I always do whenever I install any theme is I jump in and make CSS customizations to make it exactly the way I actually want it. So, I’m looking forward to being able to just do that straight in Gutenberg and adjust all of the little design tweaks that I would normally make in a much less hacky way.

Birgit Pauli-Haack: Well, thank you. That’s a great start of this, but now let’s see what we’re all talking about. Kjell, if you want to share your screen and walk us through what you brought us today, that would be really great.

Kjell Reigstad: Okay, great. Let me get this started. All right, can you all see my screen?

Birgit Pauli-Haack: Yes.

Demo: Create a theme template part with Full Side Editing screen for an existing Theme

Kjell Reigstad: Okay, great. What I’m going to do today is I’m going to give you a demo that shows how you can use an existing theme as a starting point to experiment with block-based themes. 

This is great because it allows you to leverage some of the work that you’ve done already, specifically the editor styles and the block styles for the front end that you’ve presumably already built into the theme. As I mentioned earlier, the coolest part of this is that you can actually get pretty far into this without ever having to open a code editor. This is a theme that my colleagues and I have been working on lately, it’s called seedlet, and the reason I’m using this for the demo is because it’s really straightforward and I can more or less recreate this in 10 minutes or so. The other reason I chose this one is because code wise, it is really pretty simple. Anyone who’s built a theme lately will find all of these templates and the folders.

Birgit Pauli-Haack: Can you enlarge your screen a bit because I think that’s going to be a hard part to read?

Kjell Reigstad: Yeah. I can’t really, but this is the only thing that is going to be text-based, I think.

Birgit Pauli-Haack: Yeah. Okay.

Enable Full Site Editing experiment in Gutenberg plugin

Kjell Reigstad: Okay. But anyway, it’s just a really typical folder and template structure, all the normal PHP files that you would normally see. So today, if you were to go ahead and open up the full-site editor, which you do by going to Gutenberg Experiments and then hitting enable full-site editing. It’s a little disappointing when you view the website because all you see is this no matching template found. And as someone who spent a whole lot of time building that theme, I see this and the first thing I think is oh, well, I guess all that work that I did is useless now in this block-based theme world. But that’s not really the case, you’ll notice….

Birgit Pauli-Haack: It’s a little anti-climatic, yes.

Kjell Reigstad: No, it really is. The first thing that makes me feel a little bit better is that the error text here is actually using the same font that I’ve been using for the theme. So I can see that actually my styles are being loaded here and that’s really reassuring. So it’s not that it’s not loading anything, it’s just that I’m missing a template and that’s something I can actually fix without even needing to write any code. 

The first thing that I’m going to do here is a little bit of a weird way to get started, and that’s a temporary one. As I think most of us are fully aware, full-site editing is very much a work in progress, and so I’ll be doing just a couple things that are probably going to seem a little weird “workaroundy,” but those are temporary. The full-site editor within Gutenberg, right now, does not have a great way to make a brand new template from scratch, and it’s going to be way easier for me to demo this is if I can just do that for you.

Block templates all use the standard template hierarchy

The way to get around that right now for me is in my theme structure, I’m just going to create a new folder called block-templates, and then I’m just going to place a completely empty HTML file into it called index.html. This is the first block template that I’m going to add. Block templates all use the standard template hierarchy that we’re used to in WordPress, so index.html corresponds to index.php, and similarly if I created a page.html it would correspond to page.php and would automatically load on a page as that template. 

For the demo, I’m just going to do an index.html. Once I have that in there, I’m going to go ahead and open up the site editor. Now you’ll see it automatically loads this index template and it is completely empty, just as I promised it would be. Now I have the site editor working, and really what I want to do is build what this used to look like when it was a non-block-based theme.

Building a header, start with a wrapper

The first thing I need to do is build a header. I’m going to start out with a template part, and that is really just a reusable piece that I’m going to put on other templates that I create later. I’m going to call it Header, and I’m going to use the theme name here as the theme. Now I have a container that I can use to start building the header. 

The first thing I like to do whenever I have a new template part is I start out by adding the group block to it. The reason I do that is because a template part does not, by default, have any wrapper around it, and I need a wrapper around my header. I’m not going to do this right now but if I did go into a code editor, you can actually add an extra attribute to the group block to specify the HTML element type that you want the group block to be. 

Normally it’s a div, but you can actually specify that it be a header, or a section, or a main, or a footer, or whatever you need it to be, so that will help you make a lot more of a semantic block-based theme. I’m going to add this group block and a couple shortcuts that I’m going to do so that I can leverage some of my existing theme styles. 

The first is, the normal wrapper around my site header is called a site header, so I’m going to enter the site header class name for this. So that when it loads on the front end, it automatically grabs from the margin that I’ve built for my site header so I can make it look like it used to in the non-block-based theme version. And the second thing is a little bit more of a hack. As you’ll see here, the group block does not currently have the alignment controls that it normally does in the post and page editor and I want this to be full-width, so I’m going to hack around that just by writing align full as the class here.

Add Blocks to the Header: Site Title, Navigation

Now I just really need to populate this. So looking back at what this used to look like when it was not block-based, I’ve got a site logo, site title, site description, and then the menu below that. So I’m going to just start going ahead and building that. This should be really familiar to anyone who’s used Gutenberg. I’m going to start by adding an image here. There is no site logo block, so I’m just going to use an image for today. Align it center. I can add a link to it if I want to, but I’m going to skip that for time. I can also make it the same size that it is on the front of the website normally. Below that, I want to add the site title, which is conveniently a block. So, I will add the site title, and that is all set there. You’ll notice that this is picking up some of the styles that it already has on the front end. That is one thing that I was doing when I built this theme originally.

When I wrote the site title class, I also made sure to just load that style into the editor styles as well, just the standard editor styles which are automatically picked up here in the full-site editor. Below that, I need the site description. That is also not a block that’s merged yet, so I’m just going to type that into a paragraph. And I will center align it, and then use the preset text size that I’ve defined, which is the same as it is on the front end. 

The last piece of the header is just the menu. So there’s a navigation block, I’m going to use that. And I can actually just choose to start by using the same menu that the site was using before when it was not block-based. So I’ll just hit that, create. And then I just need to justify those center so that they’re all lined up, so there we go. Now I have a reproduction of the header. So I will go and give this a look on the front end. Now here is my recreated, fully block-based page header. And here is the original version. It’s not 100% the same, but it’s pretty close for something that I spent just a couple of minutes on. 

Birgit Pauli-Haack: Yay.

Add a Query Loop Block

Kjell Reigstad: The only thing I need to do now is just do the rest of the page. Looking at what we used to have here, it was just these streams of posts, one after another. This is also incredibly simple to start making. So in the area below this reusable page header, what I’m going to do is I’m going to add a new block, I’m going to start with a group again, and I’m going to call this the site content so that it will pick up some of those same styles that I usually use for my site content wrapper on the front end. And again, I’m going to do that super weird align full hack, which hopefully soon I won’t need to do. 

The next thing and the last thing I need to do to create this page is just add a single block and that is the query loop block. Anyone who’s built a theme is likely familiar with the query, that is what makes the whole thing work really. Here we go, I just added that. Now I have a stream of all of these posts. 

So I can just go ahead and save, and reload here. Now I have my fully block-based version of the home page, and it is pretty similar to what I used to have before. And I did all that without touching any code, which is a lot fun. 

Because it’s all block-based, I can rearrange things and save it, and then it will just do that on the front end, which is the whole point of why we’re doing this whole block-based theme thing. It’s just really simple and lets you edit exactly what you’re seeing. 

Share Themes with the Export feature

The last thing I’m going to show today is from the perspective of the theme author, like what do I do with this now? All of these changes that I’ve done here aren’t overwriting anything in the theme, these are all changes that I’m making just to this single website. But as a theme author, I’ve recreated this template and now I want it to be so that if somebody were to download my theme and they activated the full-site editing experiment, I want them to see these templates right away instead of seeing the no template available sad message.

Installing these templates into your theme from here is actually super easy. In the ellipsis menu in the upper right, there is an export button. When you click that, what it does is it downloads a zip file of all of these templates that you’ve just created. 

So within here, there is the header template part and the index template part, and all I need to do is delete the block template that I created before which was just completely empty. And then just drag these two new folders with the two new files into my theme. Now if anyone were to install this theme, if they did not have the block editor experiment turned on, they would see just a regular typical WordPress site and they’d be able to use that just like they normally would. But if they were to activate the full-site editor experiment, then they would start out with the new block-based theme version of their site, and they would be able to work with those exact same templates that I just created. And that’s that.

Birgit Pauli-Haack: Wow, that’s pretty amazing. Are there any questions from you Carolina or Eileen for Kjell?

Carolina Nymark: No. I’m still always amazed and fascinated how fast the editor updates–the site editor. Because we had some bugs, and then they added the solution for those bugs, and now we have a working exporter, and that’s just a couple of weeks. So that is really amazing and it’s fun to see.

Birgit Pauli-Haack: Yeah, it’s really amazing. We have a video on the YouTube channel when Enrique Piqueras demonstrated the first set of it, and he glanced over a few things, but it was not as fluid as this was.

And as expected, we have already our first set of questions. Steve Musial has the question: Will block templates be able to use Twig? Twig is…you know what Twig is?

Kjell Reigstad: Yeah. The actual markup for block templates right now is still something that is being figured out. The question has recently come up around how does dynamic content work within these templates. Because right now as you in my demo, it’s just HTML which isn’t really going to work that way. There have been discussion around exactly how those templates are going to be formatted and it’s still subject to change, but what we’ve been talking about lately is relying on some of the same PHP we’ve had for years in WordPress so we don’t completely rewrite everything. I don’t know about Twig specifically, but I do know that the exact markup we’re using is still under discussion.

Birgit Pauli-Haack: Well, thank you. Then an anonymous attendee had a reference to a video where some people make a comment that there is a lot of unnecessary code in the block editor, is this something that the Gutenberg team is looking to improve on over the next year? It’s a little bit past the theme, but it’s just the block editor. Do you have an answer? Who wants to grab that?

Eileen Violini: I’d like to know, I guess, exactly what they’re seeing as unnecessary code. Not knowing what exactly you’re looking at, it’s hard to be able to comment directly.

Birgit Pauli-Haack: Yeah. It’s more about the post content with all the comments in there. And that’s how Gutenberg just works, so you don’t need to clean that up in your database. You have other means to grab the content that’s now much more structured than before. Before it was actually a mess, now it’s actually much cleaner because it’s so structured in blocks.

How well does this incorporate with SEO engine

Nathan Shower has a question, how well does this incorporate with SEO engine? Nobody knows yet, right.

Kjell Reigstad: Yeah. That’s something that we need to figure out.

Birgit Pauli-Haack: Yeah. I think it needs to be made clear though, full-site editing is not about to be released tomorrow. It’s a lot of ways still to come, and the target date is December 2020. Until then, there are a lot of things in motion. There is a full-site editing outreach experiment going on; we can post the link later in the YouTube video description and on the show notes, but you can always sign up for that as a separate channel. And there are some testing where site builders test the full-site editing, if it fits the workflow or what’s not working kind of thing. And that’s definitely a question that will come up in November, but I think it’s way too early to do this now.

Then on YouTube, Nahuai Badiola, I guess we answered the question about the dynamic pages, that’s still in the works. But some of it is actually with the posts, the query block is dynamic content, also some of the widget blocks are dynamic content. But here’s a question: Can you change the parameters for the query block?

Can you change the parameters for the query block?

Kjell Reigstad: I think not yet, I’m not 100% sure. I believe that currently you cannot, but I’m pretty sure there are PRs open that will allow you to and you certainly will be able to when this launches.

How’s the navigation block processing?

Birgit Pauli-Haack: Okay. Then we have Shyam Morjaria, sorry I’m butchering your name there. How’s the navigation block processing? Can you tell us a little bit more about how this block would work in a large content website with many subcategories or subtopics? I’m interested in how we can use it to help our users get the information they are looking for as quickly as possible.

Carolina Nymark: Well, I can try. The goal was to have the navigation block in 5.5 and as I understand it, that’s not going to happen. But I think one of the reasons behind that was because the navigation block will mostly be used via the full-site editing because the current menu system is not going to work with full-site editing but it works fine now. 

The big benefit that Kjell showed you is that you can now select existing menus. So my suggestion would be to make a copy of your site and test it. If something breaks then something is not working as it’s meant to be, so your feedback would be very helpful. I also recommend that you test in your navigation screen that is experimental. There are currently two different ways to create new menus and edit menus, where you move the elements around. I don’t know if that answers your question, but I hope it’s something that you can take with you.

Birgit Pauli-Haack: Yeah. And if you have the plug-in installed, you can test that. And I have used the navigation block even if I’m not opening up the navigation screen as a sub-navigation for larger pages so it worked fine. But of course when you have a lot of subcategories, you definitely want to test everything in the new versions.

Are there any plans to allow the use of the editor without any theme?

Thomas Higginbotham writes, “I noticed you still had to specify a theme when using the full page block editor. Are there any plans to allow the use of the editor without any theme or will a theme always be required?” Eileen, you want to take that?

Eileen Violini: I don’t know of any PRs or anything at the moment that are in there issue-wise, I’m not sure if you guys know anything, but I’m not aware of something that would allow us to do that. I think at this point, there’s always going to be something like a theme. It might be very scaled back or minimal as you work to build. That’s what I’ve been using in my testing, I have a very, very minimal starter theme that I work with just so that I can see everything better, and I’m not fighting against classes or something that already exists. So I think there’s going to be something there, but maybe it’s not what we are used to seeing.

Birgit Pauli-Haack: Yeah. Matías Ventura, who’s one of the architects on the Gutenberg project, he had on his personal blog, I will have the link in the show notes, he talked about that the theme metaphor won’t change with the block editor. It will always be something in there that’s called a theme, it will have the same hierarchy as it has now. Maybe just the extension changes and even that is not sure yet, from HTML to PHP and back. But there will always be a theme there, because you need to style things and somewhere it needs to be.

How do you get a block into your theme page with code?

William Patton is here, “Hi to Scotland.” William said, “I know that the demo focused on how this can be done without code. But what about those, like myself, that want to do it with code? How do you get a block into your theme page?”

Kjell Reigstad: Yeah. In fact after doing this demo, my next step probably would be to jump into the code editor and edit what I started creating in Gutenberg. That’s really the easiest way to do it, unless you’ve completely memorized the way Gutenberg does markup. But Gutenberg will provide a really good base that you can start building on. And I would do things like changing the HTML element for that group block and fine-tuning things just straight up in the markup.

Birgit Pauli-Haack: Yeah. I saw some experiments from other people on the team that just had the file, and then put the block code that they copy-pasted from the content over into their various areas of the theme. You don’t even need to know a whole lot of code.

What kind of themes would you all like to see more in WordPress in the future?

Mel Choyce, waving, asked “What kind of themes would you all like to see more in WordPress in the future?” Yeah, sky is the limit, right?

Eileen Violini: Definitely. I know there’s a call-out now for experimental themes, right Carolina? You wrote that up.

Carolina Nymark: Yeah.

Eileen Violini: And you’re looking for very targeted niche-type things. When I work with people in the community, I think end users can benefit from having a theme that has a lot of what they’re already looking for there so they don’t have to think too much about all the extra stuff. So maybe things that are directed towards real estate agents, or restaurants, or specific niche groups markets that would really be helpful, podcasting themes, or something like that.

Carolina Nymark: Yeah, I agree. I look at a lot of themes every week and come on, they’re identical. Without much more variation. Identical code makes it easier for me who reviews the actual code, looks for security issues and everything, but it’s boring. We need more niche themes, we need more colorful themes, we need themes that maybe do not have a header menu and main content, maybe things should move around a little bit, some different shapes. Something exciting and fun or perhaps again, just a wedding] theme, a dog-walking theme, something that helps people right now, like COVID, help people get transportation or go shopping. Something targeted small niches and markets like that. Yes, you can build an e-commerce theme to cover everything, but a shop is not going to be selling everything. They’re going to be selling like 10 products maybe, so it can definitely be a lot more niche that it is right now.

Kjell Reigstad: I think, from my perspective, we need two very different kinds of themes right now. We need some very simple themes that are super clean, and very easy to use, and just work, and will work for a lot of different sites. Then on the other end, we need just weird, fun themes that are beautiful design-wise and show that WordPress is a medium for expressing excellent design, and art, and experimentation. So I think we need both of those things at the same time, really. I always am really drawn to both of those, I guess.

Birgit Pauli-Haack: Very enlightening, thank you.

Where would the global styles fit into the full-site editing?

Lee Shadle has the question, “Where would the global styles fit into the full-site editing?” That’s a good question. The global styles have not yet been moved forward or there are quite a few things being done, but what would answer that?

Kjell Reigstad: Yeah. A lot of the global styles work that has been happening to date has been behind the scenes structural work. The way that global styles would fit into for example, what I showed in my demo, is after I created these basic templates, I would go ahead and start converting some of the site’s styles into values and then experimental theme .JSON file. And what global styles will do with that is when you supply that file, it will automatically generate a set of CSS variables that you can then use in your theme. Eventually, once the UI is built for it, people will be able to just edit all of those variables in real time in the full-site editor. You can do that first part today, you can make an experimental theme .JSON file, and you can start populating it with values. There’s documentation about that already and experiments in the GitHub/WordPress/theme-experiments repository, I would urge everyone to check that out and contribute there if you do play around with any of this. You can see examples in there, and Gutenberg will take those and generate the CSS variables and you can start playing with them today.

Birgit Pauli-Haack: Wouldn’t that also require that the variables are also in the PHP code or in the theme template code?

Kjell Reigstad: Just in your CSS file for now.

Birgit Pauli-Haack: Hope that answers your question, Lee.

What should be starting steps if one wants to try building block-based theme?

Akshaya Rane has a question, “Please advise what should be starting steps if one wants to try building block-based theme.” I think you mentioned that already. But Carolina has a course on that, to get you up and running from very basic to a full-site editing theme. So what are those starting points?

Carolina Nymark: Actually, the starting point, you would just start in the standard block editor and it’s a change in your mindset. The technical aspects are not going to be difficult, the mindset, the new way to build themes is going to be the big thing. So start with the block editor and just picture your different elements and add them in different places, move them around, change some styles. And use it as a full page, not just a post content, start from there. Then you can copy the content from the code editor and use that in your HTML templates if you like.

Birgit Pauli-Haack: All right. Sounds good, easy enough.

Eileen Violini: I think what’s important to note there is because so much of Gutenberg–with building blocks, there’s been a huge learning curve I think for lots of people in the community. And with full-site editing, that’s not here, there’s not a lot of tooling that we have to get into. You can very quickly either in a local development environment using whatever you like to use, you can get up and running quickly and start testing this out. There isn’t that barrier of entry of installing webpack, and node, and all of that stuff that drives me pretty much batty.

Birgit Pauli-Haack: You and a million other people, but that’s good to know and thank you for making that point.

Will you be able to lock parts of the site editor

Bridget Wessel has the question, “Will you be able to lock parts of the site editor to control what clients and editor can change in the header and footer parts of the site?” Or Nathan added, “Disable for the client completely after it’s built.” Who wants to take it? Eileen?

Carolina Nymark: I hope so.

Birgit Pauli-Haack: Carolina, we all hope so.

Carolina Nymark: I don’t know. We definitely need it, but I don’t know if there’s anything being worked on right now. I don’t know if there’s any open GitHub issues for it. So probably, later.

Kjell Reigstad: Yeah, there is an open issue for it. This is a very common request. Any time I talk to theme developers, this is one of the first questions. So yeah, there is an open issue for it and it is something that is definitely being talked about.

Eileen Violini: I know right now, we can do that within PHP if we create page templates. That can be locked in PHP and in JavaScript if you build a block template or what people call nested blocks, that can be done right now. But that was something I was wondering myself this week as I was playing around things. Because you can build the template parts that you’re using in the full-site editor, but you can also delete everything once you build it which is nice when you’re experimenting, but not so great if you need to hand it off to your client. So that’s definitely something that I think everybody–it’s on their wishlist.

Birgit Pauli-Haack: Yeah. Brings a big, big, bold oops when you delete it all. I think that was also a big point that Matías made in his blog post, that just because we build the tools right now doesn’t mean that we need to hand it over to clients. It’s for implementers, that’s for those who do it for other people and then can easily design things and then hand it over. That’s definitely part of the roadmap as well.

How does one get the new menu admin?

Steve has another question, “How does one get the new menu admin? Is that included in the full-site editing plug-in?”

Eileen Violini: When you install Gutenberg and then you go into the Experiments panel, you can add the navigation screen, and it also gives you access to the navigation block. So you can run Gutenberg in a production site and still use the navigation block, I think you said you were using it to build essentially a table of contents type of thing for pages. So that’s how you would use that piece right now.

Birgit Pauli-Haack: Yeah. I think to just clarify the navigation screen where you do menu things, that’s still experimental, but the navigation block has been in the Gutenberg plug-in for, I would say 10 or so versions already and has gotten better. As Carolina said at the beginning, it hasn’t been merged into core yet because there is no site editing and for a lot of users, it confuses them. Why would they do a navigation block when they cannot change the navigation on that.

With full-site editing, what will happen to the Customizer?

Then Nilambar Sharma has, “With full-site editing, what will happen to the Customizer? Will it be depreciated or will full-site editing be integrated with the Customizer?” “Same with the widgets,” Steve added. Who knows? Who wants to take that?

Kjell Reigstad: I can do that. I don’t know the answer to that, I don’t think anyone does just yet. I know this has been said many times, but WordPress is not typically very good at depreciating things so it’s likely that we’ll have the Customizer for a long time. 

But I do think that a lot of what the Customizer does is going to be taken care of by full-site editing and global styles. So I don’t know how exactly that’ll work, if when you’re building a theme you’ll build in Customizer stuff and separate global styles stuff, or if Gutenberg will handle translating that from one area to another, or what. But I do think we’re going to have both for at least a little while.

Birgit Pauli-Haack: Were any of you in the joint meeting between Customizer and the Gutenberg team?

Carolina Nymark: I was there, but actually I wasn’t clear on the answer to this question. I don’t think anyone really knows yet.

Birgit Pauli-Haack: Yeah. I think the only outcome that was there was who is tracking backwards compatibility, who has that on the plate, and it seems like the Customizer team is going to take that on to make sure that full-site editing and Customizer are coexisting for a long time. I don’t know how you feel about it, but I see the full-site editing coming into core maybe in December, but I don’t think that there are a whole lot of theme developers who will jump on in it yet, until it has the second and third iteration of it. Even the users, they don’t want to change the theme and they don’t have to. Just because it’s available, doesn’t mean they have to use it. So I think that will still stay around for a while. 

I’m not quite sure, Steve, what you think about the widgets. The widget areas? He tapped on on that question about the Customizer, what’s happening with widgets. Most of them have been translated to blocks and if you give them an area in your theme, then you can place them there, right? All right. Don’t beat me up all the time. 

Carolina Nymark: Maybe I’m not correct, but I think that you will be able to place blocks inside existing widget areas?

Kjell Reigstad: In the plug-in, there is an experiment to turn on the widget screen which will allow you to place blocks within widget areas.

Carolina Nymark: So it’s kind of middle way. 

Birgit Pauli-Haack: Yeah, exactly.

Carolina Nymark: Topic of the Customizer, I’m already seeing a little bit of difficulties or questions and support requests. When we start adding font size, for example, inside editor. And you have a global setting, or maybe you have settings for the site title font size, or for the body content, or widget titles, and then you start changing things in editor. And the theme moderator needs to know okay, which style am I actually going to be using? And that doesn’t always work, because if you’re doing free themes, there’s always a chance that your theme is going to be out of date because there’s not enough time to keep everything up to date. So the support requests about these duplicate styles are definitely increasing.

Birgit Pauli-Haack: Yeah, I can imagine. All right. We don’t have anymore questions, neither on the YouTube nor on the Zoom space. That’s highly unusual, but the time is really right. 

I have two more questions for our panelists, but I’m glad that we got all the questions out of the way. They were good ones, and I learned a lot from you three. Thank you so much for being there.

Conclusions

Two more questions coming, do you have any announcements that you couldn’t get in before or you want the people to keep in mind? And the second one is if people want to get in touch with you, what would be the best way? Who wants to start? Kjell?

Kjell Reigstad: Sure. I guess the last thing I’d like to say is just that I would urge everyone to experiment with this stuff. Try building a block-based theme. Try, as Carolina mentioned, just using these blocks in just the normal post and page editor, even to just start building a full site there, and see how it feels, and see what the missing pieces are. 

And file issues in the GitHub repository, I know especially for people who have never filed an issue before, it can seem a little weird but try it, there’s a wonderful WordPress community as I know all of you are aware. So try this out, visit the theme-experiments repository that I mentioned before, I’m sure we’ll include a link to that, to try out some of the work that contributors have already begun and contribute there, too. And then in terms of getting in touch with me, I’m on the wordpress.org Slack, so feel free to reach out to me there or on Twitter, I’m just @kjellr.

Birgit Pauli-Haack: All right. Kjell also wrote, back in March, a post on the themeshaper.com exploring the Global Styles. Of course, it has progressed since then, but it’s definitely great reading if you’re really interested in that part of theme development. I post it here as well as on YouTube.

Carolina, anything that you want people to know that you didn’t get the word in yet.

Carolina Nymark: We didn’t talk anything about block patterns. So if you want to start small and you don’t want to wait until December, I suggest going to wordpress.org and read documentation for block patterns. They are basically just different blocks, different styles grouped together and you can drag them from the pattern selector and put them in your post content, it can be big or small and it’s basically an early version of template parts, you can call it. So, you can put those together and play with them.

Birgit Pauli-Haack: Good point.

Carolina Nymark: And they’re much easier to create than custom blocks, so much easier. I’m also on the WordPress Slack and I’m going to have to type out my nickname Poena and also on Twitter @carolinapoena.

Birgit Pauli-Haack: Poena. The Twitter we do later. All right. I also wanted to reiterate that Carolina has put a full-site editing course together that’s now available for free on fullsiteediting.com. And she also has a few blog posts there about some knowledge. Thank you very much for sharing all your knowledge that prominently. In contrast to other courses that I’ve seen, she actually doesn’t assume any prior knowledge. 

Carolina Nymark: Some.

Birgit Pauli-Haack: Which is really cool. Some, but yeah. But then you also have very good resources there. fullsiteediting.com, that’s a brilliant domain name. 

Carolina Nymark: Thank you.

Birgit Pauli-Haack: Eileen.

Eileen Violini: My point on take away is as you’re experimenting, ask questions either in WordPress Slack in the full-site editing experiments channel or reach out on Twitter. I’m @itsjusteileen in WordPress Slack, on Twitter, and in GitHub. Definitely log issues but just ask questions. Say, “This is what I’m seeing and are you seeing the same thing?” Because that’s what I’ve been running into, wondering as I’ve been experimenting, am I just doing it wrong? So, it’s really great to be able to ask the rest of the community, are you having the same experience.

Birgit Pauli-Haack: Yeah. I just want to point out to our audience that Eileen’s talk at WordCamp Kent was just published on WordPress.tv. It’s all about the future of themes and it gets you through the high level to the low level, up and down the code and the ideas. So if you need a primer on that, that’s definitely a great video to watch. Wonderful.

Thank you all for coming, I’m in awe of your expertise and I feel blessed that we could do the show together. Thank you so much. 

Big thank you also to the viewers, for all your questions, they were so helpful, I think, to anybody who’s going to watch this later on. If you have any more questions, you can all send them via email to pauli@gutenbergtimes.com. The recording is available in just a few minutes at the YouTube channel and we will post some of the links in the description of the video so you don’t have to wait until we have the transcript and I can get around to post it all on the Gutenberg Times. So, that’s it. That’s goodbye and good luck from me. And we do all a big wave. Goodbye and thanks everybody. Take care. 

Carolina Nymark: Thank you.

Eileen Violini: Bye.

Kjell Reigstad: Thank you. Bye.

Related Posts