I Asked ChatGPT To Do A $5000 WordPress Job...

so a few months ago I was looking through WordPress jobs on upwork and I found this five thousand dollars per month job for making custom Gutenberg blocks I instantly wanted to apply but I had just one small problem I had no clue how to make a Gutenberg block sure I've worked a lot with WordPress and I have some basic coding skills but I'm not a programmer and I've never built a WordPress plugin like this and I had no idea where to even start so I couldn't apply for that job but ever since then I wanted to learn how to make a custom block for WordPress and now that we have chat GPT I wanted to see if I could use it to learn how to do this much faster than before so in this video I will use chatgpt to try and make my first ever Gutenberg block but what kind of block should I make I wanted to make something that's actually useful so I went on popular websites like bbc.com to see which blocks they use the most and I've quickly found that they love to embed social media posts directly into their articles like these two Instagram posts that we can see here so now I had my goal to make a Gutenberg block and an idea of an extra useful block that I could make so it was time to start building but first let's set some ground rules for my challenge first I only have 8 hours to make my plugin and remember that to start I have no clue where to even begin second I'll do my best to use the code that chatgpt gives me and I'll keep my own modifications small and finally I won't use any coding software just a simple text editor and my WordPress blog I'll walk you through everything that I did because I had so many things to learn along the way so to start I've simply asked chatgpt to write a plugin that adds a basic empty block to Wordpress then it gives me back the code for my plugin and then it also told me that I will need a separate block.js file and it gave me the code for this file also so I started making my plugin in a new folder I've created those two files just like cha GPT told me in the first file I copied over the first bit of code and in the second file I copied over the JavaScript code then after turn this folder into a zip archive and now this is basically our plugin so now I can go right ahead and install it into my WordPress website make sure to activate the plugin and now we have it inside here from now on to keep it simple we can just keep editing the plugin inside WordPress we can just use the plugin file editor and now that we have the plugin installed we can just go to a blog post and I will try to add a new block somewhere in this list I can now see my WP maker block which means it worked and sure the block is empty right now but it took me about 4 minutes to make it so at this point I thought wow this is incredibly easy there's no way this is gonna take me more than one hour and without chat GPT I would need to do hours of research to figure out how to register a new block like this one but I had no clue what I was getting myself into because now it was time to go back to chatgpt and tell it what I actually want my block to do so I tell it that I want this block to display an Instagram post it gave me some ideas for how I could make this and then it gave me some updated code for my blog.js file so I can copy this code inside my blog.js to test it out save the new plugin and then refresh the Gutenberg page to test it out again I tried to add my new block somewhere inside the page and unfortunately this is where I got my first error the block cannot be previewed so I decide to copy this error inside chair GPT and ask it for some advice the first thing it suggested was to check my browser console for any errors so we can go back to Gutenberg then right click and inspect this page open up our browser console and then we can try to add our block again surely enough whenever we try to edit we can see this minified react error so now I had to fix this error but I had no clue how or even where to start I was stuck so I decided to start from scratch I opened a new chat and asked for a Gutenberg block that adds simple text it gave me some new code but this time it was even worse because it wouldn't even correctly register my new custom block so I've tried again but this time I started with more general questions I asked the steps to make a custom Gutenberg block and it gave me a bunch of steps but they were super complicated and they involved running commands in the terminal but I wanted to keep it real simple so I said I don't want to run any commands can you just write the code for me and then it did and also this code looked much better so I decided to test it out I've copied the code for both plugin files inside WordPress and then I refreshed Gutenberg to see the result but once again I got another error this block cannot be previewed so I had one final idea I opened a new chat and I asked can you tell me the problem with this Gutenberg block and then I pasted in my code and finally it started giving me some useful advice most importantly that two of my functions named edit and save should return the same type of values then I kept copying over the errors that I was getting into chatgpt to see if it can fix them and its answers started to help me understand what each piece of code does so here's what I've learned first we have our PHP file this is super simple and the main thing here is this WP register script function that links our blog.js file then inside our block JS file is where all of the Gutenberg magic happens this JavaScript function called register block type is used to create our whole block and we can assign our block a title an icon and a category then we have three more properties that are super important we have attributes where we can Define some settings for our block like some text or like an Instagram URL for example then we have the edit property where we can control how the block is displayed inside Gutenberg while we work on it and finally we have the save property where we can control how the block is shown on the actual website's front end perfect so we're finally starting to understand what's happening here and here is me spending about 4 hours trying to figure this out using chat GPT but I still had no clue how to fix my errors and I was getting frustrated I even started questioning whether I can even figure this out at all for now I was running out of ideas so I had to stop and take a break I come back the next day with only three hours left on the clock and nowhere close to a working plug-in but with what I've learned yesterday this time I had a much better idea what to ask so again I start over and this time it gives me the steps to create my blog as well as some code I test it out and this time it works without errors it displays this hello world text but it doesn't allow me to edit this text inside Gutenberg so I asked Chad GPT to make the hello world message editable it gave me the new code and I tested out so now we can edit the text inside of our block but instead of my editable text I want to have an URL option on the right side so that the user can copy an Instagram link inside here and then we can take that link and show the corresponding Instagram post inside Gutenberg so I vested to remove the editable message and instead insert a URL attribute so I copy over the new code to test it but the Instagram URL field is now inside the editor and not in the sidebar like I wanted now this is where my progress slowed down because Gutenberg uses react elements to show all of these settings inside the editor and inside the sidebar and I've never used react before so I was completely clueless what made it worse is that there are at least two completely different ways to write this code so chat GPT would give me different types of code every time I asked something new and this was mostly because I didn't know what to ask for eventually by asking Che GPT different things over and over I figured out that what I need is not react code but plain JavaScript code displaying JavaScript code can use some functions that WordPress already has for example this WP element create element can turn my basic JavaScript code into a react element behind the scenes it took a while to figure this out and I was running out of time but now I finally knew that I needed to ask for plain JavaScript which was a huge breakthrough because from now on whenever it gave me some pure react code I would just ask things like for the edit function you just wrote can you write it without react or can you write that in plain JavaScript and most of the time it would give me error free code that simply worked another thing that I've also learned from cha gbd is that the sidebar settings over here are called inspector control settings so again this time I knew exactly what I needed to ask how can I generate an inspector control setting so that's a sidebar setting in a Gutenberg edit function where the user can input some text then it writes me the correct code but of course it's in react format so I just said can you write this in plain JavaScript that doesn't need to be transpiled so it converted this code into plain JavaScript and now I finally had my edit function I copy it over into my plugin and then I refresh Gutenberg and with that I finally had my Instagram URL input on the right hand side like I wanted it looks like crap right now but it works so after hours of learning by trial and error I was finally getting somewhere but I still needed some way to actually display this Instagram post Inside My article and I need this quickly because I have less than an hour left luckily I remembered that chat GPT had already given me a great idea of how to do this a couple of hours ago it suggested that to retrieve an Instagram post I can use these two functions so I could write a post ID function to extract the ID of the post from my Instagram URL and I can use this generate Instagram embed function to return the HTML for my post and this last one was a great clue for me because it gave me the idea to go to Instagram and check for an embed option surely enough they have an embed button right here so I can use this HTML code as a starting point for how to display my post perfect now back to chat GPT it gave me the idea to use these two functions but it didn't write them for me and I had no clue how to write them so I've just asked first write me the extract post ID function I got it back and then I copied it over inside my code then I vest for the Instagram embed function and I've also copied it inside my code for this one I've simply copied the embed code from Instagram and I put it as a return value and I can modify this embed code to use the post ID that is generated by my other function so here's what we have so far in the block settings we have the Instagram URL field the plugin user will copy the Instagram URL inside this field then from that URL we can use our new function to extract the post ID we can then take this post ID and use it with our other function to generate the embed HTML code and we can test it out with any Instagram post we can just copy the link and then we can add our new block to a blog post then paste the link inside the settings and save it now because we are using the standard histogram embed code it won't display properly inside Gutenberg but that's fine because we can refresh the page on the front end and as you can see it shows up perfectly inside here on the front end of our website perfect so by this point I only had about 30 minutes left and I wanted to add two more options to my blog I will want to add some sort of width slider to control the size of the Instagram block and I also want to add some sort of alignment option to be able to realign the post on the left side right side or Center so I went back to chatgpt and I vested to write my width setting I also mentioned that I want this to be a slider then it started giving me the code but it cut off after a while a quick tip here is to just write continue if this happens to you and and then it's gonna give you the rest of the code so I took this code and I copied it over inside my plugin and then it worked right away now I had my width option in here and I just had to manually tweak the HTML to use the selected width like this and after making that adjustment we can now use the width slider to change the size of our Instagram post perfect so now I could simply follow the same process and ask for the alignment option again it shows me how to do it so I can just copy the code and test it out it worked perfectly and now I had my alignment option ready so once you figure out exactly what you need to ask for Chad gbt will give you much much better results now the last thing is my settings look really weird right now taking up the full width of the side panel so I asked if it can add some spacing around them its first suggestion wasn't too useful but then I remembered that earlier it was trying to use something called a panel body for some of my settings so I vested to wrap my settings inside a panel body and it showed me how to do it right away it told me to add this panel body component and I copied it over inside my code let me show you what this does if I refresh Gutenberg now all of my settings are under the settings panel that it created this right here is what is known as a panel body component so now my settings look great and we can test out the whole block I can choose any Instagram post to display in here then I can set its width and its alignment however I want then I can update the post and refresh the page on the front end and everything's working beautifully three hours ago I had lost any hope that I would finish this challenge in time but here it is if you want to see the final code I will upload the full plugin in the description below now what I've learned is that Che GPT is an amazing tool to speed up your learning because writing code is just like building with Legos cha GPT can build you all of the Legos that you need you just need to figure out which Legos you need to ask for so you should watch this video next to learn step by step how to use chat GPT to make your first WordPress plugin and also we have more great videos coming soon to level up your WordPress skills for example in the following videos I will show you things like how to make your own Elementor widget so don't forget to subscribe for more videos like this and I will see you in the next one

Channel: WP Maker

Views: 443,409

Keywords: WordPress, ChatGPT, Upwork, Coding, Tutorial, ChatGTP

Id: GM3R26-MM8Q

Length: 14min 1sec (841 seconds)

Published: Tue Jan 10 2023