A discussion with Gutenberg development team member Enrique Piqueras (@epiqueras1) who will walk us through the highlights of the experimental, full-site, editing experience, and then we will discuss how block-based themes could work, and how they are backwards compatible.
Resources
- Theme Experiments on Github with four block-based themes.
- Jeff Ong’s tutorial on How to create a block based Theme
- Block-based Theme Documentation (Experimental)
- Full Page Editing on GitHub
- Defining Content-Block Areas
Make sure you also check out the earlier Live Q & A “Rethinking Themes in WordPress” with William Patton from the Theme Review Team, Rich Tabor creator of CoBlocks and Ellen Bauer, Theme shop owner.
Transcript
Birgit Pauli-Haack: Welcome to our 21st episode of the Gutenberg Times Live Q&A. My name is Birgit Pauli-Haack. I’m your host and the curator of Gutenberg Times. Thank you all for joining us. It’s so great to have you.
In today’s show we will discuss and show you some experimental, full-site, editing experience on Gutenberg and how theme templates and template parts could be used. There’s a big caveat. Nothing is set in stone or final. The experimental flag is on these things for a reason.
I am extremely honored to have Enrique Piqueras from the Gutenberg development team as our guest today. Hi, Enrique.
Enrique Piqueras: Hey. Thanks for having me.
Birgit Pauli-Haack:You’re welcome. I love what you did on the work. It’s really cool. Where are you right now?
Enrique Piqueras: I’m currently visiting family in Peru, but I’m usually based out of Seattle.
Birgit Pauli-Haack: All right. I’m assuming also the weather’s better in Peru.
Enrique Piqueras: Yeah. Got to run away from the winter during this… yeah. When you work remotely, you can switch between hemispheres when it’s convenient.
Birgit Pauli-Haack: Well, I’m glad we’re still on the same time zone, so I, or you don’t have to get up in the middle of the night. Where is everyone else? Where are you listening from? Use the chat window to the right, or on the bottom there’s a little check button, and let us know where you’re from.
We have quite a few. I see some familiar faces. Well, names, actually, but we also have a few new people, here, on our Zoom, so I’ll explain a little bit before the Q&A session. It’s on the bottom of the page there is a Q&A button where we have the questions. And then that’s where I read from. For the YouTube Q&A, watching us on YouTube, please, use the chat window to the right and I switch between the two systems, so I might not be very good in keeping the order straight. Please, forgive me. Also, please keep it kind. Even if you disagree, be kind. This is a family-friendly endeavor.
Enrique, I think we are good to head into it. Enrique, who do you work for and what do you do? Just kind of a little introduction.
Enrique Piqueras: I work for Automattic. I spend most of my time working on Gutenberg.
Birgit Pauli-Haack: All right. Cool. So, what’s the show about? Yaron already had a question. “Thanks for setting this up. This will be available for download later and watch it again?”
Yes, we are live streaming on YouTube. YouTube will, after the show is over after well, I don’t know. Sometimes it takes half an hour. Sometimes it takes an hour. The recording will be available on the youtube.com/gutenbergtimes channel. We will also create a transcript of that and have the post on the Gutenberg Times later next week, with the resources and the links that we share here on the chat window, also with additional information that we might touch on or Enrique might touch on here.
Cutting-edge, experimental full-site editing
Enrique will walk us through the highlights of the experimental, full-site, editing experience, and then we will discuss how block-based themes could work and how they are backwards compatible and so much more, and we will answer the questions in between.
As I said, it’s all cutting-edge stuff and very early in the stage. When it’s eventually released, it might look differently, but it’s hard to form an opinion about all things and give input when no one has an understanding how the pieces might fit together.
Without further ado, Enrique, it’s all yours.
Enrique Piqueras: I’m going to share my screen. I want to start by giving a sort of visual tour of how this works and what we’ve done with themes.
Birgit Pauli-Haack: Excellent.
Enrique Piqueras: Then we’ll leave the floor open for questions because I imagine there will be a lot.
Birgit Pauli-Haack: I’ll just kind of greet a few people. Hi, Roy from Seattle. Hi, Dennis from Rhode Island. hi Eileen from Philly. Bagel from Bonn. I went to school in Bonn for 10 years.
This session is going to be … It depends on how many questions we’ll have, but it will be about an hour.
Enrique Piqueras: Can you see my screen now?
Birgit Pauli-Haack: I can see your screen, yes. Can everybody else see Enrique’s screen?
Enrique Piqueras: Yeah? I can see the chat right now, but-
Birgit Pauli-Haack: Okay, cool.
Enrique Piqueras: All of these things are currently behind a feature flag, or a Gutenberg experiment, which is what we’re calling them. To work with this, you have to go to this page under Gutenberg experiments, turn this on, save your changes, which I’ve already done.
It’s taking its time.
Birgit Pauli-Haack: You have the whole world coming through the pipe.
Enrique Piqueras: It’s on my local environment.
There it is. Okay.
The main thing this I’m going to do is change how template resolution works in the theme resolution code. It’s going to enhance themes with the ability to define block templates and block template parts. These are sort of a parallel to what we’ve always done traditionally with PHP files, but, instead of having PHP code, they have HTML, which is serialized block content from the block editor. This is what your block editor saves when you edit a post and would get rendered on the front end.
I’ve gone ahead and installed a theme that takes advantage of this. WordPress has a theme experiments repo with currently four themes that are playing around with these features. Most of them are based on Mel’s Johannes theme. If you want to sort of experiment with this yourself, I would encourage you to start with this, because it’s a lot more bare bones and fully works with the plugins.
Some of these are trying new things that are not that stable and you might run into a few errors. It’ll just be a bit harder for you to understand how things are working.
For this, I’ve installed Parisienne and I’m going to show you my local directory, what it looks like. This is the theme. I have an empty index. This is just for convention. You could remove it in the future we might remove it. The license, the ReadMe, your classic style CSS, Global Style Resets, and-
Birgit Pauli-Haack: Enrique, may I bother you to kind of make it a little bit bigger on the code?
Enrique Piqueras: Sure. It’s just a random CSS that’s reset.
Birgit Pauli-Haack: Right. I know that. But it’s really hard to read a bit.
Enrique Piqueras: Is that better?
Birgit Pauli-Haack: That’s awesome, yes.
Enrique Piqueras: Okay.
In your functions you have the theme supports, some color changes for the block editor. This one has some starter content. This hasn’t changed much, except for the fact that this starter content is now block content.
Here’s where things change. Now we have a block template and a blog template parts folder. Here, we have these HTML templates that are the serialized block content I was talking about. So, template parts and templates. How these work, to understand, you have to look at the theme hierarchy. When your WordPress instance search the site on the front end, it’s going to go through this hierarchy to resolve what template it should show. If you’re looking at a similar page, it’s going to ask, “Is this a static page, single-post page?”
Say it’s a static page. We need a page template. Is there a custom template assigned to this page, or should we just use the default one? Let’s say there’s no custom one, so we look at the default one. Is there a page dash the slug of this CPT type or the slug of the page? Sorry, is there just one that’s going to use it? If there isn’t one that’s going to go to the next one and so on until it finds a template all the way your index are PHP, which is the one you must have and these HTML templates now when you have the feature flag enabled, will be given high priority over this PHP template hierarchy. So now, and we’ll not only look for PHP files but also for these HTML templates and they will do so in a sort of enhanced way which allows for users to manipulate them.
That’s a bit confusing but I’m going to try to explain it a bit simpler. So say we’re loading the same page we were talking about. None of these are the fines, so we reach singular. Now the engine is going to ask first, is there a singular customized template saved by the user? So this would be stored as an actual post in a hidden part of the database that doesn’t actually render as opposed to on the site. So using the template CPT. If there is, it’s going to use that and that’s the template it’s going to result to because it’s a user customized template and the user might have customized it for a reason. He’s not going to want it to be overwritten by the started content from theme.
Either there isn’t one safe like that, it’s going to go to the theme and look for a blog template file. If there isn’t one there, then it’s going to do the PHP file. So it’s like a three tiered hierarchy on top of this hierarchy for resolving these templates. So this allows for themes to progressively adopt block templates.
Progressive enhancement over PHP template hierarchy
You might even have cases where themes want to register specific areas for direct manipulation. So the whole point of doing this is that templates become user editable because they’re just serialize block contents where they can be loaded by a block editor under whatever context and edited and saved by users. But you might have very strict requirements over what parts of your site can be updated and it might not be easy to handle with things like permissions. So you might still have some static HTML, PHP templates that specifically require each HTML template parts in specific areas. So I’m just trying to show how it’s very flexible. It doesn’t lock you into just using HTML. It’s a progressive enhancement over the current PHP template hierarchy. So let’s look, I’ve activated this Parisienne theme, just has an index HTML. There’s no PHP templates, so it’s just going to go all the way and result to this when loading the site, and this is what it looks like.
You can see I have this Gutenberg here, a navigation menu, my address, I think this is a cover block and the footer. So here you can see the Heather’s a template park. The content is this thing called WP post content. And the site footers and other template parts. So first, let’s see what this Heather template part looks like. It’s what we’re seeing at the top. It’s a navigation menu block with navigation links. There is a column on the right with some paragraphs for the address and a group at the bottom. Oh, the whole thing is trapped in a group.
So another thing is you’re probably not going to be making these templates manually. Like you write PHP templates, you’ll use an editor and then export the output where you will be writing and coding will be the actual blocks that you use here so that renders there. Then this WP post content is rendering the content. This is a dynamic block that just loads the post content of the first post in the loop. And the site footer is another template part.
So now because these things are just blocks, we can load them into a block editor. So remember how I said that at every stage of the hierarchy, it’s going to first look for a user customized version off the template, and then look for the file. And only use the file if it can’t find the customized one?
So this means we can now have these interfaces where we can have a way for completely editing the site. So this is the same thing I’m seeing here, but in the editing mode, in a block editor. And so what is this classic here, this is the NAF menu. This is a site title block and the column with a paragraph. So the same thing that’s on the file. Now the reason you’re seeing classic blocks layers, which is if you have markup that is not inside a block, like for example this index template has this Heather HTML or this main HTML that will still work in the editor but it will just be a classic block that you can edit as far as sheer mouth. So probably not the best user experience, but does this one of the first themes, and there probably aren’t any blocks right now to support this sort of arbitrary class like site footer. We probably don’t have something like that yet. And that’s why they did it.
But now let me show you how you can edit things. So I’m going to hide and edit the footer. So contain theme address, maybe change it’s location here too. We can do some cool stuff like login you to assume in the template parts that you have that are being used here. Now this is not showing all template parts from the folder here because you’re not being used in any templates. You have to insert the first for them to load. But you can go through the Heather and changes should sync. But something is going on and now I’m syncing. You can update the sign and the changes will show in front-end.
Birgit Pauli-Haack: Yes. Everybody saw that, right? It was so fast.
Enrique Piqueras: So now this show is customized because they’ve been customized. And it is telling you that it’s not going to look the files anymore. It’s going to load these customized versions.
The power of block templates
So that’s sort of the idea. Like what block templates can power? So naturally, I guess the next question people have is how do we do more dynamic things with these templates? Because they’re HTML. So they look kind of static. Like how do I do translation? How do I have a post loop like they always have on PHP, like I want to an archive page all of my recipe posts. So the answer to that is that it’s now all in blocks. So you can have a dynamic block called the query block where you can expose a way for the user to customize a query visually in the editor and that renders a list of posts using its inner blocks as configuration for the layout. And it’s still PHP because that blog has PHP code to run there like that and have that behavior. It’s just not here.
It’s on the PHP file that has the definition for the blog. So we’re sort of introducing just another layer between the dynamic PHP code and what’s rendered on the site. And this new layer is directly editable by users, which is a much better user experience for people using WordPress. Now I said I was going to say what demo template thing is, and basically that’s just something we baked in right out into the plug in because you might enable this without having a theme activated that has block templates and it’ll show like an empty front-end that won’t work.
So the demo templates are this hack to ship the plugin with some templates you can’t have a theme and a plugin combined in WordPress. So it’s like ad hoc way of shipping templates with a plugin, just temporary for people to test this. So if you enabled it? It’s going to load some templates that are here in the plugin, just a front page and a Heather that’s being used to test development.
And yeah. So what I was saying before also about this, the people making themes like this that you’re probably not going to be coding the templates manually. I’ve meant that you could have a bottom like this where you say export is theme and it exports that your current set of templates and blocked templates parts with your customer stations and then you open it and you have a sort of starter theme with the templates and then you can go ahead and say edit your functions PHP in the PHP and you can expand on this. I could see people making plugins for also doing these like starter content in a visual way or that might even be done by core in the future. Maybe there’s a lot more you can do now. Theme building can also be visual. Yeah, that’s, I think that’s everything I wanted to show.
Birgit Pauli-Haack: Well, thank you Enrique. This was quite, I think for someone who saw it the first time a little bit overwhelming. So maybe you can unpack the parts again, you had this great overview graphic with the different levels. So the colors, I’m not sure if it was all clear what the colors were. Do you read it from left to right or from right to left?
Enrique Piqueras: So you read it from left to right. These gray blocks, they’re not really templates. They’re more like questions that they call them page types here. So if you’re looking at a singular page, it’s then going to ask is it a single post page or a static page? And then based on that it’s going to go to the next level and to the next level. Then the orange ones are called variable templates. So these are actually first.
I’m sorry, I don’t know why this phone is ringing in this room. And here’s where it’s going to look, is mindtypesubtype.php.find. If it’s not, it’s going to go to the next one and the next one and so on. And the colors change because they’re a little bit different. So the survey role, so they are sort of dynamic based on some parameters with a post like mind type, subtype. The secondary ones, I’m not sure what the difference between secondary and primary are, seems kind of arbitrary. I guess it’s just a hierarchical differentiation.
Birgit Pauli-Haack: No, that’s the actual static PHP that all kind of like convention to change some of the things. And then the proper ones are… Yeah some theme templates that on normal in Ireland and there the lines. Okay. Any questions for that?
Enrique Piqueras: Another interesting thing that you can sort of visualize when you look at this is that if you’re officially editing in the editors, say a post type slug. so let’s say it’s a single recipe. Single recipe though HTML template. You’re editing on the front end. The UI will probably have a way of, this is more like a power user feature, but you could say I want to fork this or like spin up a variation of this template for this other post type because they’re very similar. You can use template parts between the two and stuff like that.
Birgit Pauli-Haack: All right, excellent. Yeah, so that’s the graphic. And then now that we’ve kind of went back to the beginning again, we now have a few questions. So, and I’m going to the chat first. Yaron has the question; is it possible to create a single template and just export that one without always exporting the entire theme file? Is that an idea that, so when you are able to, you didn’t demo that yet, that you could actually change template parts and then they’re all, you will be able to explore those. Right?
Enrique Piquera: So he’s asking whether you can export an individual template except for the whole folder? I mean that would be like switching to the code view and copy pasting the contents. You could also just download the whole thing and just delete everything else. But that it’s definitely doable. This is still being sort of, that interface is still being defined so, and it’s being designed in a ticket on the repo by the Oregon design team. and I don’t know, I even, I could imagine seeing a sort of settings page short model where you can check what you want to export, like a configuration page. You can even have settings for setting for the fine starter content, setting the colors or the global styles for this theme that you’re exporting. All of this are like up for the sign.
Birgit Pauli-Haack: And I will share another link where from yesterday or the day before Jeff Ong had published on how to create a block-based template, a theme, and who actually walked through the whole set up. And it was actually a very nice piece of article and tutorial and I will share that in a minute. I first wanted to go to Marcio’s question. So in the traditional template system, we have full control of the markup on a template part or page template, but now blocks are a fundamental part of that mark up for themes that plan to use functional CSS with the default repres blocks for example, how can we have that same level of control? Should we create custom blocks?
Enrique Piqueras: So blocks have a way of setting class names on them, a custom class names on the sidebar at the bottom. I’m not sure if you’ve seen, so that’s a way you could add these functional CSS class names to blocks. You could also filter like have a filter that does it programmatically. It’s definitely doable. It’s not something I would encourage because it’s not easy for your users then to work with unless they know how to code CSS pretty well, but it’s definitely doable if you require that by using existing methods like filters and the feature for custom CSS class names.
Birgit Pauli-Haack: And I can see that there are some template themes, supports actions where you can narrow down the number of the list of sizes, fund sizes to be used, the list of colors to be used and I’m sure sooner or later they will also be more of that. But thank you Marcio. That’s a very good question. And Bagel, yes, there will be a recording available afterwards and then there was another question. Did I miss it? Bagel also asks… “Where in the template hierarchy are actually those block templates come in. It’s at the latest level. So who had saved the last kind of wins or where does it come in?
Enrique Piqueras: Well they’re… You mean for a given template like say singular or single?
Birgit Pauli-Haack: Right. Yeah. If you have a single.
Enrique Piqueras: They’re unique. You can’t have two customized ones. So if you try to go at your singular, it’s going to load the ones already customized, you would have to delete it to load the one from the file. Again deleted, there probably also be a bottom that will say something like go back reset to default or something like that.
Does the Customizer still serve a purpose?
Birgit Pauli-Haack: Okay. So what else do you want to show us today? We all… One was also,
Enrique Piqueras: Do you have a couple more questions?
Birgit Pauli-Haack: We have a couple of more questions that we’ve not looked at? Oh yeah. Coming in now @zarcov_George has a question, “what would be the purpose of the customizer after a full site editing takes place in WordPress?”
Enrique Piqueras: So it wouldn’t be very useful for block based themes of these themes that fully embrace block templates. It will still be useful for themes that only do it partially or don’t do it at all. And another thing is that this site editor or whatever, it ends up becoming the thing I demoed, it’s sort of like a new customizer built on blocks because you’re editing your whole site in a single place.
Oh, another cool thing that I wanted to show is an early exploration of how you could navigate through things here. So if you’re in Heather, you’re editing, say I don’t want to add a link to my home, it will recognize that this isn’t an internal link. And then it’s going to say edit page template. I can click on it and I go to edit this. I’m still in the header as I click from that link, but I’m in the index template, which is what’s going to show my homepage. So this is kind of how like the customizer, you can click on links and navigate around, but all in the block editor and my changes through the Heather are still there and I can see them.
Birgit Pauli-Haack: So I’m, we have another question by Steven Van Nielsen. And he is, “so how are action hooks like WP_school head, WP_photo or WP _body_open, inserted in a block theme?”
Enrique Piqueras: Here we go. So there’s this file called the template canvas that actually renders once a blocked template is resolved, it will go ahead and render it using this PHP file, which has like the bare bones that will be head, that will be footer and body open and then the template goes here.
Birgit Pauli-Haack: That was easy enough. Then Josh Baker has another question. Well here’s a… “I could see many of these templates using blocks that are built solely to be placed in the specific spots in the theme. In that case through the blocks files remain in a plugin? He’s asking because most of his projects at work all include both custom theme and collection of custom blocks, but what is best tractors that you envision about that?
Enrique Piqueras: So yeah, this is interesting because really high end themes will probably have very specific requirements for blogs and they might be filtering existing blogs where they might be introducing new blocks and if they are introducing new blocks that it does introduce this of like how do you ship launch with themes because themes can’t really have plugged in content just like plugins can’t have themes, so this really ties in with the work being done on the block directory and the idea is that the theme directory, when you’re looking and browsing for teams and you’re looking to install a theme, it’s going to show you somehow the blocks that you need to install to support the theme and it’s going to prompt you or give you a notice that by activating the theme you’re also installing these blocks from the block directory and to the user it’s all going to happen in one step for the developers are you? You’re already might have some of those blocks. So they didn’t want me to install all of them.
And for the developer then they’re still going to develop the theme separate and then have blocks in the block directory and somehow the theme is going to define dependencies on those blocks.
Birgit Pauli-Haack: And some of it is a really still a great theory because the block directory hasn’t been built out yet and they, I think when back to the drawing board a couple of months ago, there’s also the idea that themes probably also have block patterns that kind of a collection of blocks that are displayed in the theme in a certain way. And that made that available through a block pattern section of the inserter where you kind of click the plus sign and then have the… So these all in the works and I think just take it one at a time is really how you can explore all that right now.
So there are a lot of moving parts to that. Now Enrique, and I get to your question, Eileen, in a minute. Enrique, are you going to be able to show on your development environment how you can replace a single page template for instance, where we say, okay, the theme comes with that, but I as a user I want different things on there. Are you able to, is that already released? I know you talked about it before.
Enrique Piqueras: Completely redefine this index template?
Birgit Pauli-Haack: Say that again.
Enrique Piqueras: Like completely change this index template?
Birgit Pauli-Haack: Not so much the index template, but when you kind of have a blog post, so you have here post content placeholder, is that the single blog posts view or is that just a front page?
Enrique Piqueras: Right, so this is the WP post content block that I showed earlier here. This is you’re going to render through the first post in the loop. This branch does not have this feature, but this can also be nested under something called a post block or query block that sets the post content and makes it render specific posts instead of just reading from the loop. And the query log would not just be a single post, it’d be a result of a query of a WP query.
Birgit Pauli-Haack: So Eileen has the question, “would you be able to set colors or fonts for the customizer and similar to how 2020 adds colors into the inspector controls through the customizer?”
Enrique Piqueras: Yeah, so there’s a… Office started in the past month and there’re new features that have features called global styles. It’s all really well documented on the issue and get up, if you search for global styles it will show up. And it’s a way for themes to sort of, it’s a standard for themes to define things like this in an interoperable way.
So it’s adjacent object that where you have like some global styles like text, like paragraph, font size, color, all of these sort of global CSS things. And there’s also a hierarchy here. So you have global, so it applies to the entire site. You have document, so it applies to like a post type or a specific post and then you have blocks. So like it applies to a specific block in the specific post.
And themes can export these, can ship with these configurations, which users can then make edits on top off and those get saved. And then they can switch themes and editors specific to the theme they were using when they make these edits or customizations so they can switch between themes and keep their customer stations. In the get of issue, there’s actually a visual prototype where you can play around with some global style controls, eye color, and see what happens when you switch themes, how a customization live on between themes, which is, but it’s actually exactly what was mentioned there with 2020 except it’s done in a way that’s the same for all themes and can it be leveraged at more levels.
Birgit Pauli-Haack: That is possible to see on a good job issue or PR. Oh, the closed one. Yeah, I remember. That is actually a whole interesting way to do it. Yeah, that’s it. Exactly. So on the YouTube channel, Aristida has a question for you and then as he’s watching from Greece, “are there any plans to include the responsive grid emote PR for inner blocks, which is, that’s not entirely about the themes, but yeah, that’s a good question. I’m not sure if you had a have an answer for that. Are there any plans to include the responsive grid mode PR for the inner blocks?
Enrique Piqueras: Yeah, we definitely need that or something like that in core because you probably want to go beyond columns when it comes to having 3d layouts, but there’s still a lot of open design questions and that PR hasn’t gotten in and advice. I’m not confident that it’s going to look anywhere, anything like that when it ships. But to go to start.
Birgit Pauli-Haack: Well, thank you. So there’s another question on… Steven has another question that if I get the future template hierarchy in our blog theme, right, page.HTML will be preferred before page.PHP, but will page-Dollar ID, PHP preferred before page.HTML or will HTML templates always be preferred?
Enrique Piqueras: Yeah, so that’s a good question. He’s been paying a lot of attention. I didn’t want to address that without someone asking because it’s kind of makes it even harder to grasp at first but the original proposal said that yes, I proposed that page ID. PHP should be preferred before page HTML. So even PHP templates should be preferred over a Schimel templates if they’re more specific. But for simplicity for this feature, flag it. If you have a Schimel templates activated, it’s just going to look at a Schimel templates. So no, but it’s not set in stone yet. I still, I originally proposed that it should be, the answer should be yes to that question. But now I’m kind of being convinced otherwise because I see cases like this where a theme author might want to have a page ID before pages Schimel.
She was very confusing for both the user and the thing about bridge to sort of wrangle with and in that case, like if there’s a theme author that wants this control, I would see him having everything as PHP templates. And then manually requiring template parts as sort of register areas that can be edited by the user. But this is sort of a question that has to be answered by people with developing themes, some of the daily and running into walls.
Birgit Pauli-Haack: I’m muted again. I’m sorry. So I think it has one of the questions. So how will plugins that create pages with short cases edit to be able to access page templates if they are built with the block templates? If your plugin has a specific block, will you be able to insert it? I think there are actually two questions, but yeah.
Enrique Piqueras: So how will plugins that create pages with short codes? I’m assuming?
Birgit Pauli-Haack: Yeah, short cases is kind of the whole API.
Enrique Piqueras: Okay. With short cases added be able to access page templates if they are built with block templates. So when you say, okay, so the page template is built with blog templates and you want a page to access it?
Birgit Pauli-Haack: A plugin?
Enrique Piqueras: So plugins.
Birgit Pauli-Haack: Plugins to insert a short code.
Enrique Piqueras: On a page.
Birgit Pauli-Haack: I think that’s, if I understood this correctly, yeah.
Enrique Piqueras: Well the page, we’ll just be like post content. So you can just add a show code there. If it’s a normal, if it’s a non blog editor patient, you can just add a short code. If it’s a blog editor post content, then you can add a short code block.
Birgit Pauli-Haack: so I would think that plugins that use short codes, you can use the short code on the page as I use it, but you cannot dynamically insert into a page template that’s done with HTML, a short code from a plugin. I think that was the question. I think that Gutenberg and how templates are made as well as blocks. Sooner or later the whole system will go away from short codes so that it actually can be implemented. So do you have in this case, Eileen,
Enrique Piqueras: I’m assuming it’s like a really complex short code that hasn’t been developed over a long amount of time and rebuilding it in a blog, it doesn’t make sense or is too costly. So you can do it. You can insert a short code block and even also do that programmatically. You don’t have to have someone open the page and edit it on the editor.
Birgit Pauli-Haack: It will need some heavy development there.
Enrique Piqueras: If you’re plugging as a specific
Birgit Pauli-Haack: There’s another question. Bagel, thinking of clients, what are users have a chance to reset that changes of the blocks to the starter content? It’s one question, so right now the customizer doesn’t offer a way to really start from scratch except if you re-install WordPress with let’s be changed in a block themes thought a content kind of way.
Enrique Piqueras: Yeah, so because the files are still there, your changes are not overriding them. You can the site editor UI or the new customizer or whatever we decided to call it can offer ways of going back to starter content either for your whole theme or maybe just for specific page template or for a specific template part. So you can say like Heather reset to starter.
Birgit Pauli-Haack: And the other way around you can say, okay, take out the starter and give me some plain blocks. I think they’ll, I shared the theme shaper article in the chat window in that theme that Jeff is using for that is 2020 block theme and it has a quite considerable start a content India and it creates automatically pages with that starter theme. And so that’s probably a good implementation to play around with it and think through what would be needed. With all the caveat, this is still in flux and it might be handled differently when it’s finally released. Maurice wants to know how our sidebars going to be handled.
Enrique Piqueras: So your sidebar, so you have an index template and it would probably be in a column and there’ll be made of blocks and you can make it a template part if you want to reuse it across more templates without having to go and make it, it’s in each one of them. So, your sidebar will probably be a template part with blocks.
Birgit Pauli-Haack: Okay. Thank you. Any more questions? I don’t have. And then we have, I’m just going over to YouTube again. No, there doesn’t seem to be any questions there either. So I think with the links that were shared and the team of Gutenberg also shared in the GitHub repository of the theme experience, certain resources that you could use and kind of read up about it and see exactly how that can play out. So what’s next in for you to work on? Oh of course lashes out. But the designers are still kind of looking at that and get more people on it.
Enrique Piqueras: So you have to, there’s a lot of design work being done in this new customer should would look like how navigation will look like inside of it, how spinning up variations will look like. So now I guess I’m focusing more now while those questions are answered on starting to work on better blogs, core blogs designed for this sort of editing context. So like you have a, your post block which is going to render their specific post or list of posts from a loop you find and then inside of it for the layout of these posts, you are going to have a post title of post content and post author, posts categories and post tags, all of these blogs that render fields from the post, and this is just for post, you’re going to have the same for your site.
So you had a site title, site description, all of these things. So right now we have a lot of those. They’re pretty bare posts, they just have like text fields that you can edit. But of course we want to do a lot better than that. So I’m working on things like making the post date blog instead of just showing a date, having a, you can click on it and render their calendar set that they visually and then change the date format in the block toolbar and having it work like that. So making the making better blocks for full site editing.
Birgit Pauli-Haack: Yeah, I get it. Yeah. For a lot of people it’s very interesting to see what the post, the collection of the posts lube really is going to do on a block theme. So I think that is all the time we had. If you have another question. I think that’s the, that now is the time to move to ask it while Enrique stood here if you have but so part of the discussion is also so in the theme experiments GitHub repository on the bottom of the, read me Adele the articles to block-based theme documentation which still has the experimental label on it but it will repeat them a few things that Enrique told us then the full side editing, the label on the GitHub report. So you see what’s in store and what is discussed and how it will be approached.
So that’s for those of you who are very interested in that and want to contribute on the discussion and then also an article about defining content block areas. So all of this is definitely helping you get your head around. Thank you so much Enrique and is wonderful that you did this for us and spent the time and walk us through it. I also so, and that’s pretty much it. I wish you all a great afternoon or evening or wherever you are and see you at the next time tomorrow, Mark, Irene and I, we will record the Gutenberg change log podcast, episode number 13 that will cover a Gutenberg 7.3 along with all its many, I think 160 PR’s are actually in their release.
So we’re not going to talk all about it because nobody listens to a two hour podcast episode. But we will cover a nice, interesting subset of that. And yeah, thank you Marcio. He says all this looks very promising and thanks for sharing it with us. You are more than welcome and I wish you Enrique much good, much like for your awesome work that you did there. And we hope to have you again in the summer for if there’s a release about this things. Thanks so much. You take care. Thank you Eileen. Thank you Rita. Thank you Peter. Well, it’s all great to have you. Thank you all and see you the next time. Bye.
Enrique Piqueras: Cheers.
Birgit Pauli-Haack: Bye.
10 Comments
[…] Live Demo Q&A from The Gutenberg Times. […]
[…] Live Demo Q&A from The Gutenberg Times. […]
[…] Live Demo Q&A from The Gutenberg Times. […]
[…] Stay Demo Q&A from The Gutenberg Times. […]
[…] Live Demo Q&A from The Gutenberg Times. […]
[…] Live Demo Q&A from The Gutenberg Times. […]
[…] Live Demo Q&A from The Gutenberg Times. […]
[…] Live Demo Q&A from The Gutenberg Times. […]
[…] Live Demo Q&A from The Gutenberg Times. […]
[…] Live Demo Q&A from The Gutenberg Times. […]