So is there anybody is there anybody in the audience who is from Greece? Right, so am I correct. I've been in Greece for two days now. Am I correct in understanding that? If you start at five past ten ten past ten quarter past ten, that's okay You're not like like we have to be there at ten o'clock because dinner is ten o'clock breakfast. Okay. I like that But I've actually already started haven't I? So that's that's a very capetonian way of doing things as well. Okay captonians are very like chilled about time We do we do have two hours I am I'm somebody who enjoys an interactive workshop. I don't like to stand up here and present and everybody sits and Listen and just codes.  So That's me. I'm Jonathan As I mentioned, I'm from Cape Town in South Africa. I used to write code for a living And now I don't and that's why I've got a big smile on my face I'm a sponsored contributor with automatic and so what that means is automatic pays for me to work with the training team The WordPress training team. So who is here for contribute today yesterday? awesome awesome So the training team we work on the platform called learn WordPress We create tutorials. We create workshops.  You can go there And that's my personal my personal blog Jonathan Bussinger.com If you want if you want to chat to me online That's the best place to find me all of my all of my contacts are there and all that kind of thing Before we get started I have been in Greece for Two nights now and I've been to Bolivar beach bar twice And and and you folks know how to party And as you can hear my voice doesn't So I'm a little bit croaky this morning. I do apologize So when I When you read the title of this workshop developing blocks using plain javascript What were your initial thoughts anyone? Why? Somebody say why Why not? Okay, when when you hear the term plain javascript, what do you think? Plain what is plain what does plain javascript mean? No, no react. No No dependencies. Okay. No react Vanilla yes vanilla so At at the at the the social last night I was having a very interesting discussion with a french friend of mine Deb knows him pier About is there a difference between vanilla and plain? And I I am of the opinion that vanilla is a flavor But plain plain is flavorless Okay English is a weird language So I have a small confession to make before we get started The title of my topic Is a little bit of what the americans call a bait and switch who knows what a bait and switch is That's where you go Here's a chocolate Okay, a little bit of a bait and switch Um And we'll get into it in a second and and and I hope that some of you will argue with me and we'll have that discussion That's what i'm looking forward to Um But when I when I think about developing blocks with plain javascript, I think about No dependencies I think about no jsx I think about not having to install an extra piece of software to write some javascript code I think about writing javascript code uploading it using sftp or whatever your ftp file is and it just works in the browser Would we agree that is a that is a pretty good explanation of what what plain javascript could be would anybody disagree with that Okay, so let me guess you're all originally php developers, right? My people So my this is very briefly before we move on my my history is very much a php history I I did a programming diploma after high school Got into writing or developing windows applications And then and then found in discovered the world of the web discovered php and mysql And html and css and javascript Um, but to me You wrote you wrote you wrote in the text editor or whatever you were using you uploaded the files to the server and it all just worked And that's what I loved about it I loved the fact that I didn't have to create an executable Or compile my code. I just uploaded and it just worked and that's what I loved about What I saw as web development So as we mentioned earlier pros and cons the pros are you don't need to install node js and npm For what we're going to do today You don't need to worry about running bold steps and on all those things and watches and things like that You don't need to worry about a massive node modules directory that you then have to include in your get ignore And make sure it doesn't get committed and all of those kind of things There are however some cons And we will get into that as we go through the workshop today Your code is slightly more and I use the quotes around complicated because when you start writing it in a second you'll see why And it also requires a little bit more manual work in in getting everything set up and putting it all together and One of the reasons that I want to teach folks to learn to build blocks without jsx is so that you can agree with me That it's much easier if you use jsx And that's the bait and switch So my goal today is hopefully to show some of you My exposes here. No no pressure Hey craig Hopefully to show those of you who want to build blocks that yes, it is possible But in my opinion, it is not something I would want to do every day Okay, can you please if you would like to open up your browsers to the block editor handbook at developer.wordpress.org Slash block editor how-to guides block tutorial Um while you're doing that. Can I just do a quick check? Anybody here who wants to code along with me today? Throw up your hands quickly. Okay, the rest of you you're welcome to be here You don't have to code along with me, but you're not allowed to ask any questions and I'm kidding Um, those of you want to code along with me here today Do you have your local development environment up and running? Okay? Is there anybody that still needs to get their local development environment up and running? No, excellent. We're gonna finish up early today Okay, is any is anybody still getting getting this this documentation up anybody still get there is everybody ready to go All right So the only tools that you need today if you want to code along with me Are a local WordPress development environment and a code editor I won't be using vs code WordPress playground extension today. Yes Yes, certainly Yeah I had planned to use Who has heard of of of WordPress playground? Okay, a few of you right. So I had planned to use it today But due to a lack of Planning on my part. I forgot to get I didn't get to the point of setting it up in that environment So I'm using my default local environment But those are the only tools you need today if you want to code along with me, okay Anybody else still need the slide or can I move on? Happy to move on. Yes Let's start writing some code. Okay, so there is usually a Five minute waiting time While I increase the font on my on my code editor so that everybody can see it But let's start with that. Can everybody read that or do I need to increase that font? Can anybody can anybody not read that code? Make it a little bit bigger. Okay, perfect I'm so glad that php storm has included that Included this increase font size on all editors option makes life so much easier That's the one thing I wish php storm had that vs code has is just command plus Right, how does that code look? Can we read that? Okay, excellent, right so if you Have never developed a plugin before who has who has never developed a plugin before Couple of folks. Okay. That's that's great. So we'll do a bit of plugin dev today as well Awesome.  Wp learn lean learn wcu t23 While I'm doing that. I'm going to open up The same documentation that I asked you to open earlier and maybe pour some water. That might be a good idea All right If you're on this block tutorial at the bottom of the page There's a creative basic block block link which takes you to the next page I'd like you to go there, please and then we'll start here at step one by configuring block.json So if you need to get there, please do get there So this is so this is from so this is from the original link This was the the how so if you the other way to get there is to go to Well, let's walk through it.  Sorry. This has been this has been updated recently, which is why I'm struggling with there we go blocks. There we go Okay So this is the blocks page. Is everybody there? Okay, and then if you scroll right down to the bottom of that page, you can click on the create a basic block link And it takes you to the create a base create a basic block page. That's where we're going to start so I like to Sorry, my throat is still I like to include a bit of humor in my in my in my workshops And a friend of mine Is is married to a lady from cyprus And I and I said to him I would like to do a greek.  Why don't you say to folks that I know a little greek. So I'll I'll try and I know a little greek. Her name is Helen and she lives in Cape Town See, it's not it's not funny when you have to explain it, is it? Okay So if you're going to develop blocks without using no js without using npm There are some files that you need to set up in your plugin directory to get things going Before we get to php. We need to set up what's known as the block.js on the file So if you scroll down on the creator basic block, you'll see there's step one configure block.json And basically There are multiple ways that you can specify your attributes and your block names and all those kind of things The block.json file is the easiest way to do that Okay So I'm going to go back to my editor I'm going to go into my Plugin. I'm going to create a new file I'm going to say block.json So there's my new block.json file Who has never coded a json object in their life? Okay, let's put it this way. Who has coded a json object?  Okay, so a json object is like a php array in a way Um, it has a specific syntax and then you specify key value pairs And it's a very simple thing So if we go back to the configure block.json file If you scroll down a bit, you'll see there's this Uh, creator basic block.json file there And did you notice the jsx and the plain toggle? Has anybody used that toggle before? That's why you're here today. I'm going to just teach you how toggles work It's really that easy So if you click on the plain toggle You'll see that it's it doesn't change much But there are some slight slight changes Um, the one just has the es next in next to the name. The other one doesn't So I would like you to copy out that code And pop it straight into your block.json file And if you're wondering why we need two hours, it's because I go really really slowly like this So if I'm going too slow, please let me know Because that will be a first Usually I go very very fast Okay So in the block.json file we specify the api version. That's the block editor api We specify a title. I would like you to change that title to whatever you would like it to be So I'm going to say I can't even spell today And then the next one is the name Now when when you think about writing php code If you are using classes, you don't tend to do this. Maybe you do In php in wordpress, you might not but if you're coding in something else, you might There's a concept known as namespaces where you namespace your code And basically when you create your block name you use a namespace and then the name of the class So the Gutenberg example section is the namespace And the example zero one basic is the blocks name So what I would like you to do is I would like you to create your own namespace and your own block name I'm going to go with WPCEU And I'm going to call it my form block All going well. We're going to create a form block today It's going to be very simple It's going to be very ugly We don't have time to code a very pretty we don't we don't have time to recreate gravity forms today Um But the idea is that we learn how to do this and hopefully you can take it And then you can expand on it and you can go and style it and you can add new things to it. That's that's hopefully the idea The next three elements are the category that it belongs to And that's basically if you open up the site editor You've got that where you can click the plus and all the buttons come up and they're in different categories So that changes that category there. We can leave it as a layout for today. I'm quite happy with that The next one is the icon So the icon is one that you can choose from the wordpress dash icons. I'm sure we've all used those in the past um I actually have Some code somewhere else that I want to just Quickly open up here Give me a second here, please I'm a block json. So I'm going to use the media hyphen code Uh icon today media hyphen code So let's go back there and let's pop that in you're welcome to these leave yours as universal access all to whatever it is I'm going with media code And then your editor script you'll see it. It's a file And the file is called block.js So for 10 points, what's the next file we're going to create? Inx php who said inx php? Who was that? I love that. Who was that? No, I want to high five you who said that? Yes, I'm gonna high five that the espresso is kicking in Okay So create your block.js file, please. So in the in the root of your plugin folder It's create the block.js file. There it is We're gonna we're gonna put some javascript in there in a second That javascript will not require transpiling. It will not require Dependencies it'll just work in the browser I love seeing the smiling faces when I say that. All right Let's go back to the documentation Step two says with the block.json in place the registration of the block is a single function in php So we get to write some php code folks. We do And and and then and then we don't anymore Okay, so I would like you to copy this php code out of your Out of your documentation And I would like you to create your your plugins php file And as you all know that can be The name I I prefer to go with the name of the of the block folder as my php file But I seem to recall you can also just have an index php if you would like But I'm going to go with wp learn WPC you 2023 and there's my php file And I'm going to paste that code and Is there anybody here? And and please this is not a field don't feel bad if your answer is no But is there anybody here who has never hooked a callback into an action hook? Okay, I can see you're all php people Right, so it's a very basic action hook callback We're hooking into the init action And then we are registering our block code. So what I would like you to do is change the callback function I'm going to change mine to match the name of my Plugin slug and then I'm just going to go Register block I'm going to change that And then you'll see what it's doing is it's calling this register block type function Which is the php function to register the block type And all I'm doing is I'm all the code is doing I'm not doing it because I copied this code Is it's passing in the php dur constant? So if you don't know what that does that basically returns the path to the current File so in in my case it'll be Passed in my WordPress install wp content plugins Wp learn wcu 2023. So that's what all the that does The other thing I would like you to do and you're welcome to argue with me on this But I prefer this is a this is a personal preference from a readability point of view I prefer to have my action registration above the callback function Because when you read that code you go what's happening. I'm creating a hook. I'm calling this function Where is the function? It's just below it That is a conversation that I had with those of you who know Tonya mork From wp developers club and know the code That is the way that she codes her action hook callbacks. I much prefer it. So that's what I do it doesn't it's not right or wrong It's just a personal preference Okay The next step if we go back to the documentation is we need to create our block edit and save functions So again, we click on the little plane tab And we copy code So here's a little secret. Um, if you want to go and do this workshop by yourself, you just Just go through and copy the code from the docs I read read the manual We're going to dive in a little bit deeper. We're not going to just stick with the code. That's the first plot. Okay What we need to do though, and I apologize I need to blow my nose. So I'm going to do that Too many mojitos last night. We need to understand what this code is doing Right We're kind of just We're not just copy pastors. We're not just stack overflow copy pastors, right? We want to understand what we're copy pasting. That's kind of a point So So again No, okay So what this code is essentially doing is it is this is what is known as a I'm going to forget the name now It's i if e I think it is Uh, I can't remember the full name, but it basically means when this when this javascript code loads Trigger this function, right? The other way you could do this from the jQuery days You would have your jQuery on document loaded or whatever it was and you would call a callback function And then that callback function would run your code. That's essentially what this is doing So there is no function name defined because this is those of you who know this from php land as well This is an anonymous function Which means it doesn't have a name and the reason it doesn't have a name. It just doesn't need a name I'm not going to be calling it from somewhere else. I just want it to fire once this javascript has loaded into the browser I want it to fire all the time So that's why it doesn't have the function name. It just has The function declaration and then it accepts the blocks and the elements Arguments Then at the bottom, you'll see there's It's passing the window wp blocks and the windows wp elements components to this automatic anonymous function So window wp blocks and window wp elements are other javascript files that are running when wordpress loads And here's the dirty little secret. Those are your dependencies So dependencies are not just things that you have to install and run when you're developing There are things that are available when wordpress is loaded because wordpress Can't expect you to have to have all those files and do the thing it needs to allow for what we're doing today so Blocks and element are dependencies that when you install That's a wordpress scripts when you set up that whole build environment. Those are some of your dependencies that you need But they're always available in a in a wordpress instance. They're always available So it passes blocks and elements to this function so that they're available And then the very first thing it does is it creates an instance of the element dot create element function, basically Or what's known as react as a hook So what I would like you to do to make your life a little bit easier is change that el To create element, right I just find that more readable el means nothing to me But create element means something i'm creating an element Then the next step is it uses the blocks component and it calls its register block type method or it's a class if you will or object And notice what it does in the it passes in the same name with the same namespace and the same block name that we set up in the php file So what do we think is the next step that we need to do? Change that so let's go ahead and do that. You know, it wasn't there. It was in the block dot json There we go and that has to be the same So whatever you register in the block json has to be passed to the register block type function Then it sets up the edit function And it uses create element. So you'll see there's two instances of el there. So I want you to replace those with create element And essentially what it's doing is it's creating a DOM element With a tag of p. So it's a paragraph The the the empty object there is any attributes for this thing So things like whether it has like aria at any any of your typical html tag elements would be passed in there And then the third parameter Is the content or what's what what the children are of this element? So In html terms what this is doing Is creating that Do we agree? Does anybody disagree? It's not a trick. I just want to know I want to make sure everybody agrees. Okay, so that's what that's doing And then in the save function, it's essentially doing the spanish version of that if i'm not mistaken Uh, is anybody spanish here? Is that spanish? Excellent. Excellent. I'm captonian. We have two languages No, we have 11 languages, but you can only speak them in africa. So Um, the only one we can speak in europe is is is english um And so in a block environment if you've never developed a block before the edit function is what renders in the editor And the save function is what gets saved to the database to then render on the front end Okay, does anybody not understand that? Some of you have probably seen that concept in the jsx stuff Um, but that's how a basic block works Should we test this? Who wants to test this? Okay, this should theoretically just work Uh, no, it shouldn't. I lie I missed the last most I always forget this one Always forget this one Those of you who don't like dependencies Step four build or add your dependencies I would like you to notice that the jsx one says npm run build. Okay, and this is where most php folks go Huh? All right, so we click on the plane and the plane says Create an asset file to load the dependencies for the scripts So what is what does this kind of look like? When we look at this php code does anybody see if something when we think about loading javascripts and loading dependencies for that javascript Does anybody see something familiar? Does anybody remember wp enqueue scripts? And then you and then you enqueue your javascript and then what is that one parameter that's an array? It's your dependencies You have to tell wordpress that when the script loads. I am writing some j query code So make sure the j query you have j query in the dependencies array make sure j query is loaded Before you run my code or what happens? It all breaks, right? I can I can tell the old school developers because when I go j query, they're not And the newer folks are like j query All right, so that's what we're doing here. That's how building blocks using plane javascript also works This file when So let me take you back one step When register block type runs It goes and looks for this asset file this asset dot php file And it says, okay Those are my dependencies. So I need to wait for the wp blocks dependency The wp element dependency and the wp polyfoil dependency to be loaded in wordpress before my code is fired Can anybody see something interesting about the dependencies there? And what's being passed in that in that Automatically executing function we did earlier Anybody spot that Polyfills missing number one, but the other two are the same wp blocks and wp element wp blocks and wp element So that's how you manage your dependencies in a plane environment without the bold step. Okay. Let's talk about polyfo I'm not going to go to the documentation now But polyfoil is basically the thing that fills in the gap between your code and blocks an element Okay, so when you're building blocks without using jsx without using the bold step You have to have polyfoil as well All right, every single time which is why it's included in the documentation So now that we know what this does now we can copy paste it right because now we know what it does We don't copy paste without knowing what it does right right I should hope so Okay, so let's copy that out And it's a block dot asset dot php file. So let's create that block dot asset Dot php, okay Before we move on I would like you to if you don't have somebody sitting At the table next to you All right, please don't do what I'm about to ask the rest of the folks to do And I explain why in a second the rest of the folks if you have somebody sitting at the table next to you If you don't know this person I would like you to turn to them Introduce yourself to them Say hi, my name is whatever and where I'm from And then say thank you for pair programming and helping me test Okay, those of you who don't have somebody sitting next to you you have a slightly more difficult job You need to get up and go find somebody And introduce yourself somebody else not sitting with someone next to them And say would you like to come and sit with me and thank you for helping me pair program and test Because we're going to be helping each other today Okay, please go ahead One of the three of you work together You guys work together, okay Okay, cool There we go. There's another chap there. There we go Excellent Okay, does every does everybody have does everybody have their rubber duck? Does everybody who who here doesn't know about the term rubber duck? Okay, you don't okay, so in Very good everybody to to I love the fact that you're chatting, but let's let's slow down again Let's bring it down. Let's bring it down I mean we can carry on talking for the rest of the workshop. I don't mind I'm here for the next hour and a half Okay, so In america in american software development There is this term known as a rubber duck So when you that's fine They'll miss the rest of the workshop. I don't mind they registered not me There's this there's this concept of a rubber ducking where you you don't have somebody to speak to so you have a little rubber duck on your desk And when you're trying to solve a hard problem you explain to the rubber duck what the problem is you're trying to solve And in doing so your brain In the in the process of explaining something your brain switches from learning mode to teaching mode And in doing that your brain often will find the problem while you're teaching All right, so what is the best way to become a better developer? To teach to teach Okay, bye rubber duck, but that's a good option. Okay, right Okay, does everybody have their their their pay programmer does everybody have their partner? I would like you now To fire up your wordpress dashboard Find the plugin that you've created Activate it and add it to a page somewhere And let me know let no not let me know let your partner know if you get stuck And see if you can help figure it out together and I will be roaming around And helping folks out and we'll do that for the next Five to ten minutes and so everybody's got the plugin up and running. Let's go Maybe I should test mine first When in greece we must speak greece. Can you change hello world to? Oh, awesome. Thank you Perfect. Thank you so much That was so good welcome Who said refresh the browser Okay, who who doesn't have a working plugin right now? Who's plugin doesn't work? Okay, who's plugin does work? Can I get two volunteers of their plugins who do work to come and help the folks who don't? Anybody? Yeah, there we go. Ah, there's my friend from yesterday. Let's come and help these folks in the front They've got a struggle Let's let's get everybody on the same page Those of you whose plugin is working I would like you to change The the hello world so you'll notice I've changed mine to to be in greek. Thank you to my greek friend over there I would like you to change your save component from spanish To whatever language you speak And see if you can get it to render on the front end If you're spanish your job is done Okay, so I want you to go I want you to go into your save function Change from hello rola mundo. I think it was to whatever your language is Whatever language you speak And get it to rent all I want you to do is get it to render in preview on the front end That's all I wanted to get you to do All right All right All right, can I get everybody's attention again, please So we did have one we did have one valid bug that came up today I'm not going to mention who it was But somebody had named their their block.js file blocks.js.  Okay well That is a block In my opinion written in plain javascript. Would you agree? Okay, so we're done go all right, so The next thing that I would like you to do Let me just check my notes. Sorry And this is another problem when I have things in different places So let me close that. All right So create element. Let's talk about create element Who here has seen jsx code? So you've seen you've seen some jsx It's very similar to html in a few ways It's unlike html in the fact that you have to use what's known as dom attributes and not html attributes So for example, you use class name instead of class to define your your classes But as I mentioned earlier when you are using this create element function that wordpress provides for you Which is essentially just a wrapper around the react create element function You are essentially creating a dom element. So a paragraph tag a div tag a whatever the case may be We'll get into the How you add nested and all that later, but let's let's talk about this empty object With your page that you added your block to I would I will I will give now it I would like you To remove the block from the page First person to remove the block from the page. Please put your hand up Okay, what did you have to do to remove it from the page?  You can't click on the block And remove it right the other way you could do it is you could open up the list view And you can remove the block from there, but you can't remove it from the editor area, which is Probably the worst user experience in the world ever, right? Okay, so Who here's heard of block props? Some of you have heard of block props. Okay, great There is a react. So, okay, let's ask another question. Who here's heard of react hooks? right Who here thinks they understand react hooks? Way less Okay Who here would agree those of you who do understand react hooks would agree It's basically just a function that does a bunch of things, right? That's essentially what it is under the hood.  We know functions We create functions. We say we call them. They send us back data. That's what a hook is essentially So there is a the documentation for that. So there is a hook In WordPress called Block hooks, there we go Block type, there it is No, it's like I'm not gonna find it anyway So there is a hook in react called use block props And that's a special react hook that's been set up in WordPress that does a whole bunch of fun magical things We don't have time to dive into what that does In depth today, but I would like you I would like to show you how to add it as your dependency and how to use it So, okay, I'm going to do some command liney things here No, not version one. Sorry folks give me one second Version two There we go So use block props is a hook on the same block editor On the block editor components in WordPress So just as we passed in blocks and element, we need to pass in block editor as well So let's go back to our code So who here can guess what that dependency is going to be called? Copilot knows Okay It's going to be W window dot wp Block editor and it's block editor in I think this is camel case So the e in editor is an uppercase e block editor. That's what it looks like window wp block editor So with that added to the the list of arguments that we're passing into our automatically executing function We need to accept that in the function declaration So up here we can go block editor Obviously No, I don't want that Obviously, we don't have to call it block editor You're passing you're passing something to a function. You can call whatever the variable is to receive it anything you want I could call it be if I wanted to but i'm going to go with block editor ignore the The empty object next to that that's copilot being weird Um, I don't quite know why it's not going away though So let's do anyway And then what you can do is you can do this you can say use block props. I'm going to actually turn copilot off Anyway, it's not obviously not copilot and it will be block editor Use block props So ignore ignore this colon And the mtj something there. I don't know why it's still showing ignore that. It's just block editor. We're just receiving it And then we're saying use block props right So now we what we've essentially done here is we've created a variable called use block props Which is an instance of the block editor use block props function So I could just use block editor to use block props everywhere. I could do that as well But I like to have a simple shorter version to use So we use use block props that way So now I need to extract or import or whatever the block props From use block props. So this is what it looks like block props use block props. So inside of your edit function We can create a new variable block props Equals and I can't remember now Use block props So I'm basically calling the function and then receiving whatever it returns Right. This is all this is all javascript code. We we understand And then I want you to update the mtjson object there with Block props and what that essentially is is it's a json object that gets returned With a whole bunch of predefined things that wordpress does for us We're going to inspect that in the console in a second But I want you to just get this far so long I'm just going to switch back to my other code editor. I'll come back here in a sec Just check something. Yes Okay Does anybody need me to stop and have a look at this code and get themselves up to date or is everybody along with me? Okay, cool Then we need to do the same thing inside of the save function So we can just copy that block props and we go use block props And the only small change we need to do here is we need to call the block props save Because there are certain things that we want Happening in the editor that just calling use block props will give us And then there are certain other things that we only want happening or specific things that we only want happening on the front end That save will give us, okay And then again, we do the same thing.  It's an object of properties. That's all it is While we're here Let's see what is inside of of block props. So Can anybody guess what my next line of code is going to be? console.log or debug We've got the debug in Kenya console.log console.debug console.table whatever whatever you prefer I'm going to go with a very simple console log and I'm going to Log block props there. Luca you're welcome to use whatever you prefer my friend So Luca I don't know but I know his work And it's kind of scary to me that he's at my workshop today I should be at his Okay So when it when it renders in the editor for the first time we'll inspect the block props and see what happens And then when it saves in the editor, we'll see those block props as well and what happens All right Everybody up to speed with me. Do I need to pause for a second? Now now we can start testing this code no build step None of that it's ready the only thing we need to do and I met I met the gentleman yesterday But I've forgotten his name. We need to do what? There's no building of dependencies, but we will need to refresh our browser Okay, what you can do if you would like to Who you remember is cache busting from the old days Remember cache busting what did we used to do we used to go? Change the version to remember Same thing okay, I think I think WordPress has time I can't remember but I use mk time same thing for those of you don't know mk time generates a timestamp So it's a series of numbers So every time you refresh your browser that timestamp updates and the javascript is Refreshed in the browser cache. So you're always getting the latest version of that code This is this is an old school development Trick that we used to do Before we had like right-click and clear browser cache and all that kind of stuff remember To change that when this code goes to production because you don't want this happening in your production environment Okay So with that happening, let's go back to our page We'll take this away And let us refresh And depending on what you have on your page one of two things might happen. It might just refresh Or it might give you some kind of issue mine says deprecated mk time in the top there I think it's supposed to be time these days. I don't have I don't have My logging enabled so I'm going to copy out this message and just see what it's saying to me Uh, you should use Time, okay. Yeah, it was time. I was right. So instead of mk time just use time. Sorry about that mk time has been deprecated. That's how old I am So let's refresh this and You should see some kind of error possibly like this. Does anybody get this error? Okay, that is that is not a bug that is a feature All right, because when we passed in the block props we changed Elements of the markup that is being rendered and the way the way the block editor works is once that save function runs It renders that markup and then stores it in the database Then when the block editor loads it loads the edit function But it also checks against what's been saved in the database and if there's a problem it throws some kind of issue like this So this is expected So you're welcome to keep it as html or whatever the case may be by switching it to keep html You can then remove it, which is great And then let's do another refresh And it's still there doesn't matter And now if you add your block it gives you an error. It's giving me an error anyway And I'm trying to I'm trying to remember why it's giving me that error Yes, and and and why is that I just remembered why that is Dependencies So you still have to manage your dependencies Great question So it doesn't so sorry. What was your name? Nikos Nikos's question was does the order this list of dependencies order does it matter? And it doesn't matter in terms of it loading for your thing to work But it does matter if you want a specific dependency to be loaded before your code loads So I tend to I tend to try and make sure that my dependency array Is in the same order as it is in the in the javascript code It doesn't it's not it's not that important but from a readability point of view I find it to be a better thing, but it's not really a requirement So as Nikos said we need to add this to our dependencies So it will be something like Wp and I think it's let me just check the code here I'm going to just cheat and go go back to the example code I think it is just block editor. I can't for the life of me remember There we go WP block WP hyphen block hyphen editor WP block editor There we go So it's been added to our dependencies Wouldn't it be easy if there was a way for these dependencies to just be updated because we use it in our code? Wouldn't that be great? It's called it's called the npm build step That's all the build step is doing In your jsx code when you go import Uh use block props from block editor And you run npm build it then is building this file for your plugin Just saying just saying Because we we love automations don't we we hate writing all the code we love things that do it for us automatically Okay, so if we refresh that attempt to recovery I'm going to just remove that one and refresh again Okay, it gives you this attempt block recovery and that's because of the save story So let us preview this And that seems to still be working as far as I can tell The difference is now when I click on the block I have the little toolbar at the top everybody else see that When you click on your block the toolbar appears So just by enabling use block props all of that functionality is added for you by default It doesn't look like a lot of functionality now, but it adds other things. So let's have a look at our console And see what is being Used I'm going to take this over here And here are those objects. So here is the one in the line 13 is probably the save and line eight is probably the edit So let's open that up. So inside of block props in the edit There is the aria label that automatically gets applied. So accessibility out of the box The class name is set up for you and I have heard people complain about the massively long class names that the block edits it generates and I agree They are long. I agree But you can then use and you'll notice the block name is the same as we defined it In our block adjacent at the end there wp block wcu form block So I can now hit some css and I can target that that class and I can style my block There is a data block attribute a data title a data type. It's got an id and various other things are added to it And if we have a look at the one in the save method You'll see it just has the class name At the moment that's all it has because that's all it needs for the save It doesn't need the id and all those things because that's only necessary when you're moving things around in the editor But if you have a look I'm going to I'm going to make this a little bit smaller If you preview this block And you inspect this code You will see that that class has been applied to your paragraph. Do you agree? Okay Awesome So now we also need so now we know how to develop a simple block. We need to know we know how to create an element We know how to use use block props Now we need to go and say well There's all this documentation About all the various components that are available The let me go back one step I'm going to make a few steps The creator blade that creates a basic block how to guide has that very cool switcher So you can see the jsx code and you can see the playing code But the rest of the documentation doesn't have both code examples So we need to be able to Understand the jsx side and be able to implement it in our vanilla side, right? So in The documentation there is a something called a rich text component who here has seen the rich text component some of you have seen it, all right Um And if you're going to use it so in this instance, there is the jsx code, which is great And let's actually have a look at that code. So I'm going to expand that doesn't expand it nicely That's collapsed it. I'm going to just copy up the the render method the return method I'm going to just pop it in the code here So this is going to break. This is not going to work. But that's what a rich text Element looks like with some some use some block props and a tag name and various other things I'm just going to take all this other stuff out So we make our lives a little bit easier And maybe we should keep the on change Let's do that one. Let's do that one Yeah, no, I'm not going to run this story Okay So that's our jsx. So this is what jsx code looks like right return And then it has excuse me. It has an html like style to it open tag rich text See it has the block props object that we've we've just done we've done that already And then it has other things that can be applied to it other attributes And it has an on change method method and various other things. Probably my wife Um So we would like to know how do we do this? Plane Right like if the if the documentation is all in jsx How do I in my brain convert jsx to plain JavaScript? Okay So Sorry, was that a question? No, okay, cool So the important things. So what are the important things that we know about these components? They do have a dependency that is available to us in wordpress We can set them up In our JavaScript code. We can pass them to the function We can also then set them up in our dependency list So let's have a look at this jsx and I'm specifically not switching over to the plain version, but Let's have a look at The import at the top. I'm gonna actually grab all of this and we'll stick it in a file and we'll kind of translate it on the go So let me take this out I'm going to open up a scratch file Okay So at the top We've got the import statement and it's importing the rich text component from where? block editor Have we seen block editor before Cool. So we're already using that as a dependency Excellent If we weren't What would we do? We would go to our block.js and we would add block editor now notice that In the original code, it's using the the package name like that And you don't necessarily know that it's block and then editor with an uppercase e Here's the trick anytime. It's hyphenated in the package name It's always camel cased in javascript always. Okay, so you can always trust that I've tested it. All right If it doesn't let me know because then there's a bug So but if it wasn't then we could we could add it to our our list of variables being passed to our function And then just like we're doing this over here. We can do the same thing. We can say var rich text is block editor And then let's have a look at that code It's just rich text So just like it's used block props and it's create element Let me just double check this Before I lie to you. Oh wait wrong version sorry folks. So here we go Yeah, block editor rich text That's simple enough, right? That's straightforward enough. Okay Now the hard part comes in What I would like to do Is I would like to create I would like to change that paragraph container to a div container Or at least sorry, I want to restructure the I want to restructure this layout. I want to have a div Inside of the div I want to have the rich text And then below the rich text. I want to have my hello world text uneditable. That's what I want that That's what's in my mind. So let's code that out quickly in html. So we understand what it looks like Yeah, so I want a div Then I want whatever the rich text does so I'm just going to pseudo code this for the moment. I'm going to say rich text And it's going to have some value and then I want the paragraph tag with my hello world And then I need a closing div Do we agree that is Besides the rich text part that's valid html code. All right cool So how do we do that with create element? Well, what did I say create element does it creates a single DOM element I also said that the third Parameter in the create element function is the the content, but I also said the children of your element So in this example Which are the children of my div? Rich text and the hello world. Those are the children So bear with me while I live code this This is the first time I'm doing live coding in a workshop So it might go wrong as we all know we all code perfectly the first time. I know I know you all do right? It's never a mistake the first time no spelling errors. Okay But this is what it would look like.  I just find it more readable So instead of doing it on one line like I have On line 15. I'm going to now start putting things underneath each other So block props Now what can anybody guess? An array Okay, create element. Okay, that's been fun Everybody put your hands up if you say an array Or an object java JavaScript object the same thing. Okay, anybody who agrees with create element Less people say, okay Say again Code pack or a call a call back. Sorry apologies languages call back function. That's also good. Anybody says call back function Okay, create element because I want another DOM element Okay So where does my where does my? My paragraph go don't have it Two children's there you go. So I can have more than one child of a parent element So I can just go comma create element And then I can set it specify my paragraph I don't need the block props here because the block props need to work on the container For the removing so this can be an empty empty object and then Hello all from the editor. Okay And I can do that multiple times. So if I wanted to have A form in here I could add a form create element And then if I wanted inside the form I wanted an input box I would then create another create element inside of the form create element And at the end of the day This is what your code ends up looking like So here we have create element Creating a parent div passing in block props Then creating the next element, which is the rich text Then creating the form element Then inside the form element. I'm creating the div inside the form think in html You can imagine this the div inside the form Which has a form group class name then it sorry It has a label element because a form field needs a label And next to that there's an input element With a name and a type of text And sorry and macOS is trying to update my software go away And you're basically think thinking about html You're basically using create element every time you need to create a new DOM element And if you need to have it nested you have create element nested inside of create element And you have all of this code All of that all of that How much fun do you think that is to write? Yes Can you use a pen child? I don't know the answer to that Should we find out? I've never used a pen child, so I'm going to have to do some No, no Oh, I see Okay So how would you use that pen child?  I've never tried it. I'm like most most of the other folks here. I'm an old school php guy so so what I'm trying to say is It is possible and then you then need to sorry. What was your name? marios you then need to go into things like a pen child and learn all of these javascripty things Or You can write Your edit method So it looks kind of like html Like wouldn't you what wouldn't you rather want to write your your create elements like your create elements in your pen child's like this? Yes, please Now that i've shown you how it is possible in javascript, but it is a little bit uncomplicated uncomplicated Isn't the price of just installing node j s an mpm worth that code now here's now here's where so I Don't think I mentioned this up front and if I did I apologize. I am very tired Um, as I mentioned earlier, I've done I literally I landed on what are we today today's rider? I landed on wednesday at five p.m. Went straight to a dinner at boliver beach bar Which if any of you have known the party only kicks off at 12 30 um Came back Contributed a day yesterday then went to another party at boliver beach bar So I'm tired. So if I have already told you this I apologize. I've forgotten But my title was a little bit did I say bait and switch did we talk about bait and switch my title today was a bait and switch My goal here today is to show you that yes It is you see I did forget that's a title It is possible it everything is possible But why would you want to do that to yourself? You know, why would you want to spend all that time thinking about the html? And then converting it into create elements and the pen children and all that kind of stuff When you can just write this And it gets it gets even better um This is the so this code is all available if you want to if you want to grab and it's in a very a very sort of work in progress state But if you want to grab this code it's on my github profile. My name is jonathan bossinger the same as my my name Um, and it's it's probably gonna it's it's numbered repository number 200. So that's a bit of a celebration. Okay It's called wp learn wc eu 2023 And if you switch the branch to version 103 you have the whole code So let's I'm going to open that up quickly on the screen And we can have a look at that. It's not going to be pretty But it'll give you An idea So Tell me when to stop making it big if you can all see it Is that fine? Is that good? My friend to the back awesome So there I am passing in blocks elements and block editor, which we know I'm also passing in the components. So all of the wordpress components that are available These use block props rich text, then I'm using block controls and block alignment controls Um, registering the block type the form block Setting up the edit function Setting up some some functions when things change to receive the new update and passing those around And then the and then all the fun happens down here with all the all the all the multiple nested nested Create elements and and we keep going and maybe a pen child would make it a little bit shorter But it's still calling a whole bunch of code I'm doing a whole bunch of things and then I have my save function And I have all of that code there for the save function And and wouldn't it be nice if I could take like the form? Which is the same code every time and extract it into into a file that I could just include or require My php friends into my main file, right, but I can't do that in vanilla javascript. It has to all be in one big long file whereas If I'm using the build step if I'm if I'm using the transpiling I can I can where it is that code There we go I can take for example this entire form And move it into its own file Create a form my own custom form component And then just import it into my into my main block file my main edit file This this code if you look at it, you'll see that in the index.js Which is the main the version of our block.js It imports edit save and metadata from other files. So it's similar to php's require So jsx is actually more like php truth You can do things like import files. You can move things and we don't we love compartmentalizing reusable code We love that Right, we want to have our code that we want to have dry code We don't want to have to have the edit form and then the save form and it's the same code and we're repeating it over and over again jsx allows you to do that So Yes, it is possible Yes, you can do it No, I don't want to write code like that. Okay, I want to write code that is clean easy to read easy to work with and so for me And I'll be brutally honest here For me The biggest hurdle was I need to install this new piece of software that I've never used before I need to learn a couple of command lines command line things I need to I need to get used to something called a file watcher Which is this magical creature that just runs in your terminal and does things And I'm I'm the kind of person that doesn't like I don't like having More than one terminal open. It's just a thing. I don't know why And so I suddenly have to now have two terminals open Because the one needs to be running the file watcher or if you can do if you want to do it in your IDE you could do that as well But the one needs to keep your file watcher running and then your other one you can actually use as a terminal And I still struggle with that But the benefit The the time saving The clean code The dryness of my code the benefit of doing it that way overrides my aversion To having two terminals open So yes, it is possible And no, I don't want to write code like that. Okay That is the crux of my talk today There is a whole form that I built you're welcome to download the code The point of today wasn't to dive into that process. So what I would like to show you though while we're here is that You can create your own custom code if you will so If we look at this create element setup that I've got over here, let's actually take this out And If I wanted to add this form for example below the paragraph It would either be create element or a pen child or something like that But And this is not documented anywhere in the wordpress docs, but it probably is somewhere on mdn or something like that But I can just say create a form So this will create a form element And maybe I want and I'm going to turn co-copilot on now because it's going to help me quite a bit And I can pass in maybe a style and I can give it a border or whatever the case may be And let's say one pixel solid red Because remember how we used to debug html back in the day whether it was the right size So co-pilot at least knows that Um, and then inside of the form I want to create the div So I would then create element and or the label or the first the rapid div And then I would create the label and so on and so forth Um, and and this just gets really old and really boring Really really quickly. Okay, so what I would like to do now Is I'm going to switch over to The predefined code that I have here. So that's my so what I did Is I created the first one Which is the vanilla way And the plan was actually to have a rest api in point and we were going to post the rest api And I was just like no that's just that's too much your php developers. You know how to post the rest apis um So I built the block in javascript in plain javascript and it's and it's all this code all of this code And then I built it in j6 and it's all this lovely clean code And if we if we load it Hopefully I haven't made changes to any of that Um, it looks like I have Oh, it's because I know what I've done. I know what I've done. Hang on one sec I need to check out version three. There we go. I'm going to do a quick refresh And we add it and that is A form block written using this jsx way And then let's load up the other one And there is the jsx one and if you can see it over there in the corner Yeah, it's the same thing Same to the to the user. It's the same I'd much rather work on the code for the second one person um, so it's worth it. It's worth getting over the bold step and Literally all you're doing with that bold step is it's automatically generating essentially that block asset file That loads the dependencies That's that's essentially all it's doing because all of those dependencies are already part of wordpress When a wordpress install launches, they're already there It's just automating that process It allows you to say import that package and start using the code Write the jsx code and then and essentially what the the bold step does is it takes all the jsx code and turns it into the Vanilla code that we just wrote so it automates that whole process for you. So why wouldn't you want to use it? Any any any opinions against that statement? So I've been successful is what you're telling me Okay, and that's and that's really what it boils down to yes, and I'm going to repeat myself Yes, it is possible And yes using things like a pen child will probably make it easier But it's way easier to go the jsx route. It's way easier to get over that step It's way easier to have that process in place understand a little bit about how that process works the first The first thing that I that I hear from developers when I when I speak to them about to say Yes, it's this node modules thing and when it breaks, it's horrible to try and debug and you know what you know what happened You know what I do when when node when node falls over Do you know I just nuke my node modules folder And just run npm in it again let it reinstall everything. It's it's literally the windows restart solution and it works Um There is a little tip that I want to give you Before we before we end up for questions. There is something called nvm It's node version manager And what's great about nvm is it allows you to install specific versions of node On your system or per project? And I highly recommend there is a so here's where I get a little bit Salesy if you will Um on learn.wordpress.org there is a tutorial That this this weird person with a much better voice than mine called jonathan bossinger created And it's there's a there's a package in in the wordpress in in guttenberg called create block That once you have node installed once you have npm installed you can scaffold Everything that we did up front remember the hello world stuff all of that it'll scaffold all of that for you So all of that code we generated for you another one and then you can bulge a block from there um And this tutorial using the create block tool on learn.wordpress.org steps you through the process of installing and setting up this The nvm node json all that what it what also exists in this tutorial is That I have set up installation instructions Because I am an operating system node I have mac os and windows and a bunch of on separate machines in my office Because there's no there's no there's no point in saying just go and install this just just run brew install And and linux folks are like well maybe maybe not all linux folks, but some linux folks are like what and windows people are like run Windows terminal So I've set up installation instructions for mac os or linux and windows Um, I I found if you're on windows, I I don't have a problem with that not at all. I'm not one of those operating system I'm operating system agnostic You use what you need to use that makes you the best developer you can be Um, I found that using power shell and the chocolatey package manager on windows was the best way to set all these things up I do find it very interesting that the package the The third party package manager for mac os is home brew Which has beer connotations and the third party package manager for windows is chocolate related So we're basically saying is mac people like to drink beer and windows people like to eat chocolate apparently Um, but I've set up I've set up all the installation steps for that and If you can just get through this tutorial and get this stuff set up on your machine, then all the hard work is done And then you can just go ahead and write the beautiful clean jsx code And import your files and create your components and not have to worry about this Horrible mash of functions calling functions calling functions Okay, so if I if I leave you with anything here today, in fact What I should have done was watch this video and save yourself two hours and go hang out in the expo area um But I wanted to show you that yes, it is possible and again i'm going to repeat myself, but no I don't want to do that Go and check out the user create block tool video I don't get like sponsorship or credits or anything from you watching this There's no affiliate links or whatever that is the benefit of what I do. I'm sponsored to create this kind of content Go and check it out if you don't have it installed on your environment get to the point We have it installed if you hit a snag in the process Please ping me in the make wordpress slack It is literally my job To help literally I would love to help you get it set up I would love you to be able to live in the world where your block code is easier and cleaner and wonderful I would love that. I don't have all the answers as we learned today I've never used a pen child because I've I learned the jsx way Um, but I'm sure I'll find somebody who does have those answers But my recommendation is play with the vanilla way if you want to if you want to check out so I am on social media. I am on twitter Or on my blog I'm after this event I'm going to post a blog post at jonathan bossinger.com with all of these links and all of these details So you'll be able to get everything there Go and check out the example code that I've created and see the two different versions Um, go and read up about nvm go and watch the video and then if you hit snags, let me know give me a shot Finally what I want to say Who here has A smartphone All right, who here When smartphones first came out were like, I don't I don't like these things. It's too invasive. They're tracking me Who here doesn't like all the tracking and all of that that happens when you have a smartphone But you still use it, right? Okay, so sometimes we have to sometimes we have to step out of our comfort zones Sometimes we have to go, you know what I'm going to adopt this new way because it makes my life easier at the end of the day Um, sometimes we have to go. It's okay to have two terminals running. It's okay Well, just we'll just bump up our memory and it'll be fine. Okay But if you can get over that hurdle if you are struggling to get over that hurdle Because you you like being able to just write the code and push it up to the server and all that kind of thing I highly recommend giving it a try and then let me know how it went Is there anybody here today who walked in And they were against Trying out the j6 way and they're now reconsidering it Is there anybody here who was happy with the j6 way, but they were just curious to see what the planeway was Okay, okay. What did you think? Did you like the planeway? No So why were you curious? Maybe there Maybe the build process is different. Okay anybody else Okay, so Got it. Got it. So my my understanding and I I'm not I'll be honest. I'm not a JavaScript developer. I'm a php guy You know JavaScript is always I would use on the front end to do some cool things Maybe some Ajax and that kind of stuff, but I'm not a JavaScript developer, but my understanding is that Because you're using the wordpress scripts package when you're building your your projects It is designed and developed to what they call transpile your code Into completely cross browser compatible. In fact, there's there's a higher likelihood in my opinion at least and I could be wrong So if anybody wants to correct me, they're welcome to but in my opinion There's a higher likelihood that your code will be more cross browser compatible by using The npm build step because it does transpile your code down to all cross browser situations Whereas if you're building it in vanilla You might stumble across some solution somewhere that's using like a newer a newer version of the javascript That what's an ecma script Standard and you might use something that isn't cross browser compatible So there's a and then you have to go and make sure that you don't use that to use something else So in my opinion, there's a higher likelihood that you'll write not cross browser compatible code if you go the javascript way Versus using using the build step because it will transpile your code into something that is cross browser compatible. That's So j sx is is a is a is a Let's call it a templating engine. Do you remember blade templates php blade templates? Do you remember those? And smarty there were smarty templates as well. That's essentially what j sx does and then in the build step The compiler takes that j sx and and compiles it into the plain javascript code. That is cross browser compatible So that j sx is never running in the browser It compiles it to code that is cross browser Yeah, okay, cool any other questions comments suggestions opinions telling me telling me i'm stupid anyone Yes Oh, sorry, there's a mic. Sorry. There is a mic Thanks for the talk. It was great. And I think you very much made your point Are you tired of it now Updates have a tendency to break things especially with blocks Like I've lost track of the amount of times I've built a block updated WordPress and it doesn't work So do you have any suggestions as to um, I don't know how to be a better developer Good good question. So if I could if I could start My answer with a question. What are you using to build your blocks? I was originally using Zach Gordon's build script. Okay, his course I recently started using the The like WordPress Okay, okay okay, so My understanding and again if anybody here is from core from Gutenberg and knows better But my understanding is is when WordPress updates and breaks things That's WordPress breaking things. That's not necessarily your code Because if you're using the if you if if you're writing it in vanilla It's probably gonna break as well because that's something that we're so WordPress is constantly We all know this project is constantly moving fast when it comes to Gutenberg and that has its pros and cons But they're Going vanilla what I showed you today versus going with the jsx. You're not gonna it's not gonna break less if you know what I'm trying to say That's just an unfortunate case of when the new I have I have never Allowed my my personal blog To have auto updates on Um, I always updated myself when that's just the way I've been my whole life I'm like that with my operating system Um, I I used to run a bunch of before I switched to mac because of work And I and I run what's known as the lts version the long term support version And the long the new version comes out and I wait for point one to come out before I upgrade And that's just the way I do things and that's the way I do things with WordPress and that's the only way you really in fact With the last release you had to wait for point two because point one broke Blocks in themes and that was a WordPress problem. That wasn't how you're building your blocks problem If you understand what I'm saying, um, then you're the question that you had before that was Um, I've forgotten now Sorry Oh, not understanding the syntax. Yes. So on that topic I want to show you something very quickly. Um, we're not going to have time to actually code this But you're talking about sort of this kind of thing here Right, so So you don't know what that is that is that is just this That's all it is Passing passing a parameter to a function and then doing something with it That's all that's all it is. Oh, sorry. Hang on. Sorry Not far That's all it is So just write it like that There's no there's no reason that I can't write my unchanged content function like that The new the new syntax is just Are there any Are there any folks here who are like hardcore javascript developers? I'm about to say something that might upset you It's my opinion personally not the not the opinion of the wordpress project. It's just my opinion I don't like that top syntax. I don't okay. I like this one because it's a function That's its name. That's the parameter. I'm passing it. Okay. That's just a personal opinion. That's how I write my functions There is nothing wrong with writing your unchanged like the bottom version The new version is just for the newer folks. It's it's it's it's less Doing things especially if you don't have if you don't have a parameter that you're passing it There's an even shorter version. So it's just writing less code But there's nothing wrong with writing it that way. So you can you can write and I've done this you can write your whole block Using standard function names like that Um, and just have the jsx part in the render and the standard javascript will still work No problem there for sure. Okay. Give it a try Cool anyone else any other questions comments opinions about my hair or lack thereof. Yes I think there's a mic if you want to just sorry. I forgot about the recording. I apologize cool So I don't know the answer to that. Um, I don't work with the Gutenberg team. So I don't know what is planned there I'm gonna it's craig still here. No good. Um, I used to work for delicious brains When they acquired acf I'm a php developer Primarily I love I love the folks delicious brains. This is not a slight on them. I love elliot the original developer of acf This is not a slight on him either I personally don't like the acf way that blocks work I much prefer this way Because you're trying to in my again, this is the the opinion of jonathan bossinger not my company not the wordpress project my opinion It's my workshop. I can have my opinions You're you're trying to there's an american term called shoe horning Does anybody know that term shoe horn? So when you want to stretch your shoe out You put something called a shoe horn in and it stretches your shoe out and you have to really shove it in there Um, I believe the acf blocks thing is a bit of a shoe horning situation Where they're trying to force something into something else that shouldn't really be done that way personally That having been said because I used to work at delicious brains I do know that those developers at delicious brains are trying to make that process a lot better a lot quicker a lot faster Um, but it won't it won't be something that the wordpress project does Matt is my My CEO and he is the project leader But this is my opinion again. This is not coming from matt, but he did tell us to learn javascript deeply about six years ago now um And and there's a reason for that and and that would be my recommendation as well. You don't have to learn it deeply But just understand the basics understand how the jsx works Understand how you can write functions that aren't the new syntax and get used to that environment because one of the one of the The negatives that folks have about wordpress is it doesn't move with the times It doesn't it's not modern. It doesn't move forward and accepting Granted a facebook framework in in react as as the framework for for Gutenberg while um difficult for some Was of a net benefit because now you have folks that can go and work at Shopify, I mean I was talking to somebody yesterday Who has taken his WooCommerce and react experience and he's building Shopify stores and WooCommerce stores um, so So in my opinion again getting used to this functionality getting used to how this works. It just it just opens your horizons Um, it opens your mind to different ways of doing things. It expands your capabilities Your job prospects all of those things Um, and it's fun. I enjoy I enjoy writing jsx code. It's really really fun It's not slow or slow for for development or So so I've never I've never bought blocks with acf So I can't actually say whether it's slow or not. I find it to be very fast for myself um That's a tough one. Is it is it slower because you're more comfortable with asf? ACF, okay Okay, that that that's a fair point. Um Did you spend all the money? Right, okay. I'm with you. I'm with you. So what I do know so What is probably a good thing to check out is this create block tool that I was mentioning um, let me just share the The package Sorry, let me find it here Gutenberg So in the Gutenberg repository, there is a packages folder and inside of packages is create block Where is it here? Create block and create block does more than what I just talked about in the in the video. Um, it has something called Where is it now? It has something called a template so you can set up templates when you're creating a block and automatically generate block code So I would say if anything it would probably be in this in this project this tool if and here's here's the fun part We all know it's open source, right? Those of you who are here yesterday contribute today You all know we can contribute to this wouldn't it be amazing if everybody went everybody who was working on acf went Hey, let's see if we can update create block to be able to pass in npx create block Dash dash form dash dash input name input email submit button and it just generates that code for us That would be cool, right So I don't know whether the create block team is going in that in that route I'm sure they would love to hear from you If that's what you want So so hit them up on the github. Maybe create an issue. Maybe see if it's currently possible And if it isn't let them know and maybe they'll maybe they'll build it Because Ultimately what do we want? We want tools that make our lives easier, right? That's all we want That's why you like acf it makes your life easier So if we can take the tools that we have that create this jsx for us and make them easier and faster and we can build things quicker Then we can all go make more money And isn't that the best way to do things, right? Okay, some of us don't want more money and that's cool, but you know making more money is cool. I think Um, so yes, I don't know for sure whether there's a path there, but that might be something to investigate Okay, cool. I hope that answered your question if it didn't I apologize Um, but it's not something that I have knowledge of in in my head Any other questions comments issues Cool, awesome. Well, thank you for joining my my rambling Journey down creating plain javascript blocks. I see only a handful of people left. So clearly it was interesting Or you have nothing better to do If you find me, I'm here for the next two days. I'm going to go find coffee now and hopefully something to eat soon But you're welcome to come up to me and ask questions I'm not I'm not the best at understanding different dialects. So you might have to bear with me But you're welcome to ask me questions You're welcome to DM me in the make wordpress slack at any time if you have further questions about any of the stuff or anything You're if you're learning anything my job is literally to help developers learn new things So if you want to learn the stuff and you're getting stuck, let me know, please. I would love to help you Um, otherwise, enjoy the rest of your word camp and I'll see you at the after body. Yes Okay, thank you very much


