 Welcome back to the channel. In today's video I'm going to show you how I'm converting this particular site from a classic theme into a block theme. Now there's something of particular interest I wanted to show you because this is something that we built in the olden days. So if I wanted to have this text look a little bit different and it's using this old editor in WordPress, I would need to probably go into my text area and say maybe this is going to have an h4 with a class of question and then I'll close off of course h4 hit save or update here and once I reload here I would get this new change and that is because I have this class styled up, the class of question is actually styled up here in my theme. Now this becomes relatively harder for people who are not good with html and so on. So what I did is I built this little icon or basically I extended the tiny mce in the editor and what you would do is you would select this text and click this and that would automatically create you this h4 tag with this class in here. So let me hit update here and you're going to see that this is reloaded. Now if you want to see how I made this little extension in the tiny mce let me know in the comments so that I will show you how to do it if you still are using the classic editor but my advice would be that what price is changing in the next five years the tiny mce might not be something you want to use so you need to use the block editor. There is a way of doing something similar in the block editor and that is available for us to use so I'm going to do that first and foremost is I'm going to change this whole editing experience from what we have here because you will see I'm doing so many things like adding a gallery I needed to extend the tiny mce then having the short description that is also tiny mce so that I could be able to have all this information coming in here and then having a brief let's say I do this Lauren Mipsum for the description hit update so that you see the short brief here so the first thing that I will do is I'll go to my editor I'll go inside my theme I'm going to go to the place where I register the custom post type and that is within this file and I will go to I'm going to look for Safari's post type where we have it here and the first thing that I will do is I'm going to show in rest so I'm going to duplicate this here and say show in rest and that will be true so that when I come back here and reload of course it's going to ask me about HTTP I'm going to ignore that and then now you'll see that we have everything here and we can convert this to blocks now of course this is with h4 and you can see that right now I can actually change the text color I can change the background using what is already existing here now if I was to go and look in the editing experience where I turn on the code editor you'll see that this has a heading level of 4 it has all these classes but it no longer has my class of question which is something that probably I intended for my theme to have I didn't want to use these colors and backgrounds of all of this so the other thing that I could do is come here and say okay in the advanced I'm going to add a question in here and click update you'll see that it has the custom class of question right here but this other one is just an h4 it doesn't have that class for your ordinary user having to explain that they have to add this class of question could be laborious because they'll also forget which class that I should add here we're going to have something that you can click here in the side that can add this style to this particular text that you have here so I'm going to go back here going advanced remove this class and I'm going to hit update so that we have the very basic I'm going to add a new style to our h4 so what I'm going to do here is I'm going to create a new file and say this is blocks I'm going to add styles so everything that I do in here is going to be at the block level so I'll say let's say this is h4.php so what I need to do here is come to my functions because that's how I was registering all the files I'm going to come here down and I'm going to start adding block stuff so block stuff and I need to go get this relative path I'll paste it here then I'll get everything that I need of so I need to get this blocks.php replace it here clean up this other part so that means we don't have the ink this is just purely blocks styles so I can actually save this now and then I can begin writing my code in here so we'll open up with php add our comments and say add new h4 block style so the first thing I'll do is add an if statement and inside here we're going to check for whether the function actually exists so I'll say if the function that I'm looking for is register block underscore style because we don't know what version of what press the person is going to use so we'll have to first check if that function exists then we can use it in this function you actually have to have the block name and then you can add the properties that exist so the block name is actually going to be call slash heading now the style properties of course are an array of data and inside here we can have the name we're going to duplicate this and we'll have the label and then we can have what is the inline underscore style so we need to define this I'm going to add spaces here and say the name of this will be the question style do the same thing here and say the label will be question and then of course in this section here we can add and say the class that we want to have is question now I'll save this let's come back to our editing experience I'm going to reload this page we seem to have an error so let me go into my debug.log and we see it tells us that the function register block styles was called block style must not contain any spaces so I'm going to come back to our h4.php and the name should not have any spaces so let's just call it question I'll save this I'll come back here reload so if I select this now you'll see here we have style which is we have the default then we have the question style so if I click this question style hit update and come back here and reload you'll see that now this has a class of is style question now all we need to do is come back in here I'm now going to wpnq style and basically I'm going to have new file that's going to nq our styles so the first thing that I'll do is this will have a new safaris blocks theme as the handle we're going to add a new source and say we need to have a new file here css we'll call it blocks and inside this blocks we're going to have let's say our h4.css and this is going to have that is style dash question and the reason this is uppercase is because in here we say the style name is question let me make this lower case so that we can have this also as lower case add a dot here at the end and then of course add our brackets so I've copied the styles from the previous file and then the other thing we need to do is say let's also modify the first child we're going to append this to the nth child and we just want to get the first item in here then we can give it a padding of top zero I'm going to save this now and then of course I'll come back here and complete this and say we need to get the directory style we're going to copy from our functions and we're going to come back here to the h4 and say let's add this template style directory let's go to the css in this case slash css then we'll go to blocks then we'll get the h4 change this to css and then we'll add that it has no dependencies and then we'll say the version let's say will be 1.0 and then we'll add also this for all media types I'll hit save after adding the semicolon right here then I'll come back I'm going to reload this and we see when reloading this we also have some errors and converting this into a new theme is also going to give you issues so you need to be able to have your debug on just to make sure everything is correct so WP scripts and styles should not be registered on nqt until the WPN scripts blah blah blah this notice was triggered by the blocks theme handle so instead of using a WPNQ style script I'm going to use something from the block editor itself I'm going to look for the wordpress block editor assets nq something like that so I just need to look for yes this is it nq block editor assets and this is an action hook and we have an example here of how to do this so I'm going to add action I'll just copy all of this and then I'm going to come back here paste it and we have this action hook which is get the block editor assets and it's going to look for a function here which is this I'll just change this a bit to make it unique to my editing experience I'm going to move our style in here because that's what we need to do the only things that we can change from this section is we can say let's get the URI let me also copy the convention that they do have here I'll cut this put this here and then I'm going to replace our block path from here and paste it here so that I can also use this file time to make sure that we are having the right version of our file that is looking neat I just need to move this variable up here and then once I do that I can be able to comment this out and then go back and reload our page so I'm going to come back here reload this you'll see we don't get that error showing up as the page is loading so that means we can select this text click question one and you'll see that even on the back end we are getting this style now showing up so if I hit update here and then go on the front end you're going to see that this is not changing but if we go to inspect this you'll see we have our is question style class in here and that is because this hook the nq block editor assets only does the back end nqing of the styles however if we remove this word editor and just have nq block assets that means we can actually reload this and we'll see it on the front end and if we reload this also on the back end we should be able to have this kind of styling happening so we have this new technique that will allow our people who are editing the site have the same experience both on the back end and the front end and in a simple simple way that is memorable the good thing about this is that whatever heading tag that you use whether it's h2 you can actually apply this style to all the different heading styles and it will work so this makes it easier depending on how you want to structure the markup whether it's h6 you can still give it that same style so you can reuse the same style over the different headings so if you enjoyed this video don't forget to give it a thumbs up or subscribe to the channel and if you want to see how i actually convert the whole site into a whole new block editing experience then let me know inside the comments otherwise enjoy whatever you're developing