Adding Rich Text Content & Registering Block Format Types in the Gutenberg Block Editor Development

welcome back to the channel in today's video I'm going to show you how you can have extra formatting inside the block editor and what I'm talking about is you selecting maybe a text here and you can make it Bolder italicize it or you can actually go ahead and strike it through or even use something that is mathematical like having this two selecting it then you make it a superscript so it's basically up or you can make it into a subscript the way the editor sees this is that when I go to inspect this whenever I select this and hit that button it just inserts this particular HTML tag and then it gives it this data attribute that can be used for by JavaScript to do a million on one things now luckily or initially when the block editor came out we didn't have all these options that are available here and you realize that there are number of those very options that are missing in this particular contact so what I did is that I went and wrote a plugin that allows me to add more formatting so I'm going to go to the section here and you have this plugin which is called a simple HTML Rich Text for the block editor quite a mouthful but uh it just makes the HTML experience a little bit better so at the time it added a subscript superscript which we have seen that those have since been added to the block editor by default so I need to release a new version where I'm deprecating these two removing them and then allowing these other ones stay because those are not yet available in the block editor and to be honest I don't think they'll be coming anytime soon because they are rarely used but they are people who actually need them the other reason that I need to do this is that the tooling has become much better and you're going to find that there's a lot of code that we're going to remove and make the build process a little bit easier so if you want to see how we actually develop this then let's jump into the chord so I'm going to come back to my plugin section and I'll open my integrated terminal and what I'm going to do here is use the npx command and I'm going to say add WordPress and then I'm going to use the create block command and I'm going to make a new scaffold so that I can pick out what I really need to build so I'm going to use Simple HTML as the name of my plugin I'll hit enter and allow this to be scuffled by the scripts from WordPress I'll choose why to say yes and allow node to pick all the packages that I needed and then throw them in the back end now that we have our scaffolding done I'm going to just use this command to change the directory into simple HTML and then I'm going to use npm stats to basically continuously watching for any changes that I make inside the files as I edit them so I'm going to go in here yeah I basically don't need the save.js file and once I delete that you'll see that this build is failing and that is simply because our index.js is importing this file so I'll remove that and I'll also remove this as well this is going to become a little bit cleaner and we're going to be able to do a couple of things so when I save this this is serving very well I'm going to do a little bit more of cleaning I'll pick up these files if I need them and then use them whatever I'm not going to use any CSS because I'm not going to style I'll leave the styling to whoever wants to do it in their theme I don't need the stuff in the editors here so I'll remove this and also the style as well remove that with this then I can begin to basically build my blocks the way I want them so I'm going to come back here and reload the plugin section I'll activate the simple HTML and the next thing that I'm going to do is actually go in the section where I have a page sample page and I'll be able to test the different things so I'm going to go to my edit and I'm going to remove all these other stuff that I don't need right now I'll always add stuff that I need later that means I can go in my blog.json and I can actually comment out all this style stuff because I don't need it it will break my Json but if I clean this out and hit save then run npm start again you'll see that this compiles well and I don't have these files so I can check them out because I'm not going to style I'm going to leave everything that concerns styling to the theme I'm going to just leave only the formatting of the text with the HTML and the style can be done by the theme as it should be I actually don't need also the edit.js I'm going to remove this I'll trash it and then I'm going to remove it from here hit save and you'll see that this is compiling well I'm going to do all my code in this particular file so that I can complete so inside the WordPress documentation we're going to find that we need just a couple of things to get us running the first thing that we're going to do is we're going to register a new format so I'm going to copy all this code that is here I'll paste it in our editor and then I can explain whatever is going on I'll remove this block type because we're not registering any block types and I'll just steal this comment here and put it down here so what I want to do here is I'm going to copy the link where I'm getting all this from so that I can have this well documented and this registers a new type format and you can see that now in here the first thing that I'm going to pass here is actually a namespace so for the namespace I'm just going to say simple Dash HTML Dash reach Dash text for Block editor and this is a quite long so I'll leave this as my name space for what I want to have and then the next thing that I'm going to do is hit save here this will rebuild I'm going to come back to my editor and I'm going to reload this if I try to select here you're going to see that there is nothing showing up just yet because we've not created a button but what we've done is that we've registered that particular format and if we want to test that that's the case in the documentation here they show us that we can go for the wp data select and we're going to look for the rich text so basically looking for the call Rich text and get all the formats back so that's what I'm going to do I'm going to inspect this section I'll go in my console and I'm going to paste this and hit enter now you will see that we actually get back an array of registered types and you'll see right here that we have all the core items and we don't have ours so could it be because I have a bad name space I'll reload this page press our code hit enter and you're going to see that we have our namespace showing up and we have this properly showing and we have this sample output and the tag name of samp now if I try to select this click this you will not see anything so now we need to actually register button that can be clicked on and it will trigger a change so I'll go back to our documentation and you'll see that here we need to use the rich text toolbar Imports and I'm going to copy that come back here and add it and we need to use it to develop our own custom button so I'm going to copy this code as well and then I'll explain what's going on so right below here we're going to use some JavaScript and say fine we want to make a constant and this constant is going to be a button and for this button we are going to pass in some Properties or attributes to it and the first thing we want to do is you use this very component that we imported which is the rich text toolbar button let it have an icon of editor code it will have a title of this and then when we click it it should be able to console log whatever is going on so after creating this button we need to actually pass it to our format so we come here and then we say for the edit we want to pass the new button that we've added so I'll hit save and I'm going to go back to our editor I'll reload this page when I select any text hit this drop down you're going to see that we have this button which is called sample output and basically when we click on it it's not going to do anything but the button is now there and the only thing that it is doing is that it's console logging our toggle format which we already added inside our code so every time we select it click here click sample output you'll see that now we have twice the number of Togo format in our custom bat when we passed a number of props I'm going to go in there and say okay now we need to have the particular props that we want we want to see when it is active what happens when we have an unchanged so we're going to have an unchanged and basically that will happen whenever we we have click done here and then the other thing that we want to get is the value of when there is a change happening inside our code so here what happens when we have the on click we're going to bring in our method of function we are going to have the change Happening Here on change and we're going to toggle the formats and that will be a function itself so when we talk about this we shall have a value that is passed in so after getting the value we are now going to pass in the type as well so the type we want to have is actually what we've registered here as a type so I'll copy this and then I'll pass it in here and then I'll hit save this will compile well we don't have any issues happening so the other thing that I need to do is comment out this console log because we don't need it and after getting the on click we need to pass in our is active so we're going to find out what happens when we're in the active State we're going to pass our Kali brackets and we'll say we shall pasta is active in here so I'm going to click save on this so I'll hit save this will compile very well now let's go back in here we'll reload this page and what happens is we're going to select some text here I'll click our drop down I'll choose our sample output and we have some errors happening here because toggle format is not defined says this is not defined so the reason is this particular method or component is actually not being called in from the rich text so I'll add it here and import it then I'm going to hit save that will recompile I'm going to reload this and then I'll select this site navigation I'll go down to the drop down click sample output and you'll see something has changed about this the text is different and that is because when I inspect this you're going to see that we've wrapped this new samp as a tag around it and this is coming from this tag name which is samp and we don't pass in a class but if we wanted to have a class we could have passed in a class and if I reload this select this again choose the sum output if I go ahead to inspect this you're going to see that now we have sump but it has a class of null wrapped around it so you'll be able to Target that and then you can use it to style in the theme or wherever you want to do this now in my case I don't want to use any class names so leave that as null I'm going to change these particular tag names depending on what format is being called now that we've created one button I would like to replicate and have as many buttons as I had before so what I'm going to do is have a variable here const and I'm going to have an object filled with data that is going to represent all the other buttons titles names and their icons as well so I'll put this and try to format it into something that looks much better than what we have here something that's legible we have the title we have a character which could basically be a shortcut that can be used and then we also have the icons and these are basically Dash icons I'm just getting their name minus the word Dash icon so I'm going to comment this out because they're already part of core I don't need them and if I wanted to then I would first have to unregister the the type that is there so there is the unregister format type which you can actually pass in here and say let's have an and then register and register format type and then you can pass in the formats that you want to unregister if we hit the old item that we have here we can be able to go in and say okay we want to unregister the core subscript and the core superscript so I can actually come here and then pass in these names KOA slash subscript and then I'll duplicate this and then say the superscript as well now you'll see that the editor is screaming at us that this is not available we just need to go back here where we have the register and we can pass in the unregister so if I hit save you'll see that this is now actually all okay if I come back here and reload this page we use our earlier code reference if I hit this I'll make Corrections and have this as superscript so let me come back here and reload this you'll see that we now get this error that says these two are not registered and then I can basically re-register them in my own way if I want to I can undo this and then what we're going to do here is we're going to use the buttons which is an object of arrays in it and I'm going to say for each one of those arrays and what we're going to be getting is we're going to be getting a button from each one of them and then shall use the short Arrow to say then let's pass a function in here to each one of those and basically what we want to do is get all this content that's down here and then move it inside this section so I'll go ahead and tap this backwards so that we can see what's happening for each one of these we are getting a button and I'm going to copy this button and we're registering a custom button and saying it should have all these values and then we register the format so to make it Dynamic I'm going to change what we have here add a name space in here and then put a slash and then add what we have here as button and then I want to get the name of that so after the slash R button I need to wrap this well and add the button so that it's reading it as a JavaScript variable and I'm going to say let's get the name the other thing that I'm going to change is I'm going to change and we'll have the button title and then we'll also get the tag name and we are basically picking it from here so tag name and then the class name we're not passing any class names at all the other thing that we need to do here is now change so that we have the same name space as what we have here so we change the type and say let's have the same name space and then we also need to pass the icon and the title here so I'll copy this and say for the icon I'm going to wrap this in these color brackets and I'm going to pass in the icon and then do the same thing and pass in the title as well so this will be the title I'll hit save on this let's go back in here and see if we're going to get the Mac ins delete site small and Ma and the other pieces so I'll reload this page and you'll see that we get this error because the call is telling us we cannot use this tag name of sub and so on so I think it would be full honey of me to just go ahead and register this so I'm going to just comment this out since I don't need them anyway I'll reload this and we'll look in our console log we still have and registering this and I don't want to do that so let me remove everything that we don't need remove this as well save this comeback reload we have a clean console when I select text here and click down here you'll see we have the deleted when I click on that and inspect you'll see that we have Del and Del closing so we have two HTML tags one opening one closing I'll select this we also have the one for highlighted you see we have the one for marked and if I select this text you can check the one for inserted and you'll see that as I add this depending on the styling that is already in the theme some of these things are already styled so I don't need to do any of that so I'll select this and add other things like small and you'll see that this becomes small I'll click on this and then we can also so add site so you can see that my old plugin is working well it's using the new build tools and I can do with it whatever I want to now there are other ways you can make this code a little bit cleaner and basically that's destructuring and making sure that you do not have this button.name and so on if you don't want to have it so you can destructure that so we're not using the blocked Json in here to import any new information the only reason I'm not removing all this is because I'm actually enqueuing our editor script and if I want to take it away then I would have to build stuff the old way which is basically say I want WP and Q then call this file and call all whatever is needed but that is going to lead me back to what I previously didn't want if you enjoyed this video and enjoyed seeing me actually build this stuff that is usable in the editor don't forget to share with your friends subscribe to the channel and give this video a like stick around because I'll be making more block editor stuff otherwise enjoy whatever you're developing