Hello, and welcome to this session. This is Professor Farhad. In this session, we would look at additional deductions and losses, and in this session, we're going to look at research and experimental expenditure. This topic is covered in an income tax course, the CPA regulation section, as well as the enrolled agent exam. Now, as always, I would like to remind my viewers to connect with me on a personal as well as a professional level. If you have a LinkedIn account, please connect with me on LinkedIn. I do post my lectures, as well as other related news to the industry.  You want to make sure you subscribe to my YouTube. This is where I house all my lectures. And if you happen to like my YouTube, please like them. Please share them. Please put them in playlists and notify your friends via email, via social media about them. I do have a Twitter account, and I do have a website where I house my courses, lectures, by chapter, and experimental expenditure. Now, when you think about research and experimental expenditure, think of R&D. Remember when you learn about R&D for financial accounting purposes. What is R&D? R&D is when we try to find a new product or improve or enhance an existing product. Well, what do we do with R&D for financial accounting purposes? So what does GAPs state, generally speaking? Generally speaking, we expense R&D under GAP. Now, for tax purposes, we have to learn the difference. Now, there are twofold why I want to make sure I go over this. I go over this topic. One is you have to know it. I mean, you just have to know something about how do we treat research and experimental expenditure, especially if you are working with a pharmaceutical company. That's one example. But the second thing is it's a learning process about comparing IRS to GAP. Because at some point in your career as a student, you're going to have to take the third income tax as the third tax liability. And eventually, you're going to have to prepare a schedule called M1. And when you deal, when you reconcile between tax, IRS, and GAP, you want to make sure what differences is there between the IRS and GAP. And research and experiment is a good topic to discuss. And when you prepare schedule M1, when we talk about M1 schedule and corporate income tax too, which is the second part of this course, you need to understand there are certain items that are treated differently between GAP and IRS. And this is one of them. So you need to learn about it, but you also need to know that's one of the area of differences. So what's the definition of research and experimental expenditure? Well, it's cost for the development of an experimental model, plan, process, product, formula, invention, or similar property and improvement of such existing property. It also could include the cost of obtaining a patent, such as attorney's fees, application for the patent, expenditure that represent any type of R&D or laboratory cost. And my wife used to work in a laboratory early in her career. So it's an interesting phenomenon, especially if you are dealing with pharmaceutical company. Now let's get back to taxes. Now, how do we deal with R with research and experimental expenditure? Actually the IRS and Congress are very liberal in a sense they give you three alternative options, okay? You can one thing, expense them in the year, in the year paid or incurred. If you treat them this way, they're like kind of, kind of GAP, that's what you're doing because GAP says R&D doesn't, there's no future benefit in R&D, therefore you have to expense it, that's one option. Two, you're gonna defer and amortize over 60 months. So what you do, you defer, defer means wait, wait until the project start to be realized, okay? Basically the project is viable and you will defer over 60 periods. Or you could just simply capitalize. And what you do, once the project, you notice that the project, you find out that the project is abandoned or worthless, it means everything that you did it's not gonna lead to any final product like you're working on a drug but the FDA did not approve it. Basically all the work that you did is worthless. So you have three options, okay? You can capitalize, expense over a period of time or expense immediately. Now also there's a 20% tax credit on certain research and experimental expenditure that's available but we'll discuss this later on in a different chapter when we talk about tax credit. Now the best way to illustrate this is just to look at a quick example, okay? A gold corporation decides to develop a new line of adhesives. The project begins 2018. Gold incurred the following expenses in 2018 and 2019 connection with the project. So they incurred salaries, material depreciation, this is for 2018, this is for 2019. So how do we deal with this? The benefit from the project will be realizing starting March 20. So we will have a viable, saleable product March 2020. If gold corporation elect the 60 month deferral and amortization period, simply put, there's no deduction prior to 2020, okay? Simply put, if they decided to go with option two, if they go with option one, we expense all these expenditure every year. We're saying we're gonna go with option two. With option two, what we do is we defer the expense and we'll start to realize it to start to expense it when the project becomes viable. So what happened is this, we had all the expenditure for 2018 salaries, 2018, 2019 material, 2018, 2019 salaries, 2018, 2019 material, 2018, 2019 depreciation, they're up to 65,200. And what we do is decided to amortize them over 60 month, divided by 60 month. So in 2020, we will deduct $10,867. So we took option two. Now if we decided to capitalize, we just don't do anything, just capitalize make it as an asset. Just looking forward under the tax cuts and jobs act of 2017. So this is a new rule. So now the IRS is becoming less liberal or more restrictive. Research and expenditure must be, now you don't have an option, must be capitalized and amortize, amortize. The expense method is no longer available, which is gonna create a difference always between GAAP and the IRS starting 2021 because GAAP will always expense R&D. Now the IRS says amortize it. Now just I wanna mention something here before I proceed. When do you think company will choose option two and why? Well, company choose option two when in the current year or in the next few years, they don't have income. So if the company does have no income, in other words, the company is starting and when the company start, they incur a lot of R&D research and experimental costs. So what happens in those, for example, in year one, year two, year three, they may not have any income or the income might be low, but in year four, they might have a lot of income. So the best way to do is to defer and amortize later when the income comes. So that's the best way it gives you more flexibility, okay? Just FYI. So back to the future, what's gonna happen starting 2021, it must be capitalized and amortized. That's no longer expense and no longer an option and they're gonna change two other categories. First, capitalization occur at the midpoint of the year, the expense are paid or incurred rather than the month in which the taxpayer first realized the benefit. So going forward, what's also gonna change is it's the year that you pay the expenses, you incur the expenses, midpoint throughout the year, you have to start to expense it, not when the product first realized benefit. Second, the expenditure are amortized relatively over a five year period, 15 for research that's happened for foreign research expense, rather than relatively over a period, not less than 60 month. So it's no longer not less than 60 month, it's gonna be five years, five years. So hopefully in this session, you learn about this topic. Once again, this topic will appear, you will see it again in your intermediate accounting courses when you study gap. So you wanna make sure you see the difference between the two and hopefully you appreciate this comparison. If you have any questions, any comments by all means email me. Well, if you need to learn about this topic from financial accounting perspective by all means, go to my website and go to my intermediate accounting courses. Otherwise, good luck. And if you happen to visit my website, please consider.


