WordPress 5.7 – Gutenberg Updates Tutorial

thank you so much for joining me on the press avenue youtube channel my name is john and today i'm going to talk about wordpress 5.7 and walk you through some of the features and updates in real time so here we are on youtube if you haven't already go ahead and hit that like button and the subscribe button if you want to see more wordpress tutorials like this so i'm going to head over to a local install and i have updated to wordpress 5.7 and you see things like you know step into wordpress it has a little bit of spiel about it but we're going to go through each of these so i can show you where some of these changes take place the first one is the font size adjustment in more places so as for example the list block etc so i'm going to create a new post and this can work on posts or pages i'm just using the standard wordpress theme 2021 which makes the background green most likely yours will be white unless you're using a theme that changes this so we'll just say we'll just title it okay and we'll come down here to a block so this is just a paragraph block when you first start um changes that have come in previous ones and in this one i will walk you through so font size there only used to be i think four or five now you can go to extra small and then gigantic and then also if you switch this to a list switch down to second third um the font sizes are also here as well and they're the same as the paragraph all right next up is let's see insert drag and drop blocks block patterns etc and this one i love and i wish it did it right out of the gate and now here we are a year and a bit later two years i don't have to check it's been a blur um so here i am in gutenberg in the editor and before i would have a paragraph some paragraph um you know with a bunch of words in it and if i wanted to put something between these lists i'd have to hover around here i'll put a circle around my mouse to try to get this to add another okay there it is so it doesn't always show it annoys me to no end but i would hover around in here to try to get this stinking plus sign to show up and now when the post is super long this can get really annoying when you're trying to input either a media or maybe a line break or doing different things when this doesn't show um it's an annoyance to no end now you can go to plus and then you can just drag it in so just similar to other page builders like elementor or beaver builder we can now drag in say a video so i'm holding my mouse down and i can drag this where i want to ship where i want it to drop so the blue line shows where it's going to drop so click like there and there's my video i can drag some buttons in i can drop them right below here so gone are the days of hovering around trying to get this plus to show when it doesn't and now we can drag and drop the blocks in which is a huge update for me and i think you guys will enjoy it as well all right let's see what else so you can do more without writing custom code so on the cover block which is a just the image here it covers supposed to cover the whole screen or fill the whole window um you can now have the full height alignment so i'll show you that so i'll cover here if i can't find it i hit cover or sorry type cover and i'll drag this in at the top and let go i'll go to the media library i'll have one picture so i'll add this in and here it is here now it may not fully cover based on your theme um so this one i gotta check if it will fully cover uh but i will click am i in the list nope so right here it says toggle full height so when i toggle full height it'll fill the full height of the user's screen so let me say this i'll take a look at it i don't believe yeah so this theme restricts the width of this if you have one that's full width edge to edge this photo will be edge to edge full width and edge to edge full height so if you want to see that do let me know in the comments below right buttons block so you can now choose between horizontal buttons so if you have a left button or right button or say you have three buttons horizontally or you can do it vertically vertically could be for a menu it could be for different features etc so to do this we'll come back over here and go to edit plus i always type it out every time um instead of hunting through yeah there it is come on the drag is failing me i don't want it in the picture i want it above oh why all right skipping down we'll put our buttons down here at the bottom again it's not perfect but it is a work in progress so we'll call this button number one and it will do this was in a previous update to do them next to each other button number two and we'll say button number three um you can change the outline over here so i click outline to kind of have a little bit more contrast here and change it up kind of break up this here now you have to click kind of the row here um similar to other page builders like beaver builder elementor click the row and then over here i can choose horizontal so show buttons in a row or show buttons in a column so if i click column now here they are all stacked up so i think that's a great feature and gives people more options with this instead of um you know you can create them individually of course but i'm going to see this is a little more helpful then i can switch them back all right next social buttons you can now change the size of the icons i don't know too many people that use this they usually use a different plugin to get the job done but here are the social icons here and then the colors are here so when it says oh no it says the size so i'll click the icon size and i can say huge and just to show you i'll say wordpress twitter so you can see them youtube so comes in the standard branding colors and then to change the colors which is not part of this update you can click the icon here and this is pulling colors based on this theme the 2021 which none of these really make any sense um but if you fill this in it brightens it up there we go all right next up um this one i i can't really show you i mean i can and i can't the wordpress back end now has um a different color palette and it's to be more accessible so the wcag 2.0 aaa recommendation contrast ratio has been changed throughout all of wordpress 5.7 then they added this kind of bar that chases you down the side here because what if you can't see this light up now you can see the bar on the side kind of grow out it's pretty fast but the effect of it comes out from the left side so you can see where we are in the menu so that's great they're cleaning this up a little bit more this was a controversial issue a year or so back i don't know where it's at now now this one i tried to replicate by making my site um http instead of https and i could not find this button so i'm going to dig a little bit more into this i actually have a course on doing this and our number one youtube video is how to fix um how to find and dig it out in the link how to fix http and make it https so now you can fix it in a single click um so this will nullify a lot of um wordpress plugins like the simple ssl one where you just click in one click and it fixes everything now i read into this a little bit more and it says when you go to your settings and change this from http to https and you come down here and hit save it'll change apparently the whole database to https before i would recommend a search and replace and replace everything in the database because changing this would do nothing so that's just something to consider um so go back here to updates uh when you do this so i'm gonna test it out and see if it's perfect or not i think it might be what i'm curious about is maybe something you've embedded or i guess iframe wouldn't make sense um so maybe it does fix the whole database we will see so if you have any issues with the http or https do let me know i've made quite a few videos on it and i'd love to help other stuff in here so there's a new robots api uh lazy load your iframes so i did test this i tested it by not adding the specified height and width and it does not add this and then when you do obviously it does um so to show you let's go back i will go here and type code code let's say iframe source equals i'm doing this on a local install i just made a video the last video actually on how to do this with local wp uh we won't do a title and we'll end this out frame so only load this local one here so this is without the width and the height so we will add that width equals let's say 500. come on height equals 500. i'll click update view the post here we are here it did not load it hold on oh i know what i did we'll copy this over here this is what i get for doing a live and not drinking enough coffee all right so i want to do the html block um not the um code block so there it is there so i'll go back to update view post and then we'll come down here so there's my iframe there's the one that obviously didn't work and now if i go to view source and search for iframe frame right here it adds loading equals lazy so there's kind of two ways to look at this you can either add this yourself or you can actually be lazy and not add it and just add your width and your height which you definitely want most people would do a percentage on this to make it a little easier to read than it was before all right um they have a field guide as well but not all the details are in it you really have to dig through it um for example like this one here you can't see the you can kind of see the change um to make more contrast all right so that's it for wordpress 5.7 and the changes if you have any questions about 5.7 or 654321 any of them please let me know in the comments below if this was helpful i'd love to hear from you in the comments as well go ahead and give this video a thumbs up and if you want to see more wordpress tutorials go ahead and hit subscribe with the bell thanks for watching