Wordpress Posted March 6, 2023 Share Posted March 6, 2023 On March 2, release squad members Anne McCarthy and Rich Tabor presented a live product demo of all the delights coming in WordPress 6.2, set to release on March 28, 2023. A first-of-its-kind event in the world of WordPress releases, the showcase was moderated by fellow community member Nathan Wrigley and joined by nearly 90 participants. During the demo, Anne and Rich highlighted some of the new features and enhancements that will continue to revolutionize the way you interact with WordPress. They gave a quick tour of the Site Editor’s refreshed interface, which lets you browse and preview templates before editing. They also covered all the new and highly anticipated ways to manage styles, as well as improvements to the Navigation block, new collections of header and footer patterns, the new distraction-free mode for focusing on writing, and plenty more. It was a jam-packed hour that sparked plenty of excitement—and a lively question and answer session that wrapped up the event on a high note. Any questions the presenters couldn’t get to will be collected and answered in a follow-up post on Make.Wordpress.org/Core and subsequently linked to this post. Watch the recording of the live demo in case you missed it, or want to relive the moment (and the funky fresh demo site designed by Rich). You can find a full transcript of the live demo below. Referenced Resources Live demo announcement 6.2 release roadmap Wrapping Phase 2 of the Gutenberg project 6.2 release enters Beta 1 Beta 4 and the latest call for testing Fixed/sticky positioning GitHub issue Learn WordPress FSE theme developers on Twitch: daisyonwp and ryanwelchercodes Intrinsic design, theming, and rethinking how to design with WordPress Anne McCarthy on GitHub Learn WP workshop: How to create a website on mobile Props to @cbringmann and @laurlittle for co-authoring and editing this post, @evarlese, @courtneypk, and @mysweetcate for captioning, and @robinwpdeveloper for uploading the recording files to wordpress.tv. Transcript Nathan Wrigley 0:22 How are we doing? Should we go for it? Anne McCarthy 0:24 I think we can start. Nathan Wrigley 0:26 Why not? The recording has started. So let's get, let's get cracking. Hello, welcome everybody to the WP 6.2 Live Demo outline. I'm Nathan Wrigley. I do a few things around the WordPress community, mainly to do with video and podcasting and things like that. But it's not about me. Today, we've got two fabulous guests. We've got Anne McCarthy and Rich Tabor, and they're going to do a full on Product Demo. It's a little bit unlike things that you may have seen, because in the more recent past, lots of new features have been added. And so Rich, and Anne are going to spend the time on the screen in a moment, and they're going to show you all of the bits and pieces that you may find dropping into a WordPress install near you. Let's hope. There's been a lot that's been happening, so there really will be probably 20 or 30 minutes of live demos, so look forward to that. I've got to get them to introduce themselves in a couple of moments. Just before that, though, a little bit of housekeeping. This is going to be recorded, so if you have to drop out halfway through and go elsewhere, completely fine. It's going to be posted at the Make/Core website, but it will also come fully complete with a transcript as well. So, if that's something that you're looking for, that will all be there. Also to say that if you want to post any questions, we'd love that. In fact, there's a whole portion at the end when Rich and Anne have finished speaking, where we're going to field questions toward them. Now there's really two places to do that. If you're live with us on Zoom, then if you hit the Q&A button at the bottom of the screen and post your questions in there, I guess specifity... specific... Whatever that word is, be specific. Help us out. Tell us exactly what you want to know and we'll get the questions to them. The other way to do that is to go into Slack. And there is a channel in there, #walkthrough. And if you want to post any questions in there as well, that would be great. So yeah, just to recap, Q&A button if you're in Zoom, and use the Slack #walkthrough channel, if you are in the Making WordPress Slack. Okay, right. I think we'll take you guys one at a time if that's alright. First off a little bit of an introduction from both of you. Let's begin with with Anne McCarthy, shall we? Hello, Anne! Anne McCarthy 2:42 Hello, hello. It's so good to be back on literally any sort of live stream with you. I appreciate that you're a part of this Nathan Wrigley 2:48 Yeah, that's really nice. Anne McCarthy 2:49 Well, I'm Anne McCarthy. I'm a product wrangler at Automattic. I live in Seattle. I also run the FSE Outreach Program, which is basically dedicated to testing all the latest and greatest of WordPress, which is part of why I'm so excited to be part of this demo, is because so much neat stuff has come through this that I've had the privilege of going through a little bit early on with the ever growing calls for testing. So that's a little bit about me, I'll pop it over to Rich. Nathan Wrigley 3:17 Yeah. So Rich, if you want to take the baton there. Rich Tabor 3:21 Yeah. Hey, everyone. I'm Rich Tabor. I'm a product manager at Automattic. And I work on WordPress and Gutenberg, in particular. From a little bit south of Atlanta, Georgia, in the US, and been building and tinkering with WordPress for I think, close to 11 years now. So it's, it's been a good run, and I'm super stoked about where things are heading. Nathan Wrigley 3:43 Yeah, and things definitely have been moving in a very much a forward direction, WordPress, 6.1. And WordPress 6.2. There's so much clear blue sky between the two of them. I think probably the best thing at this point is if we can have it, I don't know what whose screen is coming on. I think it might be Rich's, or maybe it's Anne's, I don't know. Rich Tabor 4:00 Yeah. Nathan Wrigley 4:01 If we can get that screen shared, then I will slide my way out of this call and say, Rich and Anne, it's... it's over to you. I'll be back soon as you're finished for any Q&As. Anne McCarthy 4:14 Awesome. Thank you. Rich Tabor 4:17 Alright, everybody can see my screen right now? Anne McCarthy 4:19 Yes. Rich did an excellent job designing this. I do want to call this out that I love, absolutely love this. Rich Tabor 4:26 Thanks, Anne. Yeah, this is actually running Twenty Twenty-Three. So it's kind of showcasing some of the things you can do just with the core theme. And some of the design tooling that we are, that has been built into 6.2. So this view here is the site editor. So I'm going to orient you here. There's one big change here in particular, I want to call out visually, is this idea of the frame here on the right, and this will pull up the local template. So I'm looking at my homepage of the site right now. If I navigate into other templates, I can pull those up here on the right as well. And then you can also navigate template parts. So this part's not very new to 6.2. But the idea of zooming in on different template parts and templates and having them appear here in the frame is. And that's important because of this concept of browse mode. And this is where you could dive into an actual page from the site editor. So here, I just pulled up the about page of the site, and I can click into it and actually start making changes. Now, the changes here within the post content block are going to be relative to this about page. But I can also modify the template which then changes the about, or changes the page on any instance of this particular template. So it's a new concept and how we can browse the site. But it's a very powerful, and really the first iteration of that way of managing a site. Anne McCarthy 5:50 And also lightly introduced content editing in the site editor, as you mentioned. So it's a kind of a neat merging of the two worlds, which I know folks have long been wanting to see that unified. And same with the frame, it kind of adds a nice layer where instead of just being dropped in, like before, you kind of are given a more zoomed out view, which I think helps address a lot of the feedback that we saw around the orientation when you're entering the site editor. Rich Tabor 6:12 Yeah, exactly. And really, if we think a little bit further out than 6.2, this could also house setting to use. So we do have, you know, one view here that that is relative to 6.1, where you can see all of your different templates. But imagine if we had any other different types of settings and controls and different pages loaded within here, doesn't have to be just the front end templates and renders of your site. Alright, so we're gonna dive into this here. So you can go into it just by clicking on the frame. I'll do that one more time just to show, you just click on it. And now you entered right into it. You can edit it right off, so we can make changes, just as if we zoomed into it in the other way in 6.1. And then we have a bunch of styling tools that have been added to 6.2, so I want to kind of hone in on these. Like, this panel itself is not new. We have style variations, you can zoom in here, we've got this new zoomed out view, where you can apply different ones at a time. And then we also have this icon here, which triggers the style book. Now the style book is a very interesting tool here that really lets you customize the theme's style guide, essentially. So I can go through each of these tabs, which are relative to the block categories, and see all of the blocks loaded on this particular site. So right here, I've got like Button blocks and Columns block and whatnot. So if I click on one of these, it'll pull up the Style panel of that particular block. And then when I make changes over here, these are applied globally throughout my entire site. So if I want to change the way this button looks, let's say we do some smaller tags, maybe we'll add a little bit of letter spacing, and maybe make it capitalized. See, it's getting applied everywhere that the button is used. Also do some changes here to padding, perhaps. We'll do something custom here. I think that looks nice. And now... Anne McCarthy 8:13 Real quick while you're doing this, I wanted to note that like this is something that folks have really struggled with previously with the site editor, where if you're editing a block that isn't in the template already, you're not able to see this. So as Rich is showing, you can actually look at any block that's being used in your theme and see how the change that you're making in styles will impact that. Where before, if the block wasn't present in that template that you were editing, it was hard to know exactly what was happening. And so now you have both the style book and this inline preview that you see in the Style section to rely upon, which is pretty neat. Rich Tabor 8:43 Yeah, exactly. And really, you could theoretically go in and design your entire theme with the style book. Now, I know there's some advantage to design in context of pages and whatnot. And I'll go into that in a bit. But the idea is that you really can quickly browse through all of the different blocks and tighten up what you want to within these controls. And it's not limited to the standard variation as well. There's also these style variations of each block that you can now manipulate as well. So we're gonna go in, say, we'll change the radius of this one. So we want it to be sharp like our other button. But we have these new controls. Like, this is a shadow control we've added in 6.2, where you can apply, say, like this shadow here might be nice. This one here, and so some fallback shadows, within core that a theme can provide as well, its own values. But this now will apply for every single variation of the outline on my site here. Anne McCarthy 9:39 And you'll notice that it's not in the style book right now. And that's just part of the future feature development is showing the variations of blocks as well. Rich Tabor 9:47 Exactly, yes, I would imagine that this would this would show up the variations of the button block, yeah. Which is a nice way to really customize these, like it used to be only CSS would be used to manipulate these variations here. And now it kind of abstracts that away and you can do it within the editing experience. That's really nice. It really is. There's also this idea of block CSS, so you can add custom CSS that is scoped to a particular block. So if I add CSS here, it'll be applied for the button block wherever it's used. Now, I wouldn't recommend using additional CSS in most cases. I would, I would suggest using all the different controls that we've built, that are built into 6.2. But the idea of using CSS to add a little pizzazz to this particular button block is fine. But just with that caveat that you wouldn't want to use it exclusively. Like I wouldn't apply a background color via CSS, I would rather use the background elements color here. There's also additional CSS, which emulates what was previously in the customizer. So we do have site wide CSS that can be applied within the site editor and also on the front end of your site. Again, I wouldn't emphasize using this exclusively, as there are a lot of new design tools that I would explore first, from the top level styles here where you can apply colors to the background, text and buttons. But if there was anything extra you wanted to add, you could do so within the stylesheet here. Anne McCarthy 11:21 And I'll note we'd love to hear feedback if there are certain things that you're repeatedly adding custom CSS for. So either commenting on a currently open issue, or if you don't find one, opening an issue would be super helpful, because it's neat to see what folks are using for CSS so we can fill those gaps. Rich Tabor 11:36 Yeah, exactly. So that's the global Style panel here. But there are some quite a few other improvements along with styling. So the first is the idea of pushing styles globally. So if I'm in here, and I'm designing, let's say I want to add a radius, I want to do some different typography as to appearance like this, like bold, italic look. And then we'll also... Anne McCarthy 12:07 That's cool. Rich Tabor 12:07 Thanks. Also, let me make the letter spacing, maybe we'll make it a little bit bigger, actually, and then, I think that'll work. Do these changes here and see I've just styled this one particular block this button up here. And this button down here is still using the global styles that we designed earlier. But now I can go through my settings panel here and hit Apply globally. And I'm going to here so we can see that happen. The styles are now pushed globally to all the other blocks. So this is really helpful for when you're designing in flow. And you don't necessarily want to abstract out into the style book and you want to push your changes that you just did here, because you like the way the button looks and want those applied everywhere, all at once. I think this is really powerful way to to quickly design within the editor. Another tool that is quite useful, I'm going to take this heading here and manipulate this. It's the idea of copying and pasting styling. So we're going to use that same bold italic look, maybe we'll make that a little smaller, we can even manipulate this size to be a little bigger. Now we go here to copy styles. And then I can come all the way down here to this other heading that's very similar, and paste it in. And there we have that style applied just to these two headers. And you would do this when you don't necessarily want every single heading to have this effect. But perhaps there are like elements on this page that you want to push those changes to, specifically. So copying and pasting allows you to be very granular, whereas applying styling globally, lets you be more of a holistic design experience for pushing styles. Another neat... Anne McCarthy 13:57 Oh, real quick, I just wanted to know like I think one of the things that's interesting is, as we've added more design options to blocks like this is part of the experience of scaling things and making it easier to use. So when we think about like intuitive and delightful. Some of these tools coming into 6.2 really take you know, the tons of design tools that we've added over the last couple releases and makes it easy so you can actually tweak things and then reuse. So I think that's one of the things I want to call out is it's kind of this crescendo. Where now the tools that are coming to 6.2 to really ease the experience and allow you to do a lot of neat stuff where rather than having to re-tweak everything through every single heading block. A lot of stuff is used. So... Rich Tabor 14:34 Yeah, exactly. WordPress is moving towards a design tool and less of like, what you see is what you can only have. It's more of an expression of creativity and it really does open up the doors for for designing beautiful pages on the web. I think it's really powerful. Another cool bit that we've added is the idea of sticky positioning. So headers would be nice sometimes if they stick to the top, so for top level group blocks, this is a group block here, there's this new position attribute where you can assign it to sticky. And as you can see, right in the editor, it's already showing me that this is sticky on the front end. And also here as well. It's only available for top level blocks for now, there's still some some odd stuff to figure out on how we communicate when something is not going to stick due to the the parent height of the elements around it. But for top level, it's still fine. So we have it here. But there are some iterations that are already happening for the next release that will kind of bring this into more, bring some more capabilities to this particular feature. Anne McCarthy 15:44 Yeah, and I'm very excited because one of the things I wanted to briefly call out was the how the header, the template part has that purple. So another neat thing coming to this release, that was a big part of feedback for the outreach program was having to look parts and reusable blocks having a different coloring, because there are different kinds of blocks are synced across the site, when you make little changes and impacts everything everywhere. So that's another neat thing that's coming with this release, is that you can kind of see those a bit differently in the List view as well as when you're in the editor. I see Nathan has his hand raised. Is that intentional? Oh, it's removed. Okay. Nathan Wrigley 16:23 It was not intentional. That's my mistake. I'm sorry. Rich Tabor 16:28 Yeah, it helps you see quickly too like, what is the template part, particularly for headers and footers, it makes it easier to browse quickly. So speaking of template parts, and patterns in particular, so headers and footers, are new patterns added within WordPress 6.2. And now that they're loaded, actually from the pattern directory, which is kind of neat. And I'm going to show you how to replace a footer with one of those other patterns. So if you have your footer template parts selected, you can go to replace footer. Now this flow is not new to 6.2, but it's going to call out these other improvements. And then you just click one there, and you have it loaded here, that's the site logo that I'm using up here as well. And you can modify this text without having to do any any funky PHP filters or moving actual templates. And if you want to change it again, you go back to replace say, let's pick this other one, let's try this one. It's kind of nice. And there's this focus view, or you can zoom in to just the footer itself. You can even check the responsiveness of it and see how it, how it reacts on mobile, and make any of your changes here and have those persist over to the actual template whenever you close it out. It's a nice way to really kind of clean up the editing experience. So you're not seeing this entire group of groups and instead kind of focusing on what you're actually wanting to complete. You can do the same for the header as well. Anne McCarthy 18:01 Yeah, and as Rich mentioned, there are some new patterns that are being bundled from the directory, which I think are really extensive. Regardless of what theme you're using, there's going to be some pattern for group patterns that help democratize design where you can use them in anything. Rich Tabor 18:15 Yes, that's right. All right. So navigation. Navigation has gone under a... quite a bit of work in the last a couple of months. And really, this is all about trying to make it easier to manage your site's navigation and also add pages and links and then even styling. So there's this new dedicated list view for the navigation block. So it's essentially emulating a little bit of what's available over here except for you had to kind of get down to it. Now it brings it top of mine and the surface area here. You can drag them around, move them up and down, even add submenu links and remove them as well. And then you can style it like normal. And now apply different styles via the styles tab to the block itself, or even individual page links and whatnot, you can dive into them and manage them all from here, instead of having to only manage them from up here. This really kind of abstracts the complexity from from this particular canvas interface into a more familiar interface here on the sidebar. It's really a great effort. And it's it's taken some time to refine but it's getting there and it's feels a lot nicer. Anne McCarthy 19:30 Yeah, there's been a lot of good feedback about this as well just because it kind of is meant to marry the classic experience with bringing blocks into it. So it is in addition to being edit, editing on canvas, so if you really want to continue to edit as a block you still, you can continue to do that. But it does add a nice interface and the block settings where you're able to do it. And I'll briefly call out here the split settings, which we'll probably talk about later. But you'll see here for more complex blocks, there's some nice split settings making it a little bit easier, more intuitive to go through. Rich Tabor 20:02 Yeah, that's right. And if you take a look at navigation here, this is very similar to this component added here. And, and that's, that's purposeful, we want it to look and feel familiar. Either way you're managing navigation. So you can also add some menu items here, remove them and drag them around and reset them here, as well as browse into the individual pages. So that's what I have for the site editor portion of the demo. And did you have anything else you wanted to add to this, Anne? Anne McCarthy 20:37 Oh, could you resize the Browse mode for me? I just love the resizing. I think it's kind of cool. This is just like a fun, you know, thing to call out. But maybe you won't noticem but you can resize it. So as you're quickly going through your site, if you want to see how it looks in different ways, you can also do that. So that's the final thing I'll shout out. Rich Tabor 20:56 Yeah. So then, yeah, exactly. It's... there's a lot of fine, fine touches like that. Well, we can't obviously can't call them all out today. But it is really getting tightened up overall as an admin experience for the site. Anne McCarthy 21:12 It's such a great foundation in the future, for sure. Rich Tabor 21:15 Exactly, exactly. Alright, so if we press this back button here, it goes right back to the dashboard, I'm gonna go and leave... Anne McCarthy 21:25 That back button was a big piece of feedback people had they would get into the site or not know how to get back out. So I appreciate you calling that out. Rich Tabor 21:32 Yeah, exactly. It's been through a number of iterations. And I think we've settled on something that feels feels nice; it does feel nice. Anne McCarthy 21:41 I agree. Rich Tabor 21:43 So... Anne McCarthy 21:44 Ah yes, the removal of the beta label. Rich Tabor 21:46 You want to talk to this, Anne? Anne McCarthy 21:48 Yeah, I would love to jump in on this actually. So you'll notice that the beta label is removed for this release. And part of why we wanted to show it now is to see how all the features, how the experience has changed, how much more you can do. And all of that has led to the removal of the beta label. And that doesn't mean that feature development is done that it's like, you know, gonna stay this way forever, it just means it's in a place where we invite you all to try to the site editor, it is out of beta. And a lot of development work has gone into testing this. So we've had almost, I think, 20 calls for testing with the outreach program. It's been through multiple major WordPress release cycles, there is still more work to be done. But I'm very excited to see the beta label removed, I think the features that are coming to 6.2. And the foundation that is set with 6.2 really marks a level of maturity. That is pretty exciting. So consider this an invitation to try out modern WordPress, and to check it out. Rich Tabor 22:43 A hundred percent, I couldn't have said it better. Alright, so another neat part that's added recently for 6.2 is this idea of distraction free mode. So it's not turned on by default, but I have it on so we can see the results here. So you can go in and type right here. And then actually, I'm gonna throw in some Lorem here. So you can see it in action. So this feels more like a text editor and less like a Block Editor. Whenever distraction free mode is on even the the multi block selection, it feels really nice. It doesn't there's not this idea of blocks, even it's kind of abstracted from here, there's less noise, there's less distraction. And just think that the idea is that it's just you and your words, it's just writing and publishing. And if you want to publish, you can hover over here, you'll see the toolbar come down, you can hit Publish or draft. And then this is how you would turn it off and back on here. And then you still have control of all the existing tool. And it's just a much simpler, streamlined interface. And you do have access to blocks, you can still add them if you'd like to, but the idea is just being able to write without the distractions is really powerful. And a really nice publishing experience overall. Anne McCarthy 24:08 And this is for everyone. So this is like a lot of stuff we're coming to say it or using a block theme. This is available for anyone who's using the Block Editor. And to be honest, I use this for basically all my writing now. Especially for any post or page, I typically will go into this mode. So I'm very excited about this. And I hope folks feel the same way. Rich Tabor 24:28 Yeah, exactly. I've been using that too for quite a bit. But the thing is, is also not only for post editing, so I have a page here that I've created. And I have distraction free mode turned on, which kind of removes all the extraneous tooling and it really lets me focus in on the actual blocks here so I can manipulate them to an extent. I can even drop in different imagery for these images here and modify the buttons and whatnot and even add more blocks but the idea is it's almost like a simplified editing experience for pages as well, not only for posts. And here, I'll come up here and turn off distraction free mode to see it all in real time. Anne McCarthy 25:13 And this isn't yet available for the site editor, but I have a feeling a number of folks are going to be keen to see that put in there as well. Rich Tabor 25:20 Exactly, yeah, I don't see why it wouldn't work in the site editor as well. I think it'd be very nice. Yeah. So we have some other improvements here that are fun. So this inserter here has gotten a couple of changes here. So blocks looks familiar, it's still the same, but patterns is where we started seeing some changes. Instead of having some featured patterns loaded in a block category selector, we've split them out individually as their categories here, you're gonna load up some of the different header patterns that are loaded in WordPress 6.2. So you can load them here and see them in this tray, and then click to add them to your site. Which is really nice, it's a nice way to kind of go through them quickly and see a bunch of different ones. We also have the media tab up here, which is new, which splits out the images from your Media Library, videos, and audio as well, including the Openverse library. So this is a catalogue of, I believe, over 600 million free, openly licensed stock imagery. And you could search from right here in the inserter. So let's type in birds. And click on one, and it will add an image block with the image already added to it, we have got the caption down here. If you don't want the caption, you just turn it off right here, this little control that was added. And now you can manipulate it right off. So let's say this, drop it into here. Maybe we'll make these about the same size and move it over to something interesting. Anne McCarthy 26:53 And I'll note that there was a GDPR concern around the images being properly uploaded rather than hotlinked. And I wanted to just note that that's been addressed. So the images are uploaded to your Media Library. That's why. So in case anyone has that question. Sorry, continue. Rich Tabor 27:08 Yeah, no, that's a good point. It's very important. A key benefit to have this flow here is that instead of instead of having to add an image block, and then open your Media Library, and then pick an image, and then you have it here, it's really this one flow of searching visually, and searching here, as well. And then having it added as an image block already. So it kind of skipping all the extra steps that you always have to do anyhow, it's really nice. And we have a couple of interface changes. So there's the settings icon up here that used to be a cog, and now it represents the sidebar itself. So when you open it, the sidebar is triggered, if that's closed. And that's changed for a couple of reasons. But one of the bigger reasons is, as I mentioned earlier, this idea of split tabs, so we have the cog for settings. And that's when a block has additional settings that are not per the norm of the styles that are available within WordPress, then you'll have a new settings tab pulled out here. And that's to keep the density nice whenever you're editing and it feels good instead of having everything kind of in your face all at once. Now for other blocks, like the paragraph block, there's not additional settings, so automatically not included. The tabs up top and just be everything top level. But when a third party plugin adds like a different settings panel, or even if you extend one of these core blocks that does not have one, and a detects one should be auto added as well. So it's kind of just like a nice, fluid way to continue improving the experience of editing within WordPress. Anne McCarthy 28:49 Yeah, so plugin authors can also kind of make sure where they want settings and styles to show that it shows up correctly. And there's a dev note about that as well. Rich Tabor 28:58 Yes, that's right, you can you can decide as when you're extending or adding your own inspector controls. That's what these are called here, whether or not they're included within styles or settings as well. Yeah. Then another smaller change that's kind of nice is this idea of pulling the outline from its own toolbar item up here into the list view. It's because they're very relative, you know, a list of all the blocks on your page, also an outline of what's going on. So they're combined now into this one view. We also have time to read word count and character count here, which is nice. And then this is a little guide here that just helps you understand the structure of the importance of the structure of the document and making sure that it is properly structured. All right, was there anything else that we wanted to add you think, Anne? Anne McCarthy 29:51 I'll add one last call out just because I'm trying to think about like little dev tidbits if you want to disable it prefers there is a way to disable Openverse as well I know that's always a concern. We add something it's like, okay, how do we get rid of because I don't want a client getting into it, there is a way to disable that is documented as well. The other thing is the pattern. So there's new categories, the patterns. And so query is now posts, a couple of things were merged, there's no call to action. And there's also some lovely, which I'm gonna brag on Rich, again, some new text based, query patterns. We have a lot of visual patterns for the query loop, and now there's wonderful, more text focused ones, which I think is really exciting. And just another great way where patterns have evolved and patterns is obviously a huge part of the future building with WordPress. So I'm very excited about those and keen to see just more variation with query loop, I think it's really powerful block to make easier to use. So I'm excited to see it. Otherwise, I think that's, I think that covers a lot of what we were trying to go through. Rich Tabor 30:57 Yeah, and there's certainly more. There's a lot of interesting, minute details that are, you know, quality of life improvements around editing and designing. And we can't cover them all today. But it's just, there's a lot of exploratory ideas and cool, interesting pieces that have been the result of lots of feedback and lots of testing, like I mentioned earlier. And, you know, it's really a testament to open source and contributing and really working together as a team to make this thing we call WordPress ours and making it a brilliant publishing experience. So just thank you to everyone who's put in time ideas, effort, code, design, marketing, copy, all of that, and more to making this what it is. It wouldn't be possible without you. Anne McCarthy 31:46 Totally agree. And thank you, Rich, for doing such an excellent job building this site and demoing all this. Nathan Wrigley 31:51 Yeah, indeed. Thank you, Rich. Thank you, Anne. Just to let you know that, in theory, there's possibly up to about 25 minutes left. If anybody wishes to pose a question, we're going to do our best to get the answer directly from Rich and Anne. Whether that means putting the screen back on, I don't really know. But we've got a few that have come in. The place to put those, it would appear that some people have figured out how to do that in Zoom. But if you go to the walkthrough channel, in the making WordPress Slack, you can post some questions in there and all things being equal, we'll get them raised as quickly as we can. So we've got a few. In all honesty, because they've been copied and pasted from various different places, I can't necessarily say who the name of the person is that sent them. But first question I've got over here for either of you. It says when you save globally, under the Advanced tab, does this change the stylesheet? Interesting. Rich Tabor 32:54 So this will change the attributes of the blocks. So if I throw in that example, there, I pushed the attributes of that one block globally. So they're applied to every block. So it does affect some styles, but not writing any style sheet or writing to the core style sheets. Nathan Wrigley 33:11 Can I ask the question? It's not something that's been submitted by anybody else, but it just occurred to me that as you were clicking the global button, I just wondered if there was a "get out" from there. In other words, if you inadvertently click the global button, is there an undo option in there? In other words, can you back away from all of the buttons suddenly changing or all of the H1s? Anne McCarthy 33:32 You do have to hit save after. You can't just hit Apply globally. You have to hit save, and that's where the multi-entity saving pops up. The multi-entity saving is kind of strange in that it's not good at discarding changes. So you basically would just have to like leave. Like it would be like, Whoops, I hit that. You probably also have to hit the undo. Like there's - those are the two kind of options. So, yeah. Rich Tabor 33:54 Yeah. The undo is like a global thing. It works there as well. Yes. Anne McCarthy 33:58 And there's a reason that feature is hidden, like under Advanced and collapsed. That's not necessarily for everyone. But for folks who do like to tinker, it is available. Rich Tabor 34:08 Right. And it's also only available in the site editor as well. So it's the more the global view of editing your site is where you can access that. Nathan Wrigley 34:17 Perfect. Okay, so I have a question from Zoom. Is copying and pasting styles as demonstrated just for core blocks? They go on to say more, which I'll read out. Some blocks collect, some block collections have their own C&P, and I'm curious what might carry over, if anything? And then there's a follow up. Also, if CSS classes are assigned to a block, will applying global styles to a block be to all of the same block, i.e. H2? Or, hopefully, will a custom class allow for a more granular global CSS? There's a lot in that question, but if we start with the: is copying and pasting styles demonstrated just for core blocks? Rich Tabor 34:56 So it works for blocks that have leveraged the block support system within core. So if you have opted your block into using background color, and text color, link color, any of the layout settings, anything that was in the styles tab, then all of those would get pushed to or get copied or pasted or even pushed to the global application of styles as well. Now, if there's, if a block has done its own sort of background color attributes, I don't know that those would persist as well. But if you use what's available in core, it's really one or two lines of JSON will get you the background color support that you need. Nathan Wrigley 35:35 Anything to add to that, Anne? Anne McCarthy 35:37 No, just another reason to rely on what core is building. So it's a another great example of how these features will work together and how adoption helps whenever these new things come out. Nathan Wrigley 35:49 Okay, so we'll go on to the next question then. So this is from Zoom, and apologies, I don't know your name. Can we have this as a feature request? Can we have sticky sidebar block for some groups next release, please? Anne McCarthy 36:05 Probably would do a separate block, I'm guessing. Yeah, do you have anything to add to that? Rich Tabor 36:11 Yeah, I would say we wouldn't need a sticky sidebar block. Right now that group lock in top level-only does support position sticky. And the only reason it was turned off like we did have it on for one of the Gutenberg releases for everything - for every group block - but it was turned off just because there was too much confusion around if you had a sticky element that wasn't didn't have enough space to stick for and enough height to stick. So it wouldn't actually be sticking. You wouldn't see a result of you applying a sticky position to it. So I think we can figure that out with some some UX to really clean that experience up so that you do expect and understand what's going on. When you apply that to a block. That's not the root level of the document. So it'll be there. It just takes a little bit more iteration. Nathan Wrigley 37:00 Okay, another question. This time from Slack. When there are changes made in the site editor, are the templates still marked with the blue dots to indicate that the changes are in the database? Rich Tabor 37:14 Yes, from that Manage Templates view that I shared in the canvas, it will show up just like it did previously, when there are changes to one of the templates provided by the theme. Anne McCarthy 37:25 You can revert the changes, as well, as you're used to doing. Nathan Wrigley 37:30 Okay, thank you. Anne's shared a link related to the question that we just posted. I don't know how Zoom works well enough to whether or not we can share the screen. Anne McCarthy 37:40 I can briefly share my screen. Nathan Wrigley 37:42 Yeah, that'd be great. Show us the GitHub. Anne McCarthy 37:43 Let me try that. I just wanted to mention this in case people want to follow along in the follow up tasks related to this. I love to look at links. I'm a nerd like that. So in case anyone else is, this is a lot of the follow up tasks and a great issue to chime in on or just follow if you're interested in this because there are some improvements to be made. But this is a neat report for now. So it's - oh, I just copied and pasted. So it's issue number 47043 in the GitHub repo. Nathan Wrigley 38:11 So 47043 related to the question that we just had. Okay, so another one from Zoom. This is Robin, who asked the question, can you show? It's just moved on my screen. There we go. Can you show us how to trigger the focus mode to view, say, for example, the footer on its own? So I guess we're back on the screen again. Rich Tabor 38:34 Sure. Everyone can see? Yep. So when you have a template part selected, you just hit the Edit button here and then it's focused into that as well. And then you have, again, the responsive controls here. All the existing controls, it's just localized to this template part. Nathan Wrigley 38:54 Hopefully that answers your question. Thank you, Robin. Just for anybody who's kind of lurking who has a question but hasn't yet posted it, please do. What are the chances that you're going to get Rich and Anne on the on the phone in the next few weeks? Pretty minimal, I'd say, so make use of them while they're here. Ellen has done just that. She's in Slack. Ellen says, is there a plan to allow no title templates in the block editor as they are still included even in header and footer-only templates? Rich Tabor 39:28 No title templates. Like templates without a title? I'm not quite. Anne McCarthy 39:35 You can just remove that block. Rich Tabor 39:36 Yeah, you can you can remove the post title block from a template. I'm not quite sure if that's if that's what the question is asking. Nathan Wrigley 39:46 Ellen, if you're still in Slack and watching this, if you heard Rich and Anne queerying that, then if you can give some more clarity, we'll endeavor to get that answered. Anne McCarthy 39:57 Knowing Ellen she knows exactly how to remove things. So I'm like, I'm curious. I'm definitely - we're misinterpreting something because she's very - Not showing the title in the editor...? Nathan Wrigley 40:07 Yeah. Not showing the title in the editor. She says she's here. Anne McCarthy 40:12 I'm like, "Say more." Nathan Wrigley 40:14 Yeah. Give us more. Give us more Ellen, and we'll get right back to you. Anne McCarthy 40:17 Let's follow back up on that, because Ellen always has some good questions and good feedback. Nathan Wrigley 40:21 All right. We'll do just that. Again, another question from Zoom. This is posed by some anonymous person. Will the list views icon get the same treatment as settings? Rich Tabor 40:33 I don't think it's in the plans. I don't think there are plans to change that. But list view icon, it's always the list view. So when you toggle it on and off, it's relative to what it is. Whereas on the other side, the settings can be block settings, page settings, template settings. Global styles is in that same area. So it's a little bit more context for the list view to stay a list view item. Anne McCarthy 40:58 And I know that the question came up because the settings icon looks like there's that sidebar. And so there are who people have been asking like, will the same thing happened over here? Just for context. That was part of a discussion in a different GitHub issue. Nathan Wrigley 41:12 Okay, thank you very much. I appreciate very much those people who are posing questions. That's really great. Again, just to prod you once more, feel free to add your own questions in no matter how big or small they are. We're here to help. So now we have a question on Zoom from Abdullah. And he coincides beautifully with a question I've written down. Any good resources to learn FSE theme-based development? Can either of you point to a particularly good resource that you know of? Anne McCarthy 41:41 Yeah, Learn WordPress. There's tons of stuff on Learn WordPress that I would recommend. I also, Daisy Olson, who's Developer Relations at Automattic, has a Twitch stream going and some YouTube videos around block theme development. But I would recommend going to Learn WordPress. There's also some contributor-led initiatives. Carolina, who's one of the theme folks has, I think, it's fullsiteediting.com. And that was kind of like the original, go-to resource. And she's done an incredible job working on that and keeping it up to date. So yeah, there's tons of tons of resources. I will spare you from from sharing more, I don't know, Rich, you have more hands-on experience there. What's the most helpful for you? Rich Tabor 42:22 Yeah, there's some really great tutorials and guides on Learn that are relatively new, that are really helpful. And I see that the team there has been really cranking it out on the last year or two, like really putting a lot of effort into this. So I would, I would start there. Nathan Wrigley 42:38 So if you're not familiar with that, I guess it would be apropos to say go to your browser of choice and type in learn.wordpress.org and go and explore. Basically, there's a ton of materials that are getting updated on what feels like a daily basis at the moment. So, once more, learn.wordpress.org. Go and check that out. But also, Anne in the chat that we've got going on here has linked to Daisy Olsen's Twitch channel, which - I'm just going to read it out but hopefully I'll make it into the transcript. twitch.tv/DaisyonWP. And it's all one word. D-A-I-S-Y-O-N-W-P. Daisy on WP. So there's two great places to go. But the learn.wordpress.org is perfect. Anne McCarthy 43:24 I have to add one more thing, which is if you're not fully ready for block themes, one of the big things that I feel like needs to be emphasized more is you can gradually adopt. So all these features are being done. But maybe you want to only give access to a client to edit the header. You can do that. Maybe you want to leverage theme.json in your classic theme, you can do that. If you want to expose the template editor. But use the rest of your themes across them, you can do that. So I want to also encourage folks to look into resources around gradual adoption, because it makes sense that this stuff isn't - From day one, there has been a focus on that. Adopt what you what you want, when you want and it's going to make sense to different people at different times. Matías once said that to me, and I think it rings really true. And so now that we're at this level of maturity, I think we're looking again and revisiting again, like okay, what can I use? What do I want to use? I think it's really important to mention. So if you're not ready to go all in, I encourage you not to just wipe it all away, but to think about how you can gradually adopt and also what would help you gradually adopt. So there is actually a label on GitHub started a couple months ago around - It's called blocks adoption. So if there's something that you see that you're trying to adopt the site editor, and it's preventing you from doing so, like we want to know about that. And you're welcome - I'm going to just put this out here - @annezazu is my GitHub username, feel free to just like @ annezazu, ". This is blocking me from using the site editor." We want to know these things. Open issues. Please share, because that is also part of the phase of this work is making sure people can adopt as they can and that the tools are robust. There's a ton of resources as well. There's a page in the Theme Handbook around gradually adopting to block themes. So I just wanted to call that out. Nathan Wrigley 45:06 And just one more time, what was that? Give us, the give us the username. Anne McCarthy 45:11 A-N-N-E-Z-A-Z-U. So like Zazu from The Lion King. It's an inside joke from middle school. Nathan Wrigley 45:19 Okay, possibly the shortest question. This is from Sandy, I should say, Can Lotties be added to 6.2? Rich Tabor 45:28 I would say that I did a quick search a few minutes ago and there are various blocks built by the community, which do allow you to add or embed LottieFiles to your site. I haven't tested any myself but feel free to dig into those. And if they're open source, they can contribute ideas or feedback on on those GitHub repos. Nathan Wrigley 45:49 Thank you very much. And Eagle has posted a question. When there are changes made in the site editor, are the templates still marked up - Did we have that one? We have, right? We've done that. Anne McCarthy 46:01 We answered that one. Yeah. Nathan Wrigley 46:02 I think we did. Okay, moving on directly then to Ian, what is - oh! Okay, what is the philosophy for mobile in the editor? Are there any plans to have a mobile view? Anne McCarthy 46:16 That's part of the dragging and resizing. And there's a lot of work being done around intrinsic design. And you can see on the developer.wordpress.org? What is the blog? I think it's /news. Do you hear audio? Nathan Wrigley 46:35 I hear only your audio. I don't hear anything I don't wish. Anne McCarthy 46:36 Okay, sorry. Something just started playing in the background out of nowhere and that just scared me. It's like all of a sudden, I was like, woah! Where was I? Nathan Wrigley 46:50 So we were talking about mobile views? Anne McCarthy 46:53 Yes, intrinsic design. There is a developer blog that if you're not following that, you definitely should, that addresses this around, basically showing that the mobile view points have exploded over time. It's now really not sustainable to try and have CSS and all this sort of stuff, mobile queries allowing for each view. So instead, how can we think about intrinsic design? And so that's like the best answer I can give. And for now, there is this nice resizing that you can do to kind of see how things scale. 6.1 introduced fluid typography, which was really exciting and part of this larger, intrinsic design set up. And I think we'll expect to see more of that over time. Sorry, for the brief mental break. Nathan Wrigley 47:36 Just a quick reminder, we probably got 5, 6, 7 minutes or something like that before we start to wrap things up. So if you've got any questions, please, please do post them in here. We have one from Paul who asks, is there any more work planned for pattern management in the future? And then WP Engine has released a plugin allowing easier management of patterns recently, I believe that was yesterday, it would be good to know if we should wait for core or assume that nothing else is coming soon. Rich Tabor 48:07 Yeah, I would say that pattern management is an important part of this new WordPress experience and having a way to create and manage local patterns, but also maybe push them to the pattern directory. And then on top of that, having a functionality built in where - it's kind of like a component based system where you have patterns where the design is the same across patterns, but content can change. All of that kind of falls into the same category of work. And that is something I believe WordPress will eventually do as well. Nathan Wrigley 48:41 Okay, we've got no more questions on the screen. So I'm going to ask a question, if that's all right. You were demonstrating the distraction-free mode there where you could move things up, move things down, and resize pictures and images and so on. I was just wondering what the constraints on that are. So in the case of images, I could see that you could resize things. And with the text, I could see that you could, you know, highlight things and start typing wherever you wish. But I just wondered how the decisions had been made to set those parameters and those only. So yeah, around that, what's available in distraction-free mode? What limitations are there? Rich Tabor 49:17 I would say, generally, it's what's available is what happens when you click on a block. The tooling is there available on the canvas before so resizing was available on the image but not the toolbar. So the resizing is still available when you're in distraction-free, but maybe not adding the caption piece or you know, those other toolings. It's almost like the content locking or content only locking API. It's very similar to that in a sense, but a little bit more tightened up. Where just text and dropping in images - you can't necessarily open the Media Library from there unless you dive out of it. But you can drop another image onto that existing image to replace it. Some things like that. Nathan Wrigley 49:59 It looks like a really excellent interface for people who just, well, want to concentrate on their writing. It sounds like Anne's all in on it. Anne McCarthy 50:05 I use it every single day. It's amazing. Nathan Wrigley 50:09 It almost felt like a Google doc minus all the bits and pieces at the top. Yeah, really, really nice. Okay, so we have some more questions. Weston is asking, what about optimizing the experience of editing using a mobile device on the web? So I guess that's a little bit maybe the question that we had earlier. How can... we how can we do things on a actual mobile device? Anne McCarthy 50:30 That's a great question. There are mobile apps. So there is the mobile team and using the mobile apps. I personally don't use mobile apps and sometimes will edit things from Safari on my iPhone SE 2. I actually was talking to someone - their username is Nomad Skateboarding. And from what I understand, he only builds client sites from his phone. And so one of the things I said to him, I was like, "Give us your feedback. That's really cool. It's really unique. That's fantastic. Like, what pain points you're running into, what can we improve?" Because there is obviously like, we are in a mobile first world. My phone is sitting right next to me. I would love to hear particular pain points folks have when trying to edit in that way. You can obviously use the apps. There are some quirks with the site editor, and that I know is partially being looked into and resolved. But yeah, I think there are probably - what we're building now should always translate back and there are teams trying to sync back and forth. And there was a recent post from the mobile team talking about what's the future of mobile editing. And so I would recommend - it's somewhere on Make/Core. I recommend digging that up and getting involved and honestly sharing your feedback. Because I don't think that is an experience that we talked about enough personally. It's a great question. Nathan Wrigley 51:40 Rich, anything or should we move on? Rich Tabor 51:42 I think that was great. Nathan Wrigley 51:44 Okay, perfect. Um, um, um. Okay, we have an anonymous question. It says as page speed is a big challenge, how are we optimizing the blocks for better LCP score? Anne McCarthy 52:00 There are, some interesting - sorry, Rich, I don't know if you wanted to jump in. I was going to start link dropping. Rich Tabor 52:05 Yeah, you go ahead. Yeah. Anne McCarthy 52:07 Yeah, there's some interesting work from André. Part of it involves actually adding tracking and making sure there's really good front end metrics. So there's kind of a twofer going on. In one fell swoop, we're focusing on better tracking and improving the tracking that we have for performance, particularly the front end. And then at the same time, also work is being done to optimize like style sheets. There's been some really neat stuff in previous releases that I bet I can pull up if you'll give me one moment. Nathan Wrigley 52:36 Yeah, whilst you try to find that, Anne, I think it's probably important to say that, if there are any questions which you wish to have answered which don't somehow get answered in the next few moments, then there will be posts created around this piece. So anything that goes missing, any question that is unanswered, there will be endeavours to get them answered. Right? Okay, show us what you got, Anne. Anne McCarthy 53:00 Yeah. So this was a post I did for 5.9, in conjunction with a whole ton of folks who contributed and actually did this work, I just was kind of gathering it up. But you'll see sections here around block style sheets and CSS loading. And honestly, a lot of the work with the styles engine, which is part of the global styles project, can help give a lot of opportunity to actually improve this, I recommend checking out this post to see some of what's already been done. And then in the future, one of the discussions that we had recently with some folks across the community from Google, from Automattic, 10up, all over the place, including our lovely performance lead, Felix. We talked about some of this stuff and about how to talk about particularly themes and also just blocks in general. And thinking about some performance improvements and developer education and automated testing and all sorts of stuff. So I won't go too far into this. But I think a lot of work can be done. And some of it is being done around measuring more front end metrics and very recently, LCP was added and started to be tracked here, which I think is pretty exciting. Nathan Wrigley 54:05 I think following the performance team and Felix Arntz, in particular, would possibly get you quite a long way towards your answers there. Okay, a couple more. Firstly, there's a few people helping out in the Slack channel. So, appreciate that. We've got Matías answering questions, and so on. So that's really amazing. Thank you. Another anonymous question, any plans to support CSS Grid? Rich Tabor 54:33 I think it's something worth exploring. Probably not the major priority coming up. But definitely some interesting aspects that we've seen other... other building applications do that we can learn from for sure. Nathan Wrigley 54:47 Okay, we're very short on time now. I think we've got to round it off at the top of the hour. So we've got about four minutes left. I've got to wrap it up a little bit. So try to get these last two done if we can. This is from Mary. What are the typography options as of 6.2? we have Google fonts and self-hosted. Any plans for solutions like Adobe Type and Monotype? Anne McCarthy 55:11 There's a Fonts API that got booted from 6.2 and is hopefully planned for 6.3. So I would just follow that effort. So right now, 6.2 is not introducing anything new or different there. Things are as they were. There's a private API that folks can can use with anything JSON. That's as concise as I can be. Nathan Wrigley 55:31 No, that's perfect. I think we're three minutes to go. That's probably the best time to wrap up the Q&A. Apologies if you had a question and it didn't get answered. As I said, there will be a whole load of things created off the back of this. We will make sure that there's a transcript available and - just read something in the comment. Hopefully, any questions that have been asked but unanswered will be answered approaching that. Just very, very quickly, I have to say thank you to Anne and Rich in particular, for taking the time out of their busy schedules and demoing what 6.2 can do. It really looks like a transformational release. But also, thanks to Chloé and Jonathan and Lauren and Mary who are on the call, but, you know, you haven't necessarily seen them right now. So, appreciate them. That's really great. Following up off this, I've got three points to mention. Following the 6.2 release on Make/Core for development updates and calls, there's going to be a post. It's make.wordpress.org/core/6-2. Also, if you've been keeping a close eye on the Beta releases - I say beta, I know it's hysterical. The beta releases, we've got version beta four has just been released. And anybody who wants to test that out would be most welcome. The URL for that is far too long for me to say out loud, but you can Google it, I'm sure, and find out how to test for that. And also, if you are keen to follow WordPress, it's all over the social networks. And you can follow - basically, if you try to just follow @WordPress, then you'll get somewhere. So for example, on Twitter, it's WordPress - @WordPress. On LinkedIn, it's /company/WordPress. Instagram is @WordPress. And guess what? On Facebook, it's - what do you think it would be? It's @WordPress. So it's available all over there. And I think that's it. I think that's everything that we've got to say. We're about one minute away from closing. So particular thanks to Rich and Anne, but thanks to everybody in the background making all of this happen. Thanks for showing up. If people don't show up, the work never gets done and the project never moves forward. So fully appreciate anybody who's given up their time to ask questions today and watch this presentation. Anne McCarthy 57:51 And thank you, Nathan. I want to call you out as being an excellent moderator and creating a safe space for us. Nathan Wrigley 57:57 Very, very welcome. I enjoyed doing it. I would gladly do it again. All right. I don't know how to end this call. So I'm just gonna wave. Bye, everyone. View the full article Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.