He lived in the tombs, had supernatural strength, suffered with self-infliction, and was tormented in the mind. He was the man insane with the Legion of Demons. As Jesus stepped out of the boat, the demonized man saw him in the distance and ran to meet him, wanting to be free. This man who lived in darkness cut a glimpse of the light. Though the man ran to Jesus, the demons within him were tormented by the presence of the Son of God. Jesus cast the demons into a herd of pigs that then ran down a steep bank and into the water. In an instant, the man's years of suffering came to an end. Not a single spirit remained. The man was restored to his right mind and wanted to follow Jesus.  There is no spirit more powerful than the Holy Spirit.


I will have students who will not they just they don't like to speak in groups But when they get in a hypothesis they drive conversation they drive discourse and they'll have all of their peers jumping on to comment and Engage in ways that just don't happen in the classroom And I love that because then those students have this really powerful voice And it gives them an opportunity to demonstrate their learning and to really drive discourse and conversation So much so that that will oftentimes serve as a jumping-off point for me in the next class. So


What's the purpose of life? You make one up. Hell, wealth, love, happiness, rebuilt from the ashes with precision. That's all I can say. With precision.


We're on the subject still of LGBTQ plus rights and Candace Owens on her show slandered LGBTQ teachers saying pedophilia is around the corner We must not give these freaks and predators so much as one inch now the reason why Candace Owens is popular is one because she takes whatever conservatives are saying and She raises the yikes level to like a 11 or 12 She goes a step further whenever they say something extreme. She says something Exponentially more extreme.  She's so fake So she's going to the trope. Oh, well gaze or pedophiles, you know Conservatives will try to dance around that. They'll say, oh, well, they're groomers They want to say it but she'll just come out and say it.  Which basically legalizes child marriage? Let's watch it though But we just examined is a mentally unstable adult predator who has access to children our talk about projection Talk about projection.  You have to be unstable to do what she does I wouldn't live with be able to live with myself if I did what she did, right? Children and there was only one kind of people who don't see it that way and those are Other predators like Disney a company which focuses its content Exclusively on children they publicly announced that they are going to fight Florida legislators on behalf of these child groomers in the classroom They will demand that these people like the woman that we just showed you has a right to speak to your child about her Partners trans feminist whatever that even means. Yeah, she that's a great point only fact She won a court case for school district racism against her in middle school and got a good bit of money, right? So, you know she has first-hand experience with racism and now she denies That racism is a prevalent issue. She denies I think institutional racism. She said that the southern strategy isn't a thing I mean, it's just it's gross. Most people couldn't do this There's just the select few that rise to the top because they're so craven so morally depraved that they're willing to sell out their own communities and Subject them to prejudice and discrimination For money.  He's gonna have two kids and yet he's still will claim.  I saw the video that executive who said that All she was talking about was that her goal is to include as much LGBTQ plus representation in Disney movies and television shows As she possibly can and that's her gay agenda.  What does that mean in particular to you?  Do you think that she's doing this because I don't I don't know like she wants to turn all of America gay?    Leave us alone.   I just I Don't know like they try to sell it as something nefarious And she knows it's not nefarious, but the audience will think oh my god the gay agenda.   We didn't eat Cheetos.   Just do it already though Like stop talking about it.   I mean they keep doing this mr. Potato head cat in the hat now Disney Why don't you focus on something?  Yeah, let them fight. Good point But we'll follow this the intentional and overt confusion sexualization of our children in the classroom is obvious Pedophilia is around the corner and don't you allow them for one second to convince you that that's some imaginary Fallacy that exists in your head. The slope is real.  That's grooming.  That's that's fine.  There is no logic. She's just she got her talking points from GOP headquarters.   I'm just gonna say it. Welcome to Candace


