In this
Video Transcript
(*This transcript is auto-generated from YouTube so there may be grammatical errors and typos in places).
Hey, it’s Lee with WPLauncher.com and I’m really excited about this video. I am going to show you how to use the create portal functionality straight from react and if you look at reacts documentation it says a portal provides a first-class way to render children into a Dom node that exists outside the Dom hierarchy of the parent component and so in the case that I’m showing you this becomes really important when you’re working in the Gutenberg editor because when you add a block you’re kind of your block is added within this canvas of the Gutenberg editor within the hierarchy of it but the block I’m building I want to add a modal block so that anybody can easily add as many modal’s to their WordPress site as they want and the problem you run into with adding modal’s is they the modal container cannot be located within the hierarchy of the page so let me show you really quick what I’m talking about this button right here will trigger a modal and I’ve got some modal options over here in the inspector and the problem is when I add this component without using a react portal the modal will load within the confines of this block there’s not really an easy way to take the modal container and at append it to the body of the page well that’s what these portals do and you can surface a react create portal function through the WordPress object that is passed so the first thing you need to do here let me show you really quick what I’m talking about if I click preview modal and I’ve built a modal block and I’m inserting the container the modal container in this block okay so if I click preview modal I got my backdrop here which shows because I’m using bootstrap but that it doesn’t matter I’m gonna get rid of that but notice here how the modal is rendered within that block because it’s rendered within the hierarchy of the page of where that block is in the page but we need to create a portal to the document body and it’s actually really easy to do the way I figured out how to do it is looking at the Gutenberg documentation for the air modal component because they they actually use a modal component for their keyboard shortcuts and we could use this but the only problem is we also need to use it on the front end too and so it gets a little tricky so the easiest implementation is to do this ourselves okay so how do we do this okay in when you’re in queueing your scripts for your custom block you need to make sure to in the dependency section here and cue the WP element dependencies and I’ve got the object down here and I’ll show you what this pulls in it pulls all of this stuff in here and here we’ve got this element and within this element dependency that’s passed down we have the create portal functionality and if you check out the documentation for portals in react it tells you exactly how to use this this is actually like really like this what we’re using is react within Gutenberg so we can refer to the documentation when we’re using this stuff and all you do is in the render function you use this create portal function and return the children you want rendered okay and then the dom node you want them rendered in and so i move if we head on over to my modal here I’ve got my modal HTML now let me make this a little bigger here okay and right now I moved everything into a component called mortal modal portal and below I have my modal class that contains my modal portal so I basically took everything out of this modal container and put it into a new component called modal portal because we need to use this create portal okay so I’ve got a separate component that I’ve created here and again we just follow this documentation so return and we pull in from this WP element object to create portal function okay so now we can use this create portal we don’t need to write react Dom or anything because we’re just accessing again we’re accessing the function right out of this element object okay and so I’m gonna go to my modal portal here and in the render function and let’s pull this documentation up where we returned it we just wrap this in a create portal function okay and we have our children here this fragment that contains my modal container and the links to my modal and at the very end of this we’re just gonna add a comma and the Dom node I want to attach this to to is document body and I’m just gonna use regular old JavaScript here so we want to attach the modal container to the body instead of I you know in this place in the block we want to we want to create a portal from this block to you know out a place outside of the page hierarchy and that place is the document body okay and that’s it that’s all we need to do so if I hit save and again check this out look it’s not working I’m gonna refresh the page here and let’s insert this again and if I click preview modal now instead of it appending it to that block its appending it to the document body and here is that same HTML that we see here we’ve got our modal container and within that we’ve got our modal header modal content modal body modal a head content modal header modal body and now this thing functions properly okay within the Gutenberg editor so it’s really easy way I if you have any questions please leave it in the comments but it’s really easy way to take a block or component and attach it somewhere else within the hierarchy of your page so it’s not limited to the place this component is added in your custom blocks well if you’re a theme creator or developer you need to check out WPLauncher.com. We make it really easy to earn recurring revenue from your themes, so check it out.