Big WordPress 5.8 Update Coming - Full Breakdown Lots Of HUGE Changes Ahead

for me this has to be one of the biggest wordpress updates since we got the block builder a few years ago it's not as big as that but since then it's probably the most significant update to wordpress and it's coming right around the corner i have broken it down to the 12 biggest changes coming to this version of wordpress so if you're a wordpress user this video is for you [Music] okay so here is the post that's going to break down everything that's coming so what's important here is the date july 20th is this is expected to be widely released which is just a few weeks away so it's good to know what's coming so that you can be prepared for it when it comes now for your convenience i've broken this video up into a table of contents a lot of effort goes into doing that so if that doesn't earn a thumbs up on this video right now i don't know what will let's go ahead and get started now you may be asking yourself how the heck do i test the beta version it's actually very simple don't do this on a live website because it might break some things as a matter of fact it's almost guaranteed to what you want to do is set up a test wordpress website maybe using local it allows you to install wordpress on your local computer or some kind of test hosting that you have don't do this on a live site but all you have to do is go to plug-ins add new and install this plug-in that says wordpress beta tester and this will allow you to get access to beta versions that you can test out you can see this isn't that widely used two thousand users or it's only active on two thousand different websites and so those are probably mostly software plug-in developers making sure that their stuff works with this new version of wordpress so the first change is wordpress now is going to natively support webp images so currently you're usually adding a jpeg image a gif one of those animated images or png when you need some transparency for the image well webp is going to be a replacement for jpeg and for png which means it will also support transparent images that you can only do with pngs but the advantage is it's going to be a much smaller file size so now you're going to be able to natively add webp images to your wordpress website whereas before you couldn't do it you had to have a plug-in to be able to take advantage of this new file format now unfortunately not all programs that let you export images will let you export to a webp image right here is a website that i found cloud convert dot com and it will allow you to convert your web your whatever format your image is into a webp you can literally just go here and choose webp and you can easily convert your file across and you're going to see that the file size is significantly smaller but don't get excited yet here's another website that will show you the compatibility of web p images meaning which web browsers are going to be able to display the image and which ones are not so you can see some important older browsers they will not be able to take the webp image and actually show it so that includes safari right here so any version of safari prior to 2020 it's not going to work with the webp images by itself pretty much you're going to get wide support with chrome and with opera and there you could basically just come and visit this page right here and see what's compatible and what's not compatible i'd imagine all browsers compatible moving forward and you would add it just like you would add any other image you would go ahead and do the image block so i can type uh image here it is i'll click on it i'll click on media library like this and upload files and you can just drag and drop it across right here is a webp image that i've already uploaded and so i can click on select and there is my webp image the next few important changes are going to be related to the wordpress block builder and i'm going to cover all of those right now so the very first enhancement to the wordpress block builder for me it's a big deal and that is the gutenberg list view is what it's being called and so when you click on this icon normally it would pull a little drop down right here and probably be similar in size to that and it would show you a list of all the blocks that you're using so you can click on one and quickly jump to it although it was such a tiny area it was really not super useful so now when you click on it check it out you get this full on list view of everything so i can click right here and it highlights that if i want to get to the button i can clearly see here's the button and i can go right there and start editing the button so i can easily get to what i want to get to a lot of times what happens when you're using the block builder is you there's layers to it whenever you're building any page even with a traditional page builder there's layers to what you're doing so it might be hard to get the right layer so for this section right here and what what you have here is you have all of these different layers and you want to be able to click on the right layer this makes it easy to visually see it and there's also a little hidden feature in here so watch i just clicked on this group and this is like a a feature grid right here so i'm going to go ahead and click on advanced and where it says html anchor i'm going to enter something in here i entered in faq but did you notice over here on the left right next to the group it says faq so i can put an html anchor into all of these various settings uh very easily and that will make it easy when i'm looking in the list view there we go i just added it for this group as well so i'm a big fan of the list this new list view it's going to make it easier when you're working with more complex layouts and layouts that have more content in it the next thing is actually right here on a web page that i can't even really show you because it's not working properly and it's going to be a design patterns library and so this is actually a page wordpress.com patterns it's not live yet you can see i'm not seeing the images of the patterns that's okay though so this is going to be a public library or directory of patterns that use the default wordpress block builder blocks so they'll work on every single website you'll be able to come here and literally click on copy and paste that design right on into your website which i don't know if most people know you can actually copy and paste the site to site really easy with the block builder it's one of the coolest things so okay so it says right here this is a pricing table unfortunately the image is not rendering and they got six weeks to dial this in and beef up the designs so let me just go ahead and click on copy so this is going to be the mystery design and let's see if it works okay back on my page i'm going to go to the bottom of it right here i'm going to click here and i'm just gonna paste from my clipboard and it looks like it's not working yet uh oh well but it's coming that's certainly awkward anyways we already have some patterns in here so when you click on the plus there's this patterns tab right here and they're all kind of filtered out into different categories and you can just click on a pattern and it instantly gets added to the page so this is pretty much the same thing except you're going to be able to copy and paste it from that website and they've got five weeks to make that thing happen next there's been improvements to all of the default blocks to add some more color options and topography options and just make them more useful i've always found that they're a bit limited so this is a much welcomed improvement so here i am on a heading block and i mean let's just see what's available now so we've got fonts we've got the size of the font and here we have a bunch of color options and this is being pulled in from the theme that i'm using so you're going to see expanded options like this on a lot of the default blocks i tend to not really use the default blocks that much but this is a much welcomed improvement as well the next improvement i'm gonna butcher the name i'm not a designer so they've added some let's just call them filters to images but it's they call do tone or duotone do d-u-o-t-o-n-e i don't know i'm gonna always pronounce things wrong and you can do some flashy things images so here's that image i added earlier uh the webp image and when i click on it you can see there's a new icon here in the toolbar and when i click on it it's going to show me those right here so basically i can choose any of these pre put together color patterns right here or i can change this however i want i can go ahead and click and change one of these colors that's looking nasty well i prefer oh we got shadows here as well look at that all right i'm going to clear that because i like my pizza looking normal not radioactive but i do like that they're adding these different effects that can be lightweight and probably applied via css so that they'll give you more design options using the what's built into wordpress now the next improvement is actually really cool there's a new block in town and this is a pdf block so now you can easily embed a pdf on your page and there's options to give the visitor to download the pdf it's actually quite nice so i went ahead and printed a pdf of one of the websites uh for a product that i have so let's go ahead and display that so i'll just click on the plus here and i can start typing p d f but it actually will say file now when i click on it it adds the block to the bottom i'll click on media library right here and i've already uploaded it so i'll choose it and it'd be nice if there was a preview but you know anyways i'll click on select and you can see right here is my embedded preview i think that's really cool now if i go off to the right and display the options here are some options so i can control the height of the viewer if i want the download button i can control whether i want to offer that as well we have some nice options here so let me just go ahead and do a quick update and let's click on view page now this page is going to look horrible but that's alright so here's my pdf viewer and you can see i'm able to scroll through the pdf just like that and uh here is a download button but that was optional as well but we also have a toolbar up here for the different pages of the pdf the size of the view and all that kind of stuff printing in all of that now the next improvement is the nested block selector i don't anticipate myself using this a lot but who knows maybe i'll surprise myself so if i'm in this heading right here and i'm like huh i want to be on the container or the layer underneath this uh there's a real easy way of doing it so in the toolbar here there's this icon on the far left and that will basically let me hit the layer underneath it now there's already multiple ways of doing this uh it might be kind of hard to see in the video but if i'm here in the heading you can see here on the bottom left that's how i normally do it there's sort of these uh breadcrumbs right here so that's how i would normally do it i don't know if i'm going to change my behavior on that but that certainly is nice to just go here and then you're going up a layer so when we go into that list view that i like you can see there's lots of layers here and that's where it will be the most useful so let me click into this heading and you can see i'm in the heading but i want to go up so i'm going to click right here and it went up you see that it went from the heading to this and now when i click it it's going to go in again it's going to go into the the next layer underneath at the column and now to the column so i can change all the properties and then up even more and then i think uh i think i'm there i'm right let's see no i'm one more that's good and one more i'm at the very bottom of this hierarchy of the layout it's actually pretty cool i think i just changed my mind i'm going to use this the next change is how you create reusable blocks just kind of the workflow of it so let me just show you how it works i'm going to choose this container right here and in the toolbar hidden under the three dots is this option right here that says add to reusable blocks now when i click on this this is where it's different so now we're going to name what this reusable block will be i don't know just name it page here or whatever and then i'll click on save and this is already converted over to the reusable block you can see right here here is that name that i've entered and i'm pretty much set so then when i click on update everything is saved here and what's interesting though is i can go here and i can change something to the reusable heading and this will actually apply towards every place i'm using or i have this reusable block linked to and if you notice something when you see this update button here now it has a little dot off to the left and that's letting you know that there's a change to the page and a change to a reusable block so when i click on save now i'm here and it's saying oh my you made a change to the reusable block and it's just confirming that and then i'll click on save and it's going to make a change there as well and that's going to go across your website everything i just showed you is really awesome and it's going to help with workflow and usability and all these things i love it but it's not the big things that i was alluding to at the beginning of the video i mean let's face it and so i'm going to cover those bigger things now these bigger items that can fundamentally change certain areas of wordpress and how it's used so it's no secret if you've been on the channel that big changes really big changes are ahead coming to wordpress for all users and there's this feature set called the theme building and and building templates that you apply to different pages or posts on your website this is coming in a big way later this year i'm pretty sure later this year like the later release that usually comes in november but we have the glimpses of it now in the form of new blocks and some new features and i'm going to show you all of that now so now i'm going to show you the theme building blocks that are now part of the block builder and what is exciting about this is you could use these anywhere on your website so i'm going to give you uh an example of that here in a moment so when i click on the plus and you're scrolling through the blocks they're actually not separated out so if i get down here to design we're going to just start seeing some of them sprinkled in there and whoa look at this we have the site logo so wherever you use this it'll show the site logo and you typically see that in a header right at the site logo we've got the site tag line that's another piece you might have in a header we've got the site title we've got a query loop which i'll show you in a moment we've got the post title and we've got the post content post date post excerpt post feature image oh my gosh we got a login log out we've got some navigation stuff here i mean this is the first glimpse of what theme building is going to be like and we're actually going to get to see it a little deeper here now on an individual page like this it doesn't really make sense for me to add a logo maybe a menu um or using some of these i'm going to show you more on that in a moment but if you're using say a pro theme that has kind of a hooks or an elements or whatever that thing names it feature you can do some really cool stuff this is the dynamic content stuff that you're now going to be able to do uh until the full-blown theme editing comes out so let me give this an example here so i'm using a pro theme most pro themes have this the one i'm just using is cadence theme and their pro version and they call this hooks or whatever feature they call it elements now this isn't specific to cadence theme just you know this is in a cadence video or anything like that i'm just using it as an example if you're using a pro theme most of the pro the top pro themes already have this in there so i'm just giving you an example i'll go ahead and click on elements i'll click on add new and i'll click here where it says default and i'll name this page header okay and then i'll proceed to design a page header so let's go ahead and use some of these new blocks that have come so for a page header i might want to have the the page title here it is right there post title boom it's going to show me it's actually pulling it in right but when i insert this on certain parts of the website it's going to just use that one so we've got that and then let's go ahead and let's put in something underneath it um so let's just go ahead and maybe just show some of the metadata and let's just test this out and see how it works maybe i'll just pop pop in the excerpt there that's fine maybe the post date there we go now obviously i would design this make it pretty and custom exactly how i would want it so the way these work is you put your content in there you design it you make it pretty uh and then there'll be something to the effect of this right where i can decide where i want to place this on what content and exactly what location uh where i'd like to place it so i can go here and choose something so i can choose this option right here after header which is where you usually see this at the top of the page and then i'll choose my display settings i want to show it on the entire site or just a particular page just for this example i'll choose entire sites and for what users do you want to see this i'll just choose all users but there's some really cool stuff that you can do there with these rules so let's just go ahead and click on publish publish and take a look at the front end of the website okay so here's the about page and this is where the normal gutenberg content is but look you can see there it is i don't have an excerpt and obviously i didn't style this or make this pretty but you can see i can now make a header kind of page header template design that i can insert and i'm using all these dynamic elements that are coming from the content that i'm actually on so you see how it says about uh i can click on contact now it switches to content uh when this was published let me click on blog here's a blog post here and uh i can just click on it and there it is so and this one actually has an excerpt so i could design it not show the one that my theme is doing do one that's fully customized now pulling in this dynamic content okay i know that wasn't the best visual example but just forgive me i'm making a quick video for you so all right so that is huge you can use these dynamic elements inside of your themes feature set now and i love it i love it okay so next we have a query loop and what a query loop is is when you're say on a blog page let me show you what a query loop is okay this is a query loop i'm on the blog page and it's showing me this loop here of the different content pieces that are on the site right these blog posts and it's showing me information about them and letting me click into the blog post this right here is called the loop and now you can create these very easily inside of wordpress here i am back on the home page and usually you do this on a homepage you might want to have this grid or a loop or query loop of the different type of content on your website so here i am i'll go ahead and click on plus and it was down here uh right where it says query loop there it is i'll click on it and here is my query loop right here now don't worry there's lots of different ways of doing this and styling it so i can go right here uh and now we have it in a grid uh let's go ahead and show some of the styling options right here actually what's really neat is every aspect of this is really customizable so like let me click on the right here on the title so you can see it says post title it's a query loop is kind of like all the little pieces of like the title the featured image the excerpt and a button and so we can customize this however we want i can change the topography size if i wanted it to be like 18 instead of whatever it is i can easily do that right now it's coming from my theme and then there's these various options and the same thing goes for the the image right there and the same thing goes for the excerpt right here you can customize this query loop out however you want to do that and this is where the list view here comes into place right so right here i can see now i've selected my query loop and did you notice here on the right there's all these filtering options so i'm right now it's showing blog posts and i can choose my orders they're sticky ones as their filters right here it's all literally listed right here and some colors as well now you're also going to want to pay attention to the toolbar here so when i've clicked on the query loop we've got options here so i can show how many options per page i've got offsets here's the grid we've just got a whole bunch of options here there we go i would probably i usually do six or nine i like a column of three like that and here was my columns but if i wanted to go four columns we could do something like that i like three columns and you can see we have it there now don't worry i know this is looking funny it's actually fully customizable uh this query loop you you can easily create the query loop and design it how you want using these gutenberg controls okay the next two are big ones first widgets are now blocks and you can use any block in the widget area any block that you have to me this is a big deal this is going to change a fundamental piece of wordpress and modernize it so there's two ways to see your widgets so i can go to appearance and then click on widgets so this is one error one way of doing it you can see right here and it's this new block builder interface right here isn't that crazy um so let me collapse where it says sidebar one so these are the widget areas in my theme one two footer one in inactive widgets uh everything's gonna have a different amount of widget areas so you can just expand it here and this is literally the block builder or interface right here you can see right there i've got three legacy widgets in there and i can get rid of it just using the normal editor just like this so let me go ahead and add a new block maybe i want to have a paragraph of text here is my paragraph of text or maybe i want something else i can choose anything from here any block and add it into a widget area and to me this just makes so much sense it's a lot easier to do it this way than to have the rigid widgets that we had before now there's a second way to get to widgets and that's inside of the customizer hopefully this works i'm in the customizer and i'm going to go to widgets oh i know it's going to say i'm not on a page with widgets where widget areas are enabled but i am right here in a blog post and it should be there we go sidebar one and here we are um it's the same experience i'll click on got it uh and this is kind of more scrunched in i probably wouldn't prefer this uh i would probably just use the back end uh part of wordpress for that but you can do it here as well now i know some people are going to hate it and wordpress knows some people are going to hate it even though all of your legacy widgets should work fine so the solution is a plug-in called classic widgets just like we had the classic editor when the big change to the block builder now you've got classic widgets and you can install this and it will keep the widget area how you're used to and you can switch when you're ready to switch and now we're on the last big change and this is the new template editor and so if you're coming from a page builder like elementor that has a theme builder and you can make templates that apply to posts or pages uh divi has it beaver builder has it it's called beaver themer a lot of them have it now you can see it's i'm gonna show you right now it's a part of wordpress and it's rough around the edge i don't anticipate this being something um that you'll be able to use right away because themes need to make adjustments for it but this is literally a glimpse into what's just a few months away so it's actually pretty cool if i go into any page right here uh you can see off to the right we've got a little bit of page info and then it says template and it says default template i can click on new and it's going to take me into that editor let's do that i'm going to click on new and it says first choose a name for this template layout all right and then i'm going to click on create and then it's really slick did you see that it takes us right on into it and kind of like zooms us out a little bit and we have these this this uh blackish area here to let us know we're now in the template editor and so this is where all of those page building theme building blocks come into play um so uh we can so this is like the content of the page so i can start adding things around it and if i've chosen this page template it will insert those in there so here let me just do something simple i'll go ahead and let me do a search for the site site logo there it is site logo so i'm gonna go ahead and put that site logo uh right here that's fine uh i like it just an example so you can build what's around the page content and when i click here you can see this right here is just the post content so when i go into the list view you can see post content and this is just all the content of the page that i'm on right now so you can design what's around it we've got the little dot here i'm going to go ahead and click on save save and let's go ahead and exit this so now when i click here check it out it says adams template right there and i can select on it and let me go ahead well it looks like there's nothing to save here i wanted to save something uh let's go ahead and view this so i'm going to go to permalink and i'll click right here and let's see what it is and there we have we have what is around the post content and all i did was add this logo here and i didn't style or do anything like that so now if i went back to the default template let me click on updates and let's do another view page you can see it's back to how it was so that is how you're going to create templates and edit templates and select templates i know that was a lot and that's why i did the table of contents and i tried to move through things very fast i'm pretty excited about what the future holds for wordpress and i like how they've done it here i've got to say that now it'll be interesting to see what happens in six months when they go full blown with what they're calling full site editing and i'm just excited for what the future holds and i can see this as being very useful and powerful and i totally encourage people to start getting used to the block builder it ain't going nowhere uh it's here to stay and so we might as well just get used to using it so i have a bunch of tutorials here on using the block editor to help you get comfortable with it a lot of it is that new list view of knowing what you're clicking what you're editing clicking into the right area the right layer of what you're building and it makes it really easy now with all of these enhancements so that's it hook brother up and give this video a thumbs up so more people will see this video share it on your social media platform so people can know what is coming and what is right around the corner i invite you to subscribe if you're not subscribed thanks for watching the video tell me what you think about it down below and i'll see you in the next one

Channel: WPCrafter.com WordPress For Non-Techies

Views: 31,743

Keywords:

Id: dt5Ffg291Xs

Length: 29min 46sec (1786 seconds)

Published: Tue Jun 15 2021