We're here at GET 2016. It's the second global forum on emergency telecommunications in Kuwait, and I'm very pleased to be joined by the Honourable Capembois Simbao, who is the Minister for the Ministry of Transport and Communications of the Republic of Zambia. Minister, thank you very much for being with us in this studio today. Thank you. I'd like to start off by asking how, in your opinion, can disaster risk reduction in management help achieve sustainable development? Yeah, well, as you know, disasters damage infrastructure in most cases. And for countries like Zambia, which is a least developed country, any damage to infrastructure is a very big drawback because it takes us quite a lot of energy and resources which we really don't have to replicate or put up the infrastructure that got damaged. So that's how I would explain the linkage between the two. And what are the major concerns for you in terms of disaster risk reduction in Zambia? First of all, is to save lives. First of all, that's our major concern. You know, any life lost due to disasters is very painful because it's something that, if properly looked at or planned, could be avoided. So first of all, our concern is to save lives. And of course, later to bring back to normal the lives of the community who have been affected. And what in your opinion is the best way to move forward from planning to implementation? Yeah, I think in our case as Zambia, we have a problem of not having an early warning system. And as such, we just react to disasters when they happen. So planning becomes a bit difficult until maybe we have a system like what I understand now ITU, trying to start with just one area in our country. And then they hope to expand that system to the rest of the country. I think if we have that early warning system, it's easy first of all to plan and also then get ready for implementation. We believe that we need to put up a centre, I don't know how to call it, a command centre where everything can be coordinated. And as such, implementation I think would be easy because once something happens and then we know that for example we don't have ambulances, then we know exactly where to position ambulances so that next time something like that happens you easily command that particular sector to go over there. But I think to start with we need the command centre and I believe it might cost us quite a lot of money to put it up. And the role of ICTs in all of this? Yes of course, all this is coordinated by city and without it I think it wouldn't just be possible. So first of all we have to strengthen our arm of ICT which I believe we are trying as a country. And finally how can events such as this at GT16 help stakeholders join forces for a better tomorrow? First of all I must say that this has been really eye-opening. I'm glad I came here. I think this is the first time I guess a person at my level has attended a meeting like this. In the past our deputies have been assigned for lack of appreciating the importance of meetings like this. So I'm glad I came and really it has been an eye-opener. There are a number of things we have to go do when we get back home. For example I haven't signed the temporary convention I think which puts that at a very big disadvantage. And we also haven't signed another paper to do with ITSO. Again that is not good for us because whatever is happening in these circles I think we are being left out. And I think if I didn't come probably there wasn't going to be enough authority to go back home and try to enforce to do these things by the country. So me coming here I think has helped Zambia because when we get back home we will seriously look into these things and get on the same table or platform like the rest of the other people. And I believe that's how we are, you know, coordinating for having been here. Well it sounds very positive and we wish the very best for the future. Thank you very much Nave Mimwys. Thank you. Thank you for giving me the opportunity.