WordPress 5.9 Preview

uh yeah so wordpress 5.9 um is currently in progress excuse me uh today was in fact supposed to be uh wordpress 5.9 beta 1. um but actually just a few hours ago it got delayed until tomorrow um so starting tomorrow what i would highly recommend everyone do um is get a staging site setup uh for your site uh your host should provide one for you um they're the only way to do this um don't do this on your live site but i would highly recommend doing it on your staging site uh you're gonna wanna go over to your plugins section add new and search for the wordpress date beta tester plugin alex that's auto filling from the last time we did this talk you'll want to install that plugin activate it and you go into tools you can go into beta testing and you'll want to select a beta rc only and starting tomorrow uh wordpress 5.9 beta 1 should be released and you'll be able to test this um once you enable this option you need to go into dashboard and updates um and then you'll see a button to update to the latest wordpress uh let's update these transitions to i'll write it so you might have heard about this uh release it's a big one um it's one we kind of uh talked a little bit about um back when we did the 5.8 release post and the major new feature for this release is full site editing um and it's a kind of like early launch at an mvp of what full site editing is is definitely usable now and you probably use it to build sites but there's a lot more on the roadmap for doing things there are a lot of things that are still in flux right now even even though the beta is tomorrow one of the reasons that the beta was delayed a little bit because things are still needing to come together a bit so it's possible then we'll run into some bugs uh when we're looking at things um but hopefully we won't and we should be fine but if there are some bits of fragility uh that's why uh so first i wanted to talk about two things um before we uh dive into uh the meat event of some small i guess pretty impactful uh features that are coming uh one is the thing that we just mentioned um login.php uh the first is that the laser loading is disabled for the first images on the page uh like we mentioned in the previous talk uh the second thing that i wanted to call out was the new language switcher um so on the wp login page now if you have multiple languages installed uh wordpress will automatically output this language switcher for you uh which will change the language of the login page uh which is a kind of small user experience tweak but one that's uh really really helpful uh for people who need it that's pretty much most of the things that aren't gutenberg or somehow gutenberg in wordpress 5.9 so i'm just going to dive into it first starting with the changes to box um there are some kind of oh there's an autosave um let me restore this auto save yeah because i'm missing a couple things um there are a lot of changes to blocks that revolve around um full site editing features and things like that uh which i'm not gonna be touching on at this moment right now i'm just going to touch on some of the more wider features that you might find helpful if you're just doing any site um that is running gutenberg actually that is usually the block editor um the first is block spacing and block padding support um has uh been really expanded uh quite a bit um so i have over here um i'm selecting the commas let me okay is this uh still readable i just need to give myself a bit more space yes all right um so the columns log here we have a new uh field called dimensions um this uh has support for a lot of different things for padding and margin and what shows by default and what shows at all for blocks is different um but you'll kind of start to see this pattern um a lot more in gutenberg where only some options are shown by default but you'll see this plus menu that you can use to add all the different fields that you want uh so there are a couple of new ones here there's the padding the margin and it's a block spacing which is pretty cool uh one of the things that i've seen people be frustrated with is that they have their columns set up and maybe they want to space things more apart put things more together and there's no real way to do that without writing custom css but now you can use this block spacing control so as i'm adjusting this value it's changing how far apart or how close the different columns are to each other um and i can make that change uh without needing to dive into custom css we also have the padding controls and margin controls so i can add padding to this block this might be particularly helpful if let's say we want to add a background color you're getting some previews here of some full site editing stuff um but if let's say we wanted to add this oh that's the text color uh background color um so this is like it's doing that but maybe i really want to do that but then also have uh some padding around it um and now there's a really way to really easy way to do that before you'd be like fiddling with like root blocks and depending on how the theme works sometimes it added padding and you had background colors but you didn't want that and it's all a crazy mess but now there's just a simple control for it uh so we could say what probably makes this match the most is sending this all the way up to like 50 pixels of padding let's say if we wanted to we can break these apart and we'd say okay let's reduce the padding on the top and bottom and we can change them whichever we want to do if you're really fancy you can do some like cool things with margins um of pushing that whole block down which doesn't really make much of a difference in the first block of the post as i'm finding out but it is a thing there if you want it uh let's uh yeah we can keep that another uh thing that's new is expanded duotone support um so we have an image here that's just a regular image block um and i can hop into the duotone filter as we did before but what's new is that now when i click on this in addition to just being able to select the color that i want to duo tone i can also set an opacity uh down here over like this you see it's becoming um you can see that just in the background there uh how it's adjusting based on the opacity that which is a neat little thing um another cool fact about these duotone controls is they've also been added to the site logo block uh which we'll see it a little bit later um but these have been expanded to just be included in more parts of the gutenberg editor um another example of that uh block spacing is with a buttons block i did a similar thing before with how you wanted to move things about it could be a little bit difficult but now you've got a nice and simple ui control for it for you you'll also see that the layout is completely different i used to have this transform option that would transform it to up and down and you would kind of have these controls here but they weren't super clear um now we have this new layout control that works the same way across all gunemeber blocks that use this kind of layout type i can make my changes here to justify them to the center which isn't going to make much difference here um but i can also change these to uh go up and down once you do that then we can justify them in the center justify them right justify them left um and if i want to and say okay we don't want these to wrap multiple lines um in case there was multiple split out it would just like shrink things as much as possible um but you'll start to see this control on a lot of different places in hudiburg for messing with justifications and things like that as opposed to kind of the more ad-hoc basis that things were working on before uh one of those changes i was talking about of things that isn't at this exact moment uh ready for wordpress 5.9 beta 1 but hopefully will be included is a really cool change to the gallery block um so previously the gallery blocks were kind of really just like the wordpress gallery blocks of old of the classic editor pre-block editor where you insert a gallery and you're kind of you don't have a lot of fun fine grain control excuse me over each individual image uh what this gallery block changes allows for is editing each image in the gallery so we can see here if i go up i can select the gallery and i can add additional things let's say we want to add this image the media gallery which will really throw things off i can do that let's undo that it makes it look really odd um but what i can also do now is each of these are actual images so i can use things like duotones and apply them to each image in the gallery i could say hey this one i want to be rounded this one if i want to go in here i can use like the cropping tools that exist in wordpress let's say maybe we want to like zoom this in for some particular reason in this gallery we can do all that through the gallery block um because it's now just a collection of image blocks you can see this is a beta there are some this is even pre beta this this is an alpha release as we're getting a couple of error messages here but you can kind of see the idea where now each of these images in this gallery are complete and full image blocks which lets us do all the things that we can do with images with images in our gallery and so in this theme which is uh one of the next things we'll be talking about 2022 um it only has a couple of built-in image styles but you can see some other themes that have really crazy image styles and things like that that could allow you to build some really neat looking galleries um those are the main things that i wanted to talk about um with just regular blocks and things uh those head those like spacing controls and things like that have gone into a lot of different places um you can see here we have dimensions showing up again and this is one of those cases where it's decided to hide those by default but if i wanted to i could show the margin controls so if i would say start of section i can set some margin to uh move this down as opposed to previously you need to like insert a spacer block and ah that was no fun uh but these margin controls are really really awesome and again you can set these up if you need to um i think it's one of my favorite favorite features that gutenberg is giving us here is these better layout controls there's also some rearrangements to typography if i'm honest i can't remember exactly when it when each of these showed up has shown up these might be new they might not be i can't remember to be honest uh these letter case controls um and things like that changing the size has obviously always been there but it's been kind of re-jiggered a little bit um appearances of course always been there but things have been tweaked around a bit um oh yeah these are uh things that existed before if you're using a theme.json um before i block by steam it's in like 5.8 you could set these line height values on these letter spacing values i think that's correct but now they're more widely available you'll be seeing them with block based themes do all that kind of cool tweaking and let's get rid of a bunch of that okay so now i'm going to dive into uh the meat and potatoes uh which is full side editing um so you'll see i have currently installed the 2022 theme uh which is pretty neat um you can see this preview over here what this enables on my site is the number of new menus in the appearance menu and also the disappearance of one the customize menu is gone instead the way that we want to customize our site is by using the full site editor and we can access that editor by clicking the editor button under themes um there's also this theme editor button or theme editor link which may be moving uh over the course of the beta because it's a little bit confusing having both of these here at the same time so closely named but the new feature you want to look into is the editor feature okay uh so this is now my site but in the full site editor and i can now edit uh my whole site here so if we check out the front page you can see this is a pretty close representation like i said there are still some bugs looking around things like that uh see this white blank line on the top here um but yeah this is my site um and what's interesting here is the delineation between what is part of the page and what is part of my theme um so if we go back to my pages menu we can look at the home page uh welcome here you see this is the uh let's use this auto save restore uh we can see this is the only content that's actually in the page in the block editor um is just a couple of paragraphs i could do whatever i wanted here if i wanted to insert an image block i absolutely could but the main thing um that i'm doing here is the content that's my nut center now i want to make it look nice so you see all of those additional things we saw they're not here on this welcome page but if i want to go edit them i can go through that appearance editor or i can go over to this template section this is something we covered in wordpress 5.8 review but the template section is now supercharged with all the templates that the block-based themes are bringing with it so you can see there's a couple of lists here um i selected the home page template and now i go into edit it we get dropped into the full site editor and we can now see a view that has the content of my page or my yeah my page here we can edit it but we can also now edit everything around it so if let's say we want to change this title i think in the preview it's called the hatchery we can just click and edit it which is really awesome previously before this might be something in the customizer where you had a list of inputs then you would do those and you'd see the changes on the right but here i can just click and edit and change exactly what i want to do let's say i want to change the size here let's make it much bigger i can do that or i can make it a lot smaller maybe i don't like that super huge text and i can just edit those parts of my theme um you can see here this is something that i've inserted uh into the template and okay i'm gonna this is one kind of thing uh is that real estate is kind of at a premium uh with the false editor let's go into full screen mode and i'm going to give myself even more space i hope uh the text hasn't gotten too tiny for folks um but we now have uh this listview which we've always had has also been supercharged where i can now click around and even collapse some of these things so if i want to say okay let's move this way but i want to focus in on one i can click to it and go before i can drag let's say i want to move this above my content i can but what i did here is i inserted a pattern and what's new um another thing that's new here is these additional controls it was always kind of tricky uh and this still kind of continues to be tricky of figuring out well when i click this add block button versus this add black button versus this ad block button what on earth is going to happen there are so many ad block buttons um we've always had the insert before and after but now the listview makes a really convenient way to do this so i can say insert before just by going through the list view and then we're going to say let's add a block we can do it here or here and we can look through the patterns to find a pattern that we want to have on our site and see the one that i chose earlier which is the subscribe call out there are a couple of options what's kind of annoying is that all these options are crammed into the sidebar here a new really cool feature i'm gonna use that a lot there are a lot of cool features here is the explore button so when i click the explore button i'm brought into this gorgeous full screen view that lets me see a much more detailed look at all the patterns as you can see here these are the general patterns from 2022 go over to footers and see those examples different headers you can see this one is what's kind of being used on our home page a whole bunch of really cool options some more simple ones headers with logos things like that but so let's select one of our general patterns here that we want to add and maybe we want to add the speaker series let's say this or maybe the video trailer so i just inserted that video trailer bit [Music] and it is now part of the front page of my site so i'm going to go ahead and set save and go to our front page again and we can see it there but again if i go back so i'm now in the editor but i can just go back if i want to edit my content i can i should say uh well you usually can i don't know i don't know why these disappear um interesting bug uh but i can go back uh to the regular post content editor from here and go back to making my changes let's say i want to move this image up and you can see the actual content of my post is really simple um i when i'm editing the text editing the words that are kind of more free form i don't need to worry about all those layout controls and all those complex things going on i can just dive in and only focus on this stuff you can see that change that happened there now so one of the promises of full site editing is that this isn't just for editing the front page of my site it's editing for any page of the site um so let's say we wanted to let's create a bad link this is some content that i've stolen from wikipedia but let's change it let's say to my site here and we'll hit update oh and let me do something first sneak preview of things uh here are the templates that we've been editing i'm going to delete the 404 template okay so let's go to the 404 page uh this is the default 404 page that comes in the theme uh and it's cool it's very classy but what was awesome about the idea of full site editing is these traditional templates that this would be in your wordpress theme of 404.php file and if you were familiar with php uh you could edit it yourself and there were loads of plugins that like just existed for this purpose to essentially let you create a wordpress page that you would say okay this is my 404 page you would select that page and that's what the theme would serve when there is a 404 but now that we have full site editing we don't need to do any of that we can just edit the 404 template using the full site editor this is one of those bits that is a little bit weird at the moment and is in flux and very well may change um but the way that we access this now for templates that we haven't customized is a little bit weird i'm just going to go into an arbitrary page here let's say uh site editing oh that that was a weird page actually uh let's go into the photographer um and i'm going to hop over to templates and select 404 i don't want this page to actually use the 404 template but with this excuse me is an edit link that drops me into the 404 template um and so now we can see this is uh and this i'm almost certain is going to be approved of a more sensible flow uh before wordpress 5.9 releases but this is what we have to do to demo this today it's still early uh wordpress 5.09 isn't due to release until mid-december um but so we're now on this 404 page and let's say we wanted to let's say we want to add an image this page to add some uh add some comedy we can insert an image like we would normally yeah this is just the block editor and this is an image that i stole from google um i think it's kind of funny um and now we can update this and what we're not gonna do again this is kind of thing you'll probably have to be dealing with uh when this actually releases but for now i'm unchecking saving the photographer which is the page that i've edited remember i've set the template to be the 404 template but we don't want this to display when they view the photographer page we want to display the photographer page so i'm just going to uncheck that and hit save and so now when we hop over here we've got a new custom 404 page and we didn't have to create a separate page when i go i mean we did do some weird things but those are just weird things for now i'm going to set this back to the single uh page uh template but we now have our custom 4k and if we do want to get back to it this is the part that's kind of weird is that creating these first ones is a little bit annoying uh but afterwards you can edit them through here um again this is beta software when you edit these 404 templates so like the really cool thing is these are all custom post types these are stored as posts so all the kind of things that work with posts work with this but so the editor that gets launched when you launch the 404 template here uh is the kind of just regular wordpress editor as well as the site editor so it looks a little bit chunky uh but it's one of those things that i expect to see fixed in the future um but yeah we've set up our custom 404 page uh we didn't have to do any coding anything like that um and if we want to like you saw i don't know why it keeps resetting my screen size um there we go um like you saw me do earlier if we want to reset those templates we can just delete the template from here there's also a button inside of the full site editor when you're editing one of these things you see we super customize this homepage template but if i wanted to which i don't because i like my changes i can hit clear customizations which will kind of get rid of my template changes and restore it back to what the uh brought with it itself um yeah so then another uh thing i kind of want to touch on which is a little bit of another uh weird thing of how how these things will be working we go into the photographer one of the cool things let me get rid of all of this just delete that block remove um one of the cool things about 2021 that we saw is all of those patterns and you saw these pages sections which comes with these large patterns that you can use in your page to do other things they're custom they're like really cool designs maybe let's try let's try this one this is doing a whole bunch of stuff and so when on your first step here this might be a little bit weird i'm going to hit update and we're going to go view this page oh no i don't want to switch to draft i'm going to hit preview preview a new tab we have this really cool layout but it starts like all the way down here um it's kind of like this really awesome layout that's embedded inside of this other page um and this is one of those things that i think part of the flow is still a little bit weird and has is one of those places where like user experience improvements are going to come after 5.9 as well as new features and things like that i have a couple of options if i want this thing to take up like maybe i want this to be a landing page or something like that i can go into the page and you'll see that there is a blank template part that i can select when i select this blank template part now the only thing that wordpress actually prints is the content of my page um which is just a regular uh template uh if you're unfamiliar templates they're just a series of blocks this isn't one specific block it's just a number of blocks that are in here uh that you could build yourself but have been built uh for you uh by wordpress contributors um so that's one option that you could do things uh the other thing and this is i think is interesting is let's say this is maybe the main fancy bit but let's say that we wanted to let me grab some lorem ipsum text let's say we wanted to have some main content in here too um like we like this layout but this is this is the overview maybe you want some details we're gonna hop in here um after this group block let's insert after and let's add in some text here beta software don't know why that broke oh jesus uh oh let's paste okay i'm not going to touch that beta software things are a little bit shaky i'm going to group this um and uh inherit from the regular layout for my theme this is there's so there's so many full-sided things and there's so much to how block-based themes work that we're not going to get into but there's this idea of inheriting layout and you can set essentially a specific uh width for the content width which is the regular when you just use regular align left middle right and then you can set a wide width um so we could say our content width here should only be 500 pixels in our wide width it would be 800 pixels we wanted to and if we inserted something that aligned wide here it would stretch to 800 pixels or what we can do which i think you'll probably want to do most of the time is inherit from the default layout uh going all the way up but yes we have this text here and hit update and we have our text oh it shows up there i guess it just doesn't want to show up here i'm going to try deleting this one okay it did not crash cool but now we do kind of have the problem that i talked about earlier um of well when i want to do just content writing like imagine this is multiple paragraphs this is something that's more in depth i have to kind of like deal with all this really pretty ui in front of me but maybe that's something i don't want to do um i'm making sure that that is not steve pinging me that's not c pinging me um yes wordpress the beta1 is coming out in hours uh 16 hours or something that slack is going crazy uh apologies for that um but so there's some different things that we could explore if we wanted to do that i'm going to select um actually i'm not going to select anything in a moment yeah what i'm going to do is let's create a new template so we're going to say this is our movie template and we say new movie template create and no things are crazy let's um go over here to post content and i'm going to now delete a whole bunch of stuff i'm going to leave all of this okay i didn't want it to go that far undo there we go i want to delete all of this um and all of this actually i might want to get rid of everything yeah i'm going to get rid of all of this stuff and the post content block and the post title and everything all the way down to the group so we have a completely blank template now i'm going to insert uh that template that we had before pages here we go and so now we have this as a template and now if we say we'll go back to what we had before and weird bugs um but now what i can do is kind of merge our two things together so i'm going to open up this list view again i think this is such a fantastic way to do editing i'm going to insert after let's insert that group block right away and then let's insert our paragraph with some text and let's delete oh just make this paragraph go into the group inherit from the layout i'm going to hope that this saves properly all right save we have our text there but now instead of just making this regular text i'm going to refresh uh-oh i'm gonna be breaking things okay edit go in here i'm gonna switch this out for the post content block uh oh it's frozen okay here we go okay and then we're going to delete this remove paragraph update save all right let's go back now hopefully uh this will do exactly what i wanted to do yes it does okay awesome so i've now set up this template which is the template that i want to use for this uh theme uh for this theme page that is about this film screening but again we have this awesome benefit of being able to separate the more structural styles and the content styles and now when i want to have let's say my client go in here and do the main editing for their text and they just want to write and they don't want to think about all the layout stuff they can just do that but then instead of having to call you as the designer the wordpress developer say oh i need to change this thing that was previously in a template.php file they can just hop in here click edit and say oh we've changed the name of the film it's no longer wearable it's blue jay or something like that and they can just make that edit right away which i think is really awesome now that's kind of the extent of what i'm going to talk about um with the template stuff uh i'm going to dive i'm going to touch on a little more technical things later um but the other really cool feature that is part of full site editing is global styles um as you saw there we have the editor link we also have styles which i guess is kind of also a beta but i'm going to hop in there and we have this new global styles menu so here the gear is what we are used to that changes when you select blocks and has the name of the page editing we have this new menu up here called styles and this is our global styles editor and this is kind of equivalent to what the customizer did before where you may say okay these are the color patterns i want to use in the customizer this is the colors for my theme this is how i want these things to look use the font choices the way you'll be doing that in wordpress going forward for block based themes is by using global styles uh so i'm gonna hop in here uh we have a couple of different uh things that we can tweak um so we hop into typography uh we can see that this theme there is no way to like add new fonts yourself at the moment i imagine that something will be coming in the future um but this theme bundles a couple there's the default font which is just wordpress stuff there's the system font and then the source serif pro font and you can see as i'm changing these things and this is changing the font across my entire theme i'm not having to go into any individual block if we wanted to change the line height from here i could do that um if i wanted to change the default size of text i could do that all those different things the default appearance which is again beta software i'm getting lots of scroll bars here um i can change that excuse me oh yeah and here we go yeah i can change this to just be a completely custom number but i recommend you sticking to the things that are built in so you have you don't have to remember this is 36 pixels exactly you can just use these um but typography isn't the only thing we also have colors so uh the way that this works now kind of is that wordpress core has its own color palette uh that is the set of uh colors that you're probably used to like let's say if we go over here to this button and you can see i can just change over to the settings here um and we go into color uh we can see uh how those colors are set up these are the colors that come from wordpress core which are probably the colors that you're used to i think these have been pretty much the same since wordpress 5.0 uh you can see these are the colors that the theme uh has set up so you can say okay this is the theme that we want to use uh actually these are the colors that the team wants us to use but then we also have the user palette which is what we set up um and so you can see uh here i set up two earlier uh the orange one and a paler orange one but if you notice i'm gonna click clear here and this is now an orange button and there's no background here and remember this orange color doesn't appear anywhere in my theme um it's something that i created and so the way that we do this is we go over to our global styles menu we have our colors and we have our palette and we can add more colors here let's say we wanted to add a very neon-ish green you should be able to type uh full names of spaces not need to do dashes but i broke things when i did that earlier so i'm typing it like this um and so we have our custom color palette defined and now what's really powerful about this is i can hop into the blocks menu here and this is a list of all of the blocks that are on my site i'm going to hop into the button block hop into colors and say okay this color has or excuse me this block has two elements to it the background color and the text color i'm going to go ahead and change the background color to be one of those colors for my palette and now this will update across the site for any button that isn't defining its own background color and like you saw earlier i can change this background color on a per block basis if i want to but let's say for this site i want to have all these buttons that use this holistic theme i can just change this here and now all the buttons on my whole site used this color um so let's back out of that if we wanted to we could also set the text color white is probably the one to choose but black also works neon green that's unreadable um but yeah uh you can make those changes let's uh clear that out to get back to the default uh which is white and this isn't just for um just for colors uh remember we also had block radiuses and for buttons i know there's always been this kind of controversy of whether button should have curve buttons to square buttons and wordpress themes i think default to a wordpress chord if it's having rounded corners on their buttons maybe you don't like that you can now change that again for all buttons across your entire site and set it via the theme editor uh just by using the scroll box uh which is again i think a really neat way to do things i kind of like the curve buttons so i'm going to set this to 25 pixels and you see that's changing everything well you can't see that let me insert another button and you see right there these were previously things that are defined on a provided basis but you can see this is remaining for all the buttons that i'm listening to i mean these call to actions don't really make sense about inboxes but stick with me um and yeah there are loads of things you can customize here pretty much every block uh that exists in your site you can change things for if we want to say the default paragraph should be uh very small we could do that and we'll see that kind of like update uh in our post content um but let me go back to default we can change the line height all that kind of stuff for headings is a big one um where for headings we might want those to be um let's say these by default you can see that adjusted over there and change the line i change the appearance all those different things um and this isn't you don't need to just go through this for your palette so let's say we have this theme and the scene is already set up to kind of use this background color um let's change the background color for our entire site from one location let's say we want to go to the snow gray and i've now updated that and we can well we saw those sites that got updated let's go to the home page of this site [Music] dashboard this is like um we can see that that got updated uh to the gray here and on other those pages uh they got updated to the gray as well all through the global files menu um let me see if there's any anything else oh yes navigation um so navigation uh is a big thing that's been iterated over multiple times with full side editing and in my opinion it's one of the things that was still kind of a little bit shaky um before 5.9 but navigation now is in a really awesome spot for full site themes um so i have this navigation menu here um and let's actually hop in real close this is a new feature um i can click this button here to edit the header and i get zoomed into just editing the header template part uh from my site i can if i'm ever gonna go back and just go back uh but now this is the only thing i have to worry about i don't have to worry about the rest of my site so we have a select menu thing here now it's not just detached blocks these are actually kind of menus and i can switch between my footer menu that you might have seen over here this is actually a menu um but let's go back to the header navigation or if we wanted to we could create a new menu item excuse me create a new menu from scratch we also have the rendering of the classic menu menus you would have before when you're editing through the wp admin interface or from the customizer and we're going to go back to our header navigation when we want to uh add items let's say we want to add another thing under 5.9 preview um click the add button here um and this is uh one of those kind of like neat user experience things when this doesn't have a proper link for it uh you get this familiar squiggly underline uh this is hey there's something to pay attention to here but i'm going to fill it out let's say we want to select the photographer page that we talked about earlier that's part of our demo here so we're going to select that um and these are full-fledged blocks so we can make changes to it like folding things oh that deleted too far go forward edit there we go okay well something's happening i'm not sure what's happening that's making that not go uh let me hit save did i break it i might have broken it and let's see what we have in here there we go okay uh yes we have the photographer uh we're gonna unbolt this uh we have all the link settings that you're kind of familiar of with the wpm interface you have here so you can set a custom link relation title a description that occasionally shows up um but yeah that's how editing links works um you essentially just use the plus button or the sub menu button when you're on a parent menu but menus now are not just a series of menu items you can add some other things to them so let's say we wanted to add our site logo into our menu for some reason we can do that by inserting the site logo back site logo block and we can make it really tiny we can move it around maybe we want it in between these menu items for some reason this would probably look better if this whole thing was center aligned for a theme which we could actually do um if we go up here and let's kill this row remove this group uh let's take this and justify items to the center and now this probably makes more sense for how this was envisioned we can even add a search input here and we now have a little search icon that is part of our menu i'm gonna remove that i don't like how it looks uh for how we've got this styled up here uh but yeah that's uh how many editing works um and now let's say um let's go back let's exit out let's go back to our home page let's see that looks oh that looks kind of cool i was able to do that all interactively change the whole design of my site without needing to without needing to call a web developer and pay them to do it for me um but let's see also how we can kind of reuse that information so we're going to go back here let's go back to that page that we were talking about and we're going to edit the template um movie template we had earlier so we didn't have uh the menu um as part of this template so once you're on this page you kind of had nowhere to go um there's probably some marketing theory that says the menu shouldn't be at the top of the page and this kind of landing stuff but i'm just gonna i'm gonna shove it up there anyway because i'm not a marketing expert um so let's go up here insert before and now hopefully this works actually i can just use slash menu i think yeah so slash navigation and i'm gonna select the menu that i want and we're gonna select that header menu and we should actually put this into a group block so that we can again inherit from the layout and [Music] do all that jazz and yeah i think it's centered properly and let's preview a new time yeah we have our naming up there it's a little bit ugly um what we should probably do is put this inside of this other group block here so we can now drag and drop from our list view and now we have our menu inside of here and i want to know why this is oh there we go i need to select the justification i want to know why it's off to the side but yeah now we have the menu part of this page we can use our spacing controls from before let's go up into this group and we're going to go into dimensions and set a bottom padding top yeah so this is there are no labeled inputs here if you hover you'll see them but in css the way this goes is top right bottom left and that is what is reflected here um so this is top right bottom and we'll say let's add 50 pixels on the bottom and we got ourselves a whole bunch of space there which looks much nicer and yeah um looking over my list of things to see if there's anything else that i wanted to mention i mean there's so much more depth to this uh that i'm sure we'll cover in future meetups um but something that i wanted to go over really quickly is what these themes actually look like um so we still have the same editor as before um but uh this isn't this is the way you'll want to be doing things because we've got this whole new beautiful visual interface but you see this is the entirety of the style.css sheet for 2022. um it's a couple of things in here pretty much just because there's some bugs that still need to be resolved in gutenberg and a couple of few decisions of things that don't yet have options in theme.json but this is all the css that the theme is responsible for um instead what it does is it provides this theme.json file which has a whole bunch of style information is defining the color is this defining the gradients it's defining uh the palette that gets used you see here the five colors that we saw earlier saying these as the spacing this is the typography these are the font sizes um these are even the units that are supported we don't want drop caps all that kind of stuff is defined through the steam.json file coming into your styles here this theme defaults to having no border radius barely any lines of css were written um we're going to take a quick look at the themes functions file and most themes nowadays this can get pretty lengthy but the only thing that this is really doing is loading a web font um it's loading uh the source serif pro font that you saw in our description there and there are apis in the roadmap for making this a more same thing to do that will probably remove the need for this um but you can see this is just the level of php that's required um and then all of those templates that we had before are defined as html files that are made up of things that you would see in the block editor we have the template part where the slug is the header it's the tag name of the header we have the html that this theme uses and we can see those um and all these other things yeah you can see here is our blank template which is just just the post content but here's our index template which is a little bit more complex because it's a list of blog posts and that always gets weird um you can see your page home one of the cool things that we have here is that you don't see uh that page home template had like all the text like welcome to my site and that stuff but that's not even defined here that's defined in a block template part i don't know excuse me no it's not it's described in a pattern um and we can go over here a new feature is that there's such a thing called hidden patterns so i'm going to jump down here over to that 404 pattern for instance you saw when we and went into the pattern editor there was no 404 pattern there but this is how it's implemented it's again just that kind of html the only real reason that this is a php file still is because we need to figure out a solution for localization you can see that this is uh calling php it's not just read html straight html but we've disabled the insert here so we have these kind of like hidden patterns and you can see those two the hidden for the 404 and the hidden one for the uh pattern on the page uh where we have like the hatchery a blog about my adventures in bird watching um but yeah these are now themes that are radically uh more simple uh to edit and things like that we have our patterns here um and that barely require any php and probably in the future won't require any um and all of what this all lets you do is do that kind of visual editing stuff that we have been looking at over the past three minutes or so um that is everything on my list um so we can open it up to questions if people have questions about wordpress 5.9 or full site editing i'll do my best to answer them um but yeah this is full set editing our preview of it it's going to get much better and continue to get better but this is this is the first bit that's shipping to end users for everyone wow that was a lot that was amazing i can't wait to watch this video again um so we have a couple of questions um uh and i guess people are kind of concerned about like bob's asking well full side editing break uh the gutenberg blocks add-on like ultimate advanced blocks or cadence blocks and i had larry ask is it going to affect uh a specific theme like any thoughts on this yeah i should uh give a little bit more context so 2022 is the theme that i've been demoing here and it's a block-based theme um so we go over to our themes here uh it shows up as a regular theme but it's a block based theme um it has the full site editing tag which it might make sense to distinguish this uh in the ui a bit more when we're going through of which ones are block based but essentially the most super powered or the features that i've been showing you today like the template editing um and really global styles are things that themes will have to opt into so when you update to wordpress 5.9 nothing outside of the normal nothing ever breaks with wordpress things sometimes break with wordpress um but nothing out of the normal breakage uh should happen with wordpress 5.9 um so there might be some css incompatibilities and things like that but your theme has to opt into being a block based theme that gives you all of this uh interface stuff like the editor and global styles um your theme has stopped into it so existing theme shouldn't break um speaking of blocks there's been a lot of work over the past uh year or two i mean even longer really uh for blocks to get ready for a full-side editing future um very simple blocks should work um even more complex blocks like there there's no limit to the complexity of a block that you can include with full site editing but depending on how that block has been coded there may be intermediate issues um getting it compatible with full site editing but by the time you are trying out full site editing with let's say 2022 i would expect all the popular block plugins to have updated to add support for it um i know that will be um i work at ifeams as steve mentioned part of our team is the cadence team led by ben who is really awesome and i know it's on top of making sure that cadence is always ready for the great new things that come up with wordpress so i can say for sure that blocks will be as compatible as possible with wordpress 5.9 um may take a few weeks but um all the block plugins should be able to be compatible with their blocks they should just be operating as blocks with themes themes will have to opt in and say okay we're building a theme that is a full site editing theme um and there's a kind of intermediate step where they can say okay we're not a complete full side of anything that we have global style support um i believe all that is correct but when you update to wordpress 5.9 nothing should break uh it should be a smooth upgrade process great thank you um i have a question um you showed using the i think was it the post content block where you brought in content from another post so are there you know it's interesting because wordpress has always been a cms that filled it in now this feels like a lot of static content being built page by page is there going to be an easy way to look at a page or is there an easy way to look at a page in the editor and distinguish between what's static and what's dynamic yeah um so i'm gonna let's hop into this again again this is the best way to get to this interface at the moment um as far as i know but we'll be getting more smooth um so yeah the when we're looking at this we're seeing this is the post content block and there are a lot of blocks that are like this let's say like one thing that we could do here is we have blue jay a film about hobbyist bird watchers maybe this makes sense for the title of the page right i'm going to copy this and i'm going to hit return so we have a new block and i'm going to say let's type in page and we can see or excuse me i think post yeah slash post we have a whole bunch of list of blocks that are the dynamic blocks um i think these might also even be um in a separate compartment here compartment is probably where bird um yeah under theme so we have these kind of more dynamic blocks so i'm going to insert the post title block here instead um and then we're going to try and make this match as much as possible this is an h2 this is an h1 so let's change this to h1 um and then i think this is a line wide is the difference okay um and so we're going to take this content here we're going to delete this block we're going to hit update save we're going to go back and we see that as the photographer i don't engage the blue jay film about bird hobbyist watchers and now this page template is even more dynamic um there are probably some styling differences there are evidently some styling differences that have changed here [Music] but yeah so the essentially the way that you tell things are dynamic is that they're using those um [Music] post blank blocks for the most part things like post title um and you can kind of see this in the blog description displays the type of a post page or any other content type and post content displays the contents of a poster page um and they're like these dynamic blocks like so i just still kind of like have here this is uh i'm going into a little bit of a tangent um i think full site editing is cool for a lot of different audiences i think it's amazing um and will be uh even getting better for just people who are managing their wordpress site and they want to do more design based things and take more control i think it's awesome i think they're also really cool things that agencies can do that are building more complex advanced sites um so if you remember from my talk from two months ago when was my class talks to you um um when we talked about these kind of blocks that's stored to custom post types that is also remember we kind of like touched on like these template box as well of like the post title and how we can use them about those there you could do that same thing here so we could make our own block we could fully templatize this um post or excuse me this page template by pulling things in the original post we could say okay we want to create a new uh full editing block uh for our uh custom theme or custom plugin that we're building that is the buy tickets link and uh then when you want to edit the template and design the visuals you would go in here and you'd say okay we're editing this button and we're changing the colors and doing all of that but when we actually want to get at the link we could easily populate that field let's say in the sidebar here that says okay this is the link that i want to choose um so the first kind of step and initial fear is that all this stuff is going to be mixed together content presentation etc um and i think how a lot of wordpress users were just building their own site hobbyists bloggers people other uh small little side gigs that aren't uh hiring people or maybe even using custom plug-ins will have kind of this mix of oh all this content and all this dynamic stuff all this design stuff is kind of all mixed together but the the ceiling is really the limit for what plug-in developers and agencies can do to build these more um awesome experiences where your client can still tweak styles and not need to call you and you have to say oh well we have this developer and then they really don't work in this other project but this client needs something for this and so we need to find an hour and a half in their schedule to be able to do this your client is oh i'm going to go in here and i can change these visuals but 99 of the time i can just edit my site through the content and have a more uh content-based way of doing things whether all people will do that romaine city scene i think a lot of people like everything to be direct manipulation and i think direct manipulation makes a lot of sense for a lot of use cases but there's also the use case where people are concerned about this um of being able to be uh more advanced with saying okay we're pulling this data from all these different places it doesn't just have to be a mix of content and design the buy button for this doesn't have to be part of the template it can be pulled from a meta field it can pull from a custom post like that kind of stuff um i think the the sky is the limited it's incredible you

Channel: WordPressNYC

Views: 694

Keywords:

Id: pn0bjnPQ4rI

Length: 57min 59sec (3479 seconds)

Published: Fri Nov 19 2021