This is a pivotal moment for anyone using WordPress.
WordPress 6.2 is coming out in one week, and it draws the line in the sand with all the page building tools on the market.
And that is because WordPress now offers a complete theme builder along with page builder
And it’s all very simple to use, especially if you have used WordPress at any point in the last 4 years.
But there is one catch, which I will cover in this video along with all the new things coming to help you build amazing website experiences faster than ever
So let’s dig in.
Table Of Contents
00:00 – Pivotal Moment
01:00 – One Gotcha
02:11 – Use a Block Theme
02:48 – Classic Theme Vs Block Theme
03:06 – Site Editor
04:18 – Theme Styles
04:53 – Style Book
06:24 – Header Switcher
07:04 – Footer Switcher
07:26 – New Navigation Block
08:59 – Add Anything To Navigation
09:48 – Push Default Styles
10:35 – Easily Add Custom CSS
10:58 – Add CSS To Blocks
11:26 – Fluid Topography
12:28 – Sticky And Transparent Header
13:02 – Font Loader
14:00 – Hide Page Title
14:36 – Hide Header Footer
15:24 – Copy / Paste Styles
16:09 – New Panel Icon
16:26 – Tabbed Settings
16:47 – Outline Moved
17:17 – New Media Inserter
18:34 – Pattern Inserter
19:44 – Will You Use a Block Theme?
EXCLUSIVE WORDPRESS DEALS 2023
🟡 SureCart — https://www.wpcrafter.com/surecart (SAVE 50% Auto Applied)
🟡 SureMembers — https://www.wpcrafter.com/suremembers (SAVE 50% Auto Applied)
🟡 Presto Player — https://www.wpcrafter.com/prestoplayer (SAVE 33% Auto Applied)
🟡 Astra Theme — https://www.wpcrafter.com/astra (SAVE 10% Coupon WPCRAFTER)
🟡 CartFlows — https://www.wpcrafter.com/cartflows (SAVE 40% Auto Applied)
🟡 Cloudways — https://www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 BuddyBoss — https://www.wpcrafter.com/buddyboss (SAVE 10%)
* Want to offer a discount to WPCrafter subscribers, contact me on my website
BEST WORDPRESS PAGE BUILDERS
🟡 Spectra — https://www.wpcrafter.com/spectra
🟡 Elementor — https://www.wpcrafter.com/elementor
🟡 Beaver Builder — https://www.wpcrafter.com/beaverbuilder
🟡 Divi — https://www.wpcrafter.com/divi (SAVE 20%)
BEST WORDPRESS HOSTING
🟡 Full List — https://www.wpcrafter.com/hosting
🟡 Cloudways — https://www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 Hostinger — https://www.wpcrafter.com/hostinger (SAVE 75%)
🟡 NameHero — https://www.wpcrafter.com/namehero (SAVE 70%)
🟡 SiteGround — https://www.wpcrafter.com/siteground (SAVE 70%)
CONTACT WPCRAFTER
☑ Website — https://www.wpcrafter.com
☑ Facebook Group — https://www.facebook.com/groups/wpcrafter
☑ Twitter — https://twitter.com/wpcrafter
☑ Twitter — https://twitter.com/adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link.
This is a pivotal moment for anyone that Uses WordPress because a new version of WordPress is coming out version 6.2 and It completely draws the Line in the Sand With all the page building tools on the Market and that's because WordPress now Offers a complete theme building Experience along with the Page Builder And you don't even have to pay for it It's all just built in and what's Especially nice is if you've used WordPress at any point in the last four Years it's so easy to use this new theme Building experience because you already Know how to use it but there's one catch That I'm going to cover in this video Along with everything else that's new in This version to create faster websites That are better so let's just go ahead And jump right into it this is the Screen you'll be welcome to when you Update to WordPress 6.2 next week and It's going to list out a lot of the new Things that are there of course I'm Going to show you all of that in this Video go but I'm going to start with the New theme building experience and first I have to cover like the first gotcha For it typically when you want to add a New theme to your website you can look Here at the theme directory or when You're on your website you could go to Appearance themes and then you can click This button here that says add new but
Not all of these themes that you see Here will be able to take advantage of This new theme building experience you Specifically have to use what's called a Block theme and as you see there is a Special option here that says block Themes and if you're here on the WordPress website that same option is Right there to list out these specific Block themes and as you can see there's Not quite as many of these as the normal Themes so you see here there's only 256 And you can see here the normal themes There's over 10 000 of them when you're Using a block based theme you'll see This here where it says editor now if You're using one of the traditional Themes or what are now being called Classic themes you won't have this Editor option it will say customizer now For this video I'm going to use the Spectra one theme which has not been Released just yet the Specter 1 theme is A block based theme made by the Developers of Spectra now this theme is Free and it's already been submitted to Be included into the theme directory Here it's not quite approved just yet But it will be very soon but I'm just Using this theme not to specifically Show it off I'm just using it because It's the block based theme that I'm Choosing to use in this video and if you Want to use the new WordPress theme
Editor you're going to need to have a Block based theme as well now I know it Could be a little confusing what kind of Theme do I have is it a block based Theme is it classic theme what's the Differences what's the pros and cons Subscribe to the channel here because I'm going to have a video out on that in The next day or so and you'll be able to Watch that and have a full understanding Of the difference between the two to Access this new theme building Experience all we have to do is click Here where it says editor and it's going To take us right on into it now this Theme building experience is going to Give you everything that you would Expect you can set all of the global Styles the different styles for your Website you can put in visually a Different header or a footer for your Site also a different header and footer Of different parts of your site you can Create page templates blog post Templates archive templates you can do It all right here all visually using the Block editor which you probably already Know how to use so if I wanted to create A new template say for a blog post I can Click right here where it says templates And here's the ones that come with the Theme I can click into any of these and Start customizing it to my liking if I Want to add a new one I can click this
Plus right here so what happens is when You first go into the editor you have This experience and what's nice is you Can resize this just like that to see What your website will look like in Different screen widths and then you Could just click into it with one click And now you're into the editing Experience of your theme so the first Thing you would want to do is click this Little icon here on the top right and Choose the styles that your theme makes Available to you and you can also Customize them so I can click right here Where it says browse Styles and this Theme right now provides these two Styles so here's the light mode and then Here's the dark mode and you see one Click and it completely changes they Already have about seven more styles That are about to come out when this is Finally made available in just a week or So but for now they have these different Styles right here let's go back now the Next thing you might want to do when You're using a theme Builder is to Customize the individual styles for the Components that make up your website That would be maybe the change the Styles of your headings and your Paragraph text and your buttons and all Of that well there's something brand new Called the style book and to access that You simply click on this little I icon
Right here and then it reveals this Different interface here with these Different tabs so the first tab is text And I can see what the text will look Like on my website and tweak it so Here's my different headings here's what Paragraph text will look like list and It goes on and on and we also have a tab Here for media what that's going to look Like images and your galleries different Things we have design right here and This is going to be like your buttons as You can see widgets and then there's Also some theme elements for your Headers and Footers now what's nice is You can click in here and customize this Visually and it takes effect across your Website so if I don't like how my Headings are looking I can click on text I can click here on the headings and Then over here on the right I can Customize the topography and the colors For my headings just simply click on Into it and here it is and then when You're done with the style book simply Click on the I again it disappears and Your website comes right back so now Let's take a look at the parts that make Up your website and we always go from Top to bottom so let's take a look at The header so I can click right here Into the header and you can see there's This purple border and you can see right Here it says header now this is
Something that I really like if I if I Don't like this header layouts all I Have to do is click the three dots There's this option here that says Replace header and then I get this nice Pop-up that appears with different Header patterns that I can choose so if I want say my navigation in the center I Really like this layout right here I can Click on it and look now I have a brand New header layout and it's also the same Down below for the footer if I scroll Down here and I click on the footer you Can see it's also highlighted in purple I can click the three dots I can choose Replace footer and I can choose an Alternative layout that I might like so Maybe let's go with this one right here And now I have a different look for my Footer now another nice Improvement to Make this easier is there's been lots of Enhancements to the navigation block Right here so you can just click into Different parts that you want to work With or you can also reveal the list of You and you can see all the different Parts that make up that header and these Are the parts that make up this home Page so I want to say add a menu item It's actually quite easy all I have to Do is Click right here where it says Navigation And you can see right here there's a Plus so let's go ahead and click on the
Plus and it's added a new menu item Let's click on it and I can link it to Any of the pages on my website it's Pulling up some here or I can search for A page so I'll go ahead and choose my Services page right here and when I Click on it the text changes to Services Now what's really cool there's multiple Ways of ordering this so I can click This Arrow right here to reorder it or I Can click into the navigation block Itself and this is brand new over here As well on the right this is a drag and Drop ordering system and customization System for your navigation so if I Wanted my services to be higher I Probably do I want it right next to the Home I just had to drag and drop it like That I can click in it I can customize The text but I could have customized it Directly here visually and here's the Link I can add whatever additional d Details that I want it's all drag and Drop done visually but wait there's more That you can do here when you click on That plus there's different elements That you can add to the navigation so You can add a page list it's pretty much Going to create a drop down menu for you You can add the site logo and this makes It super easy to have that layout where The site logo might be in the center of The navigation and you'll have some of Your navigation on the left and some on
The right you can add social icons as Well as a search so I'll go ahead and Click right here on the search and now I Have this search option here which is Actually not what I wanted so let's go Ahead and remove that you can see it's So much easier now to work with this Navigation system that has been Completely revamped it's way more useful And easy to use now I already showed When you click here you can customize These Styles so topography colors even Though layout width you can easily click Into these and do it but there's also Something really cool and this is this New push the default Styles let me show You what that is so I have this heading Right here and hey it's quite nice let's Go back into the block settings right Here and I can start customizing it any Way that I want and then when I scroll All the way down and click here into the Advanced panel there's a new option Right here that says apply globally so For some of the different blocks that Make up your website this is going to be An option you also have it here with Buttons you can also customize those Here visually and then push it to be a Global style now what's also new is There's a new location to put custom CSS It's a little buried so if you click Right here to show the Styles panel then There's these three dots right here like
I said it's a little buried you click on That there's this option here that says Additional CSS and here's where you can Add CSS that will be applied across your Site there's also something very nice That's new and that is the ability to Add custom CSS to individual and Specific blocks so here's my headings so When I click on it there's this option Here that says additional block CSS and This would apply only to this particular Block so the same would be for my button If I want to click right here for my Button you can see I can add some Specific CSS that's only going to apply To that button and lastly one of my Favorite aspects of using a block based Theme is this New Concept that has been Introduced called fluid topography and What this is is the text on your website Will automatically resize there's no More having to set something specific For mobile and for tablet it's Automatically going to resize Dynamically as the window gets more Narrow and see I can demonstrate it Right here and you'll see now the text And everything is going to start to Shrink perfectly depending on how wide The viewport is just like that and so This is called fluid typography it's Very nice and it makes it so you're Creating responsive sites with less Effort and that's the theme Builder
Features that come out of the box now Depending on the Block based theme that You use they can also add some features So let me quickly show you a couple of Those features so I think an essential Feature is with your header to make it Be sticky or to be transparent and so The theme adds those in this case so I Can click right here where it says Header and we have these options here Now it's already set to transparent mode But when I toggle this off you can see It gives you a nice easy toggle to make The header sticky or to make the header Transparent and you can toggle that on And now this header is a transparent Header let me show you that I'll click On view and I'll click on view site and You can see we have a beautiful Transparent header now another General Problem with block themes is with the Loading of fonts we're used to with Traditional themes being able to see a Long list of fonts that we want to Choose from for our site but it doesn't Quite work that way with block based Themes because of some performance Issues and I'll get into details about That in the video I'm making comparing The themes the different types of themes And so when you click in here to Topography and say you want to customize The text font well you can see right now It's only showing this one font and
That's because a block based theme has To specifically declare support for the Fonts that are going to be available and It's not a good idea to make them all of Available because there'll be Performance issues so before the Spectra 1 theme is made available they're Building a font loader so anyone can Choose the fonts that would be shown Here so that's another enhancement that They're adding now I'm outside of the Site editor and I'm in a the normal page Editor another feature they've added Here that I think is commonly needed is An easy way to show or hide the page Title I know for me on pages I don't Like to show the page title and the way They've done it is when you click into It they've added this I here this eye Icon and you click on it and then it Grays out the title like that and that Is to make it so on the front end the Page heading will not show on this Particular page and if you want it back You can click in there and you can turn It back on and lastly very common is Some pages you might not want to show a Header or not show the header or the Footer they made that very easy you can Click this icon here on the top right And then there's a simple toggle so if This page I didn't want to show the Header or the footer or maybe just not Show the footer and show the header
You've got these options right here it's Just a toggle so those are some of the Common things that you might miss Switching to a block theme you just want To make sure you choose a block theme That's going to have those features that You're used to I've tested a bunch of Them they don't all have those features So I just wanted to kind of show you Because now you know that those aren't In most typical block based themes and They're not coming in the site editor so There's definitely a place for choosing The right block theme but now that we're In the editor let me show you some of The changes that you're going to Experience in there let's start with Native copy and paste Styles now if You're using a block package they've all Built this in so that you've had access To it but now it's in the core of WordPress so I've got two buttons here I Can click right here on this button and They kind of hide the options so I have To go to this little drop down here and Do copy Styles I'm pretty sure at some Point though move it and then I'll click Right here and I'll do the same drop Down and I'll click on paste Styles just Like that I'm sure they'll make this Easier in the future and if you notice There's an also this is uh I'm using the Spectra plugin on here and this is where They put there so they pull it out which
I think is better to put it out here on The toolbar like that but now this is a Native component inside of WordPress the Second change I don't know if you Noticed over here on the top right this Icon is different before I believe it Was like a click wheel and now it's just A different icon to let you know by just Glancing at it that when you click on it It's going to pull out this setting Panel so that's a nice little bit of Refinement there was another change I Don't know if you picked it up when you Are in one of the core blocks now the Settings for that block are broken up Into this new tab system so the first Option here is the settings for it and Then the second option here is for these Styles for that so you're going to see This new tab system and in all the core Blocks the Third change is there used to Be an icon up here that would give you Some information about what's your on Your page it would break down the Headings and all this kind of stuff it Would count the words it would do all Kinds of things like that and it's still There the way you would access that is You would click on the list View and now It's named the document overview and Here's to see the list view but there it Is outline and you can see right here 22 Characters and four words that's all I've added to this page now the next
Improvement I like a lot and it's an Easier way to add media to your layouts So when you click on the plus now you're Going to see this new option right here That says media and when you click on it It's going to show you all of the images That are in your media library so you Simply click here and this panel shows Up right here and you can click on Anything and boom it gets added right to The canvas but they've also brought in Openverse and open verse is this online Catalog of images that people can add Images to it's all open sourced and all That kind of creative common stuff so I Could be saying some of these things Wrong but the point is you can go here And you can search for anything and There might be a picture there that it Has what you need so if I like this Picture right here I can click on it it Downloads it to my media library and as You can see it's added it right here now It's also added the proper credits for It I don't know what's proper or Improper for this you could turn that Off right here I don't know if people Want those credits or if it's a Requirement but the option is there to Take them off if that's not what you Wanted just make sure you're following All the guidelines of that image Repository and lastly also inside there Was this new patterns tab I think the
Pattern stab was there but I think the Experience is a little bit different so If the theme that you're using provides Patterns you can click on these and Guess what you're going to see all the Different patterns that are available in The way that they've organized them just Like as you can see here so if I wanted To say add this Banner right here to my Layout I can simply click on it and you Can see it has been added right there to My layout and you can pretty much Start Assembling websites with adding the Different patterns that you would for a Full page layout now there's only one More odds and ends that I didn't cover And that's because I don't see myself Using it and it's down here it starts Talking about that here it is focus on Writing with destruction free mode it Just puts your experience into this Distraction free mode and it's made just For writing I guess it might be good for People that write a blog post inside Their site I do it in Google Docs so I Don't do that inside of my WordPress Site but you might find some value out Of this if you do lots of writing now in The comment section down below I want to Hear from you what do you think about This new WordPress theme Builder that You get when you use a block based theme And on your next project are you going To try out or switch to a block based
Theme from a classic theme I for one I'm Switching wherever it makes sense and in Most of the cases it totally makes sense For me to make this switch especially Because for e-commerce I don't use Woocommerce anymore now I use short cart Which is already fully block based I Already know how to use the site editor Because I've been using the block editor All this time for me it makes sense in Most cases now if you want to know all The differences before making that Choice make sure you subscribe to the Channel because I will have a video Comparing the two and and and fully Covering the pros and the cons so you Know exactly what you're getting Yourself into but it's as clear as they That the future of WordPress is the These block based themes and I'm going To make that shift right now the Performance benefits are there the Simplicity is there I love it personally And I've already started making the Switch so anyways that's it for this Update and for this video if you could Give it a thumbs up I totally appreciate It and I'll see you in the next video
