 Okay. We are back. If you are regular to these sessions, you'll know that I haven't been around for about a month now. This is my first online workshop in the bottom month. And hopefully I still remember how to do these things. As you're joining us today, please do feel free to share in the chat where you're joining us from. And you're welcome to share what you do with WordPress. Morning to you too, Valerie, top of the day to you as well. It is kind of cool to be back. I didn't plan on being away for an entire month. It was only going to be two weeks. But let's just say I had some back trouble. I'd injured my back before I went away on my trip. And I was treating it with anti-inflammatories and painkillers. But I didn't realize the severity of injury. I only discovered that when I got back. So I had to spend a week, two weeks in recovery, which was not fun. And I'm now finally this week sort of 95% back. So that's one of the reasons it took so much longer to catch it. Hey, Dash, joining from Virginia. Welcome. Dash works in higher education. That's awesome. Hey, Jean. Good to see you again. Jean's in New Jersey. Hey, Adrian. Adrian says, I wondered if he'd made sure I was uninvited. I'm going to leave that out of line. Hi, Arthur from Frankfurt. I'm going to assume that I pronounced this next name correctly. Javier, I assume that's correct. From Navarra, Spain. Welcome. I was in Spain. Maybe we met in Spain. I was in Spain for my work trip. Javier, were you at the meetup in Malaga, perhaps? Let us know if you were there. If you're not, we're good. Let us know if you were there. Welcome, John, from Chicago. We've got shit from San Angelo, Texas. Works in an agency. Great. I've got a wide range of folks here today. Very quickly, an introduction to myself. If you don't know me, my name is Jonathan. I live in Cape Town in South Africa. I'm currently a developer educator at Automatic. I always say currently because things can change. I hope it doesn't change, but that's currently where I'm at. I'm sponsored to work with the training team, the WordPress training team. We do various educational things like these workshops and tutorials and various other things. I'll be honest, these workshops are probably the best part of my day, best part of my week because I get to chat to other folks and share things with other folks. Today and for the rest of the year and maybe even into next year, we're going to be looking at some of the new things that have been coming to WordPress over the course of the last few years. The focus of these workshops is going to change slightly. It's going to be a little bit less formal, if you will. Previously, my online workshops are very structured and very formal. These are not going to be so structured and formal purely because I'm going to be working with things that are either still under development or coming soon or just been released. It's going to be a little bit more mad experiment-y, which we've done a few of those in the past, and a little bit less looking at older legacy things. The main reason for that is that the training team has embarked on a new project, which is going to be our focus for the rest of this year and at least the first half of next year. I want to share this link with you. We're going to be developing learning pathways for Learn WordPress. Let me just hide this welcome box and let me share this link with you in the chat. The Learning Pathways project is essentially a way of making the content on Learn WordPress more formalized, more focused with a bit more of a guided pathway into learning a specific topic. We're going to have very specific user-facing learning pathways, designer-facing learning pathways, and developer-facing learning pathways. Focus, should I say. Facing is maybe not the right word. If you are a brand-new user to WordPress, you will start at point A, and then you will follow the very structured steps until you get to point Z, and then you will have learned everything you need to know about how to use WordPress. If you're more of a designer and you need to go a little bit deeper than the average user, you will have a point A to start with, which some of it will be similar to the user point A. Some of it won't, and you will then go through a specific progression. If you're more of somebody who wants to develop with WordPress, maybe you've done the user and or designer pathways and you want to dive into developing plugins, developing themes, contributing to core, doing all kinds of complex integrations, there will be a specific developer pathway, and you will start at point A and end at point Z. And so because we're working on this more formalized structure, it allows those of us who are running these workshops to be a little bit less formal with our workshops, which allows us to be a bit more creative and hopefully make them a bit more interesting. So that is going to be my focus moving forward. And so this week, I'd like to chat about a new API that has come to WordPress. It's called the HTML API. You may have read about it. You may have seen it. It was initially shipped with WordPress. Well, the initial version of it, I think we shipped with WordPress version 6.2, which was about two versions ago. And there was some updates with version 6.4. So we're going to kind of dive into it today, have a look at how it works, what it does and why you would need to use it. Before we do that, let's dive into a few announcements just to kind of set us all up. So again, welcome to everybody who's joining us. I don't have a co-host with me today. So please bear with me if I have to do things like check the chat or admit folks and things like that. Please let me know if you can't see my shared screen. So right now, there should be an announcement slide on the screen. If you don't see that slide, please let me know. And I will re-enable the screen share. At any point in time, if you lose the screen share, let me know. You shouldn't see a bunch of, just a bunch of faces. You should see my shared screen at all times. We are presenting, as always, in something called focus mode. What focus means is I can see all of your video screens, but you can't see each other. This just helps protect folks. We have had one or two issues of Zoom bombing over the years. So this just helps protect us from anybody who might try and do that. If you would like to enable your videos that I can see your face, you're more than welcome to, but there's no requirement to do that. You're welcome to just stay hidden. I don't mind. I get paid to be on camera, but you don't. So you don't have to. You are always welcome to ask questions. You're welcome to ask them in the chat. I see that Crash has actually just said he can't see anything. So let me re-enable the screen share while I'm chatting. So you're welcome to ask your questions in the chat. You're welcome to unmute to ask questions. I don't mind either way. If you do unmute to ask questions, the only thing that I do ask is that you, if your question doesn't specifically pertain to what we're doing on screen at the time, you keep that question for the breaks that I allow for questions. Otherwise you can just post in the chat at any time and I will break and follow up on those questions. Crash has done me. I love your nickname, by the way. If you could just confirm, can you see my shared screen now? I have re-enabled the screen share. So let me know if you can see that or not. Okay. Moving on to announcement slide number two. If I start rushing off and going too fast and running through things too quickly, please do let me know in the chat or unmute and say, hey, slow down. I don't mind being told to slow down. I do sometimes speak too fast. I think I have gotten better at this over the course of the last year and a bit, but there's always a room for improvement. Crash says maybe permissions problem. Okay. Maybe try a different browser. It could be a permissions problem. I've never accessed a Zoom session in the browser. So I'm afraid I'm not going to be able to help you troubleshoot there. My recommendation would be to use the Zoom client if you can. I believe the Zoom client works better than accessing this in a browser. So try with a different browser that might work. Usually re-enabling the screen share fixes that problem, but let us know how it goes. But then on that note, Crash has done me for your own purposes. We are recording this session. So if you're unable to watch this now, you can watch the recording and the recording will have the screen share. We also, I paced the links to all the code, all of the links that I share in this chat. So I have had folks in the past who've been able to follow along just by listening and opening up the links that we work with. My slides are literally just the introductions and then the list of links and all the code that I do on screen, I share in the chat or the links I share in the chat. So we could probably make it work that way. But we will be, we are recording this and it will be posted to WordPress TV afterwards. And on YouTube, by the way, if you didn't know this, and this might be a good time to share this with you all. WordPress does have a YouTube channel, which I'm going to see if I can find now. WordPress, it's probably not going to come up here. I'm not going to find it now, am I? Flip. Let's try, let's just try YouTube WordPress, that might be it. Probably should have got this link beforehand. Oh, there we go. It is just YouTube WordPress for looks good. So this is the link and all of our videos that get hosted on WordPress TV also get uploaded to the WordPress YouTube channel. So it's kind of like once it gets uploaded to WordPress TV then within about, I think a couple of days it gets uploaded to YouTube. So if you prefer to watch these things on YouTube, you can get hold of them there. It's always weird to me when one of my workshops or one of my videos comes up in my YouTube feed because I'm subscribed to the channel and it's kind of weird to see my face pop up. But if you prefer using YouTube, you can go and check it out that way. So I do recommend checking that out. I'm going to add this to my slides now so that I remember to add it next time because I want to let folks know about the YouTube channel. Okay. What are we doing today? As I mentioned, we're looking into the new HTML API. We're going to briefly discuss the problem that it's trying to solve by looking at a slightly real world example. It's probably not the best real world example, but it's an example that I have experienced before. And then I'm going to dive very briefly into alternate solutions that I have used in the past that I've seen others use in the past to kind of solve the problem. So some of these might be familiar to you and we'll kind of discuss pros and cons to both. And then finally, we'll get into the HTML API, what it does, how it works, and the pros and cons of using it. And then right at the end, there's some links that I'll share with you where you can read up about it. Because it's so brand new, there isn't a page in the Common APIs section of the developer documentation yet, but there is a code reference. There is a class reference and the code reference that you can read up about that. I'm hoping to work on a page in the Common API section in the near future, but there is enough information, at least on the code reference page for you to read up about what it can do and how it works. If you would like to code along with me today, or if you're watching this video on WordPress TV and you want to try out these experiments yourself, you can do. The only thing that you will need is a local WordPress installation of your choosing, one that you can edit the files so that you can edit the themes or that kind of thing. You will then need a text editor of some kind to edit those files. I use Visual Studio Code in these sessions because it's free and open source. I use PHPStorm otherwise, but that's a paid product, so I don't like to use it in these sessions. Then there's a custom image plugin that I'm going to be working with. If you want to install this plugin on your local site, you can do. It's not a very big plugin. It's just a few lines of code. It basically adds... It basically adds two custom image blocks to your block editor, but you can download that and install that on your local WordPress site. If you are on a Mac and you're running Safari, when you use this direct download link, it might try and extract the folder to your desktop or wherever you're downloading it. I recommend using a Chrome browser to do the download, or there's a way to change those settings in Safari. You might just have to read up about that, but I recommend using either Chrome or Firefox or something like that, just to do the download. All right. I'm going to get my local environment set up. This is my local WordPress install. I don't have any plugins installed at the moment, I don't think. No plugins installed. I'm going to add that new plugin by going into the plugins page, clicking Upload Plugin, and I've got it on my desktop, so there it is, WP Learn Custom Image, and I'm just going to move something so I can click on a button. In the video window, it always gets in my way. There we go. So I click on that button, and that's going to add the plugin. I'll click Install Now, and it uploads and it installs, and then I can activate the plugin. And as I mentioned, all the plugin does is add two custom blocks to the block editor. So if I go and create a page now, I'm going to create a brand new page. I'm going to call it my new page, because I can't think of any decent names. And then I'm just going to grab some random text somewhere. So there's this thing called loram ipsum, that you can... It's ipsum.com, I think it is, or lipsum.com, one of the two, can't remember now. If you've built... No, it's not that one. It's lipsum.com. If you've built websites in the past, I'm sure you've used this site before. If you haven't, it's a great way to generate some random fake Latin text. One of the agencies I used to work for, we used to use the lyrics to vanilla eyes as eye size babies. So that's another way to do it. But I'm just going to pop some random text in here. And then I'm going to add one of my custom images. So I'm going to click on the add block button, and I'm going to type in custom image. And you'll see that there are two images that this block exposes for me. The one is a custom image with a class and the one is custom image with outer class. For now, I'm just going to add another class. It's a picture from another site that generates images of a pair of shoes. I literally chose the IDs randomly. So this is not my shoes. These are not my shoes. But that's the page. So we've got some text, we've got some images. This is a page in the block editor. I'm sure we've all seen what this looks like. Then I'm going to save this page. And I'm going to preview it on the front end. And if I inspect this image, you will see that the... Let me make the HTML editor inspector a little bit bigger. Let me bring this down here. Here we go. You will see that what it does is it adds a div with the block, custom block class. And then it adds an image tag to the div. There is the link to the image. It's using the pxm.photos image generation site. It has a class of default. It has a placeholder alt tag. And then there is this data-image-class attribute. Now, if you've never seen an HTML attribute like this, this is something we often used to use back in the jQuery days. We would add like data-id, and then we would store the id there, and then we would use that to get the id and do something with it. It's basically you can define custom attributes on HTML elements. And so this is a custom attribute that we're using with some information. You can see in a site in the wild anyway. All right. I'm going to take a break there now and just check if anybody has any questions or if anybody's still busy getting up there, getting up, getting their local environment set up before we dive into why we might want to look at doing this. Adrian says, how did you get the image? So it's another image generation site similar to the Lipsum site that I was using earlier called pxm.photos. You basically just you can pass in the URL pxmphotos and then just the dimensions you want. And it'll randomly generate an image of that dimension. You can also, puppy, you can also specify an id and using the id then you can get an image of that of that dimension. It's similar to another site that I used to use called placeholdit. Placeholdit, though, is kind of boring. It's kind of boring. It just gives you an image with you see there's an example here. You can do different types. But I just I just found personally, I like the puppy of my own page. I like animals. So it kind of got me to use this one. But it's any kind of image generation that I'm using. So if you have a look in the code, let me share the code with you very quickly. Let me pop into the plugin code here. This is the source code. You'll see that the block with the class. There it is. I'm just I'm literally just hard coding that image into into the image tag being generated. Dash says there's also place kitten. What? Why did I not know about place kitten? Oh my word. I have to go and see this now. Sorry, I love cats. So I have to go and see this now. Placekitten.com Dash, you have just changed my life. I will be using placekitten from here on in for all of my images. Thank you so much. I do love animals, but I do like cats more. That's awesome. But I just stopped the workshop here and we just do kittens all day. All right. No, we're here for a reason. So let's talk about a possible problem that you might have. So let's say somebody is building a site or has bought a site and you're hired to do some customizations for the site or you're building a plugin that does certain things. Oh, no, Adrian's just shit. They're not Ipsum and that's going to go down and wrap it hold on. Let me look at it. And let's say you let's say you're building a plugin that needs to take every single image on a specific page, for example, and it needs to add a specific class because there's some functionality you want to trigger. Maybe it's in JavaScript. Maybe it's somewhere else, but every single image needs to have a class and you need to be able to apply this class to every single image. Now for good or for ill when a WordPress post or page saves the content it stores that content as a raw HTML. If you if you didn't know that now's a good time to understand that that's what's happening. I can show you that very quickly. Let's actually go. I don't expect you to do this, but I'm going to quickly go into the database of my of my local site and show you that I'm not correct username password would be helpful and just show you that I'm not necessarily talking through the hole in my head. So let's go to learn press. Let's go to posts. It'll probably be the last post on the page. There's my new page. There it is. And there you can see you just double click on this and make it a little bit bigger. There you can see the code that is being stored. So this is essentially what's known as block markup. I'm going to copy this out and just pop it into a into a file so we can see what that does. Let me just create a new HTML page here quickly and see if this is why I said these things are a little bit more experimental page HTML. So this is the block markup that gets stored in the database when we save this page and you'll see it's using these block tags, which are HTML comment tags with the name of the block. So they're opening and closing tags. But then inside of the tags it's essentially just standard HTML marker. So this is a paragraph that's actually format this better. There we go. So this is a paragraph tag with text in the paragraph. This is a standard div with a standard image tag inside of it with various attributes and then a closing div. This is all standard HTML and this is how WordPress stores the content in the database when you're working on posts posts or pages. There are pros and cons to doing it this way. The pro is that if the block editor falls over it's still HTML with the cylinder on the front end. The downside is you're storing a lot more of the layout in the database than what you maybe should and there are arguments against you know for and against both options. This is the decision that WordPress has made and this is what we're working with. So if I wanted to build a plugin that applied a specific class to all of the images in any post or page or wherever I'm going to need to be able to work with this HTML. So let's say the requirement is I want to find every single image on a page and I want to add a class called new class to that image. There are a number of ways I can do this. So the first way that I could do this maybe would be to use some JavaScript. I could every time the page loads I could wait for the page to load and then I could run through all of the image tags and apply the class to it. That's one option. So let me show you what that would look like just so you get an idea of it. So what I'm going to do now is I'm going to create a brand new plugin in the site. In the plugins directory I'm going to create a new folder and I'm going to say wp-learn html-api.php this is my main plugin file oh sorry it's supposed to be a folder that stopped. There we go and then inside of this I'm going to create a new php file and I'll just call it wp-learn html-api.php and this is the file that will load whatever functionality I need to do. Then if I want to do this in JavaScript I'm going to use JavaScript file there are many ways that I can store my JavaScript file in my plugin. I can put it inside of a js folder inside of an assets folder inside the root of the plugin because this is just an example I'm just going to stick it in the root and I'm going to call it wp-learn html-api.js so that's my very simple JavaScript file and then the JavaScript code looks a little something like this this is a very simplified version of what it is make that a bit bigger but essentially what it's doing is it uses the document event listener when the DOM content is loaded event it then calls this anonymous function which essentially uses the query select to all method to select all elements with the IMG tag and then it loops through all of those images and applies the new class to those images so you may or may not have done something like this in the past I certainly have done things like this in the past I've applied things to elements in JavaScript that's kind of what that code looked like let me show you that sorry was that a question my mother nature had called sorry cool so to to make this all work I'm going to yeah so to make this all work what I'm probably going to need to do is I'm going to need yeah no worries I'm going to need to enqueue this well it's my fault originally for not having it ready so I'm not sure who's chatting right now are you asking me a question are you on the phone are you on the phone yes all right now I'll be mad quick look okay I think he was on a phone call there all good alright so as I was saying to get this to work in the scope of WordPress sites I'm going to need to do what's called enqueue this JavaScript in a plugin if you've never seen how to enqueue a plugin in JavaScript before I'm going to share the documentation with you the function you would use is this WP enqueue script function I'm going to share that in the chat now as well but this code what the code looks like is something like this inside of the PHP file first of all I'm going to need a plugin header so that looks a little bit something like that I'll share that with you in the chat so it opens up the PHP tag it sets up the plugin header with a plugin name and description if you wanted various other things you can do as well and then you can also do something like this you can check if the abs path constant is defined if it isn't defined you can exit meaning if this is not running in the scope of WordPress site don't run the rest of this code then you would do something like this you would use the WP enqueue scripts action so you would say add action WP enqueue scripts and you would then define your own callback function to run sorry I'm just going to if you're on the phone right now I think your mic is enabled I'm not sure who that is would you mind just muting your mic if you are on the phone there we go thank you okay you hook into the WP enqueue scripts action you define your own callback function then you need to specify the callback function so it looks something like this you say function open flowers brackets and then you set up your function code and then you use that WP enqueue script function that I shared with you earlier in the documentation and you do something along the lines like this I will dive dive into this quickly with you so we understand what it's doing it's basically saying enqueue the script file give it the handle WP learn HTML API the file path of the JavaScript file we want to use you can there's many different ways of doing it this is one way you can say use the plugins URL and then build it and take it and put it on top of that and then that's the file to be rendered you can specify an array of dependencies I'm not specifying any at the moment and then what I like to do during development I'm going to copy this quickly into the chat so that folks can see it if they need to what I like to do during development is I like to specify the time function as the version number because what that means is every time the PHP code executes the time function will update give the code a new version number and refresh the cache making changes to JavaScript is an easy way of basting the cache when the code is done and I'm ready to distribute it then I'll change that version from time to a proper version number so that's what the code looks like this is very very sort of simple and I'm not worrying about security and things like that right now I'm just enqueuing this JavaScript file for WordPress and then this is the JavaScript file that's running so if we do that we would now expect to see the new class class being applied to all images so let's see if this actually works so the first thing that I'm going to do is I'm going to activate this plugin so if I go to my plugins page there is the plugin that I created I'm going to activate that all good that's activated if I now go back to the page that I was testing and I hit refresh I should see the change happen so let's refresh that and if we inspect the shoes we now should see a change so I'm going to move some things out the way so I can see and there we go so let's make this a bit there's my little there we go so there you can see it is added to the default class it is added a new class it has done what we've expected it to do okay so that's great it works wrap up, job done, move on there are however some downsides to doing this way so the one downside is that you're now applying this to every single image across the entire site and you might not necessarily want that to happen you might want it to only happen on content images for example or various things also the other downside is that because this is happening on the JavaScript side it means that first the page has to load and then once the page is loaded and the JavaScript flies then the JavaScript flies and it makes the change and we didn't see any problems of that on our very simple example but if you've got a whole bunch of images and a whole bunch of content and a whole bunch of JavaScript then you end up in a situation where you might see what I think is called the flicker where the image or the content or whatever loads and then there's sort of a change when something happens when those classes are applied maybe the class applies a background color or some other visual functionality so while this is one solution it might not be the right solution for your environment Trimmy says I would prefer the function file time over the time function we'll take the last modified time of the file this will work with the cache yes that's definitely another option there's many ways to do it it's just a personal thing I like using time I would never leave either of them in a production environment it's purely a local thing so yes that's definitely an option it's up to personal preference okay so that's one option one way we can look at it one thing we can do the other more sort of effective option is to handle this on the PHP side so what you could do let's say your focus is I just want to make this change to any images inside of content inside of page or inside of post content I want to make that change well WordPress has this lovely filter called the content which runs every time the content is sort of generated and you can hook into the content filter and you can apply something to the content so first of all you could use that to say well if I just want this to be applied to the content of posts and pages that's the perfect thing to do so number one I'm limiting the scope of where this is being applied step number one so to do that I'm going to remove the NQ strips code and I'm going to add filter because I want to hook into the filter of an action and then I'm going to also define a callback function so in my case I'm going to define it as just WP Learn HTML of the content as you can see I don't have the best naming conventions in the world for my example code and then I'm going to need to define that function so WP Learn API the content and this callback function will receive a variable that contains the content of any post or page so the content the content filter always fires when a page or a post is rendered so I will always get the content of that post or page to verify that for ourselves what we can do in this code and I'll share it with you just before we run it is you can do something like this you can say echo and then you can print R the content and passing true which will I can't type today print R there we go so you can echo that so print R is a way of printing a variable when you pass true as a second parameter it passes back the result and doesn't output it to the screen and then you can close that with PRE tags or at least close the PRE tag and you can see the information inside of it so this is just one where you can check what's happening in the content variable there are other ways you could log it to a file you could do various other things but for now we just want to keep it nice and simple we want to be able to see it on screen if you come to some of my workshops you've seen me do this a few times before so if we now refresh that page again it's kind of it's kind of at the top here we can't really see it because it's HTML but if I inspect this you will see that there is the PRE tag and then there is the paragraph and then there is the div with the image so that is getting just the content which is exactly what we want to work with now we're not working with the whole page we're just working with the content you see it's the same content that we stored same HTML content that we use so that's great, that's already better than trying to do it to the whole page but now you have a couple of options and one common option that folks use is something called regular expressions I've never worked with regular expressions before I'm going to show you an example of what that could look like today's workshop is not about regular expressions I don't want to dive into how they work and what they do but essentially a regular expression is a way of there's a special kind of formatting that you can use that you can pass to the regular expression functions that says if the code matches this regular expression then I want to make some changes to it and there's many different ways that you can do it but the one simple way would be to use what's known as the pregreplace function which is a PHP function which performs the regular expression and then does a search and replace so what this code is doing is it's looking for image tags with a class using and it's doing various other things and checks and whatever else and then it's saying return the existing class with the one that's currently there with and then add the new class that I want to add to it and I'm not a regular expression expert so I don't know what all these other tags do so if you do know what they do that's great you can let us know in the chat but the other characters are performing additional sort of functionality to perform additional checks using the regular expression but it essentially says look for all image tags with a class and then add the new class to the content and then return the content so that's what that is doing over there so let's see what that does let's see if that does what we expect it to do let me share this with you in the chat and let's have a look so if we refresh this now and we inspect the shoes we should see that there it is the default new class the new class class has been added great when and regular expressions are a very common way that developers use to make changes to HTML attributes there are a couple of downsides to regular expressions though let's talk about the upsides first the upsides are regular expressions are very performed they're very fast if you get the right regular expression and it does the right matching it's going to be very quick to do the regular expression search and replace so if you're having to work through lots of content it's a good solution the downside is if you look at this regular expression I can already see one problem and that is what if the image tag being rendered is using single quotes instead of double quotes well then you need to build that into your regular expression check the other example is I want to just check something here quickly what if in this case what if your image doesn't have a class attribute so let me show you what I'm talking about if I go back to my page and I go and add the second custom image block so it's custom image without class that's a picture of some photos some books if you take this in the editor you will see that the image tag being rendered does not have a class being applied so now when I save this code or at least this page should I say let's save the draft and then let's preview that and let's have a look at what happens to that image so you see what it's done is it's actually added the new class to the data image class attribute and if you look very carefully I'm going to make this a little bit smaller so it'll actually show us what's going on there I've kind of broken the data image class attribute it's added a space there so now it's a data image attribute and then a class attribute so it's kind of broken the original image tag hopefully you can see that in the window if you can't let me know and I can share it with you we can probably make it a little bit bigger here there we go so while regexes are great I've used regexes for string searching so when I'm searching a specific string one example that I used it for was when I was working at Castos which is a podcast hosting company we were receiving data from various different podcasting RSS feeds that had different formats of different files in the file name sort of URL string and I had to write a regular expression check that would basically just focus on the proper mp3 path of the file so my opinion regex was the perfect solution because I'm always going to expect something to have a certain format end with .mp3 and then ignore everything after but any query strings that were there were query strings appended to some URLs and some words and all that kind of thing so in that instance where I'm working with strings I believe regex is still a perfect solution but when it comes to html and when it comes to some of the things that html allows for example custom attributes that can have the word class name I'll share some other examples with you but in the end of the session regular expressions can be brittle so they're very very fast but they generally only work in certain circumstances where your html is very defined and very specific and doesn't have a lot of extra things going on okay so that's regular expressions as an option any questions on that I'm going to take a quick sip of water before we dive into another option that is possible but any questions on what we've covered so far Adrian says for what it's worth the line spec code looks very different low class edit and it's a figure tag ooh what theme are you using interesting and you've added the custom image blocks not a standard image block yeah so if you add a normal image block in WordPress it'll add a figure tag and that's the correct way to do images but the custom image blocks from my plugin are the ones we're working with today so let me try this so if you're unsure where those are when you add them when the image plugin is added you should be able to type in the word custom image and they should come up one with and one without so have a look at that okay but thanks for asking maybe someone else is having a problem alright so let's look at a more I just wanted to say a better way of doing something like this and that is the PHP DOM document functionality um so I'm going to share this with you in the chat so PHP the DOM document class is something that was released way back in PHP 5 sometime it was a way to represent an entire HTML or XML document and it has the capability of working with that DOM document and making changes to it as needed it is very similar to the way you would do things in JavaScript when you're working with a DOM so if we go back I think I still had that JavaScript code open so let's open that quickly so JavaScript has this query select all method that you can use to query all elements in the DOM the DOM document class in PHP has a similar way of doing things I'm going to scroll down and find the the relevant where am I now just find what I'm looking for here so go down to the table of contents so there is a get element by ID which is very similar to the JavaScript one there is also get elements by tag name so you can search for elements by specific name and then once you get those elements you can loop through them and make changes to them I'm not going to dive too deeply into how that works and the way it should work and what you should do I'm rather just going to show you the code that you might use in this example I can't talk you through it but I'm going to share with you what using DOM document might look like and we'll talk about what it's doing and how it works so I have used DOM document in the past as well funnily enough both both the JavaScript and the Regex and the use of DOM document was all while I was working at Castos because we were working with HTML content of podcasting files and podcasting plugins and podcasting players so it was all in my time there let me share this code with you in the chat as well this is instances now the updated code inside of the learn HTML API the content function essentially what this is doing is it creates a new instance of the DOM document class it then calls the load HTML method and you can pass it in a full HTML document or just in our case the content then you can say get elements by tag name and you can say pass all the elements to me and that'll give you a list of images you can then this list of images is an array of objects so you can then use the PHP for each loop you can loop through these images and then you can use the set attribute method and you can say I want to set the class and apply new class then finally you say doc save HTML which then will return the updated content and then because this is a filter we need to return the content I deleted that earlier so let me share the updated version with you in the chat a little side note whenever you're working with a filter and you're making changes you always have to return the updated version of whatever you're working with so that's what it looks like a little bit slower than using regex but a little bit more effective so you're always going to find all image tags and you're always going to set the class attribute for those image tags so you don't have any problems with doing it in the wrong place or doing the wrong thing so let's have a look at how that works if we go back to our front end we've now got at least I've got those two images on the page so let me refresh that and now if I inspect those images we will see that the first image has let me move this over so you can see there's one thing I hate about inspectors it doesn't format the HTML too nicely there we go there's the first image, it has the new class applied so that was the image without a class so it added the class for us which is great it doesn't care whether it's single quotes, double quotes it adds that attribute for us but then here's the second one you'll notice that what it did was it overrode our default class so it didn't add it, it overrode so we need to do a different thing where we maybe do an add class or add class or whatever but at least the functionality is better and we're not causing trouble so that's your third option now the one downside with DOM document is go back to the code here is number one it's more memory intensive because it reads the entire HTML document that you send it into a tree and then it sort of stores that all in memory and then you'll notice this last call here, the save HTML call essentially rewrites everything from the memory so while you're looping through your tags and doing things and making changes it writes it into memory and then it rewrites everything back from that memory to your content variable so it's more memory intensive which means if you're doing it a lot if you're doing it in a number of places it's going to be less performant than the regex solution however it is a better option because you can do things like set attributes and all those kind of things I think there is an add attribute option in the documentation let me just find a chair maybe there isn't set attribute there probably is a way that you can so what you would need to do is probably get attribute or something and then update attribute or something along those lines so it is definitely possible but it requires a little bit more work a little bit more knowledge about how it works and what it does and all those kind of things so up until WordPress 6.2 these were sort of the three options available to you create attribute somebody mentioned let's have a look here yes there we go create attribute thank you so you would need to check does it have the class attributes and if it does then add it if it doesn't then create it you'd have to do some additional checking and coding and all those kind of things thank you chat for pointing that out so the pro is it's a lot better it's a lot less chance of things going wrong it's quite a bit slower than using regex so now we get to WordPress and the new html api as I mentioned the html api was originally released in WordPress 6.2 and there was an amazing article last month and this article is what kind of got me into what is this html api and what does it do and Mary Baum who is the person who wrote this article says the html api process your tags not your pain and so I do recommend reading this article I've used one of the examples from this article in this workshop today but there are some other examples there as well Mary dives into some of the problems with using regular expressions sorry and then there's also a comment in the comments about using DOM document and Dennis who is the original developer of the html api discusses those arguments but essentially the html api is built around this html tag processor and what the tag processor does is essentially it's very similar to let me find the let me find the class reference rather that's a better one to look at I'll show it to you it does something very similar to what DOM document does but in a faster way and in a in my opinion more human readable way so it uses functions like next tag and then set attribute which we which we understand but it also has things like let me just find some good examples here it has the word just simple add class adds a new class name to the currently matched tag get attributes get tag it's a little bit more human readable it's a little bit more simple what it does and a little bit more understandable number one the other thing just to be aware of is because it's a brand new html it had brand new api it does have a currently a limited set of functionality but the functionality that is there is very robust and well tested and it kind of fits in terms of memory usage and performance it kind of fits in between regex and DOM document it's not as quick as regex but it's much quicker than DOM document and it's not as maybe accurate as DOM document but it's way more accurate than regex so it's a good in between middle ground so let me show you what using the html api might look like and this as I mentioned this example is in the article that I shared with you earlier so you can also check it out there but this is the code as you can see number one it's a lot less than the DOM document version so essentially I set up a new instance of the html tag processor and I pass in the content straight away and then I can say while processor next tag image so in other words keep looping through all the image tags until you don't find anymore so this is very similar to that for loop the next tag method returns true if it finds an image that's why I can use the while loop so I don't have to first get all the images I can just go straight into a while loop and stop finding it and then stop so it reduces my code then it does processor add class simple nice and easy add this class I don't have to define a specific attribute I can just say add the class because that's what I want to do and then finally instead of rewriting it from memory all it does is it returns the updated html so it just takes the html it does something called tokenizing which is a programming term for sort of taking your code and turning it into sort of variables but it only updates the changes that you request and then it returns the updated version doesn't have to re-write it again from memory so that's why it makes it less memory intensive and more performant so it's less lines of code number one which I always like number two it's more human readable in my opinion it's specifically been designed for WordPress like environments but also specifically to follow the html5 spec so it will ignore things that are valid in html that might be wrong and I'll show you what I mean in a second and as I say it's aim to be as performant as possible unfortunately not as performant as regex but way more accurate than using a regex so let's have a look at what this does now when we refresh this page on the front end so if we have a look at our first image we will see it has added this is the image with the class of default it is simply added new class to that image so it didn't have to know where the class default was there or not it just said add a class and then if we have a look at the second image we will see that it's also just added the class of new class so it knows that there wasn't a class attribute already it adds the class attribute and it adds the new class that we ask it to add so it's because it's sort of designed for WordPress and designed for html5 which is what WordPress supports if you've ever looked at block markup but it's all html5 valid it's been designed in such a way that if you ever need to make any kind of changes to html code in a WordPress site it is now the recommended way of doing things I love the fact that with this simple example I can make the changes that I want to make without having to worry about does it have the class does not have the class am I using the right regex am I using single quotes double quotes whatever it doesn't care it just says take the image let me go back to the code take the image and add that class to it whether it has a class attribute or not you'll notice it didn't break let's go back here it didn't break the data image class attributes like the regex did and it's specifically designed to fix a lot of these problems now one of the other resources and Shirley I saw your question I'll get back to you in a second one of the other resources that I wanted to share with you and these are all on the last slide of the slides anyway the developer of the HTML API Dennis now he did a developer hours workshop as an introduction to the HTML API I was able to attend a similar version of this workshop at my at my workshop recently and he what I liked about his workshop as he dives into some of the really weird and wonderful ways that HTML can be valid but weird to look at let me show you one example from that article so if we go back to the article over here if we scroll down a bit I want to show you this I didn't know this but it is perfectly possible to put a greater than or an equal that's greater than I think it is less than sign inside of a title attribute for example and that's still valid HTML but the minute you use any of those tags in a regex is going to cause things to break and Dennis showed a few other examples of this where things are valid HTML and therefore using regex can cause those two problems sometimes they're valid HTML that probably shouldn't be valid or at least maybe they're designed to be valid but they end up becoming valid okay so Shelly said can you write it to work only on posts or on a custom post Shelly that's a great question I seem to recall let's actually this is going to cause me to dive into call the content itself as a filter I'm so annoyed now because I used to know this let me find the content quickly okay now I've got too many pages find that one give me one second here I'm pretty sure there is a filter that can filter on posts only I think it fires before the content let me just see where the content happens the content happens in post template wpincludes post template.php line 256 and this is another reason why I changed these workshops to be a little bit less formal we can spend time diving into these kind of things so wpincludes it was a post template I've gone past post template the title these are called from here so if you're using the content that's normally used inside of a oh yes that's the other thing you can do here's what you can do let me just find the content quickly here's what you can do the content calls get the content get the content will get the post so what you could do is do something similar in your code and inside of the content folder you could do something like this you could say get the post based on the global post you just wouldn't pass that in and then you could check the post type on the post if it's just a post you can return or if it's just a page you can turn to it that's one way of doing it the other way you might be able to do it is I think there are I think there is another it's been a while no there's the more link no there isn't an additional folder I thought there was so your best bet then would be just to call get post because if you look at the documentation for get post if you don't pass anything to get post it'll default to the global post so in the scope of your the content folder you can do it that way and then you could and then you could check where the post is a post or a page you could do it that way I don't know if that's 100% right but I think I've done that before I think you can check whether it's a post I think it's the post you then get the post type on the post this is going to bother me now let's go find out post just the post type object property let me see here what am I going to do I'm going to just post type can you tell it's been a while since I've done something like this and let's refresh that so that tells us it's a page so that's one way of doing it I think that if you do it that way it's probably not going to have any performance issues because you get in the global post anyway I don't know if there's a bet there might be a better way but off the top of my head that's the first way I can think of doing so you would then check if post type is page or post and do it accordingly you could also then do it on custom post type so you could check post type Chris says get current screen works for me that's another way post type that's another way get post type I think just calls post anyway and then returns the post types that's another option so yeah there's multiple ways to do it definitely so thank you everybody for input on that one okay is singular could also work yes that's very possible yeah any one of those that checks what the current global post is would be an option for you there for sure awesome cool well thank you everybody for your input there that's one of the wonderful things about WordPress there's many different ways to do the same thing I always default to get in the global post but yes there's loads of other functions we can use so thank you for that okay cool so the last thing I wanted to share with you is just kind of some more reading around the HTML API I have shared some of these links already but I just want to kind of go over them again with you so let me close all of this down here so the first one I do recommend is the blog post that is kind of a good overview of what it does how it works from a very sort of beginner friendly point of view the second one would be the developer hours that Dennis ran hosted by Michael and then finally the actual HTML process or class reference definitely read through that check that out because what's nice about this page is anytime some additions are made because this HTML tag this HTML tag process of the HTML API is going to continuously be worked on and added to as new functionality is required so this will be the best place to get the latest and greatest information Dennis has been doing a great job of keeping this page up to date as new functionality is added so do keep an eye on that for future updates awesome and then the other thing I'd like to mention and Dennis say this to me when I challenge him is if you ever are finding a situation where you need to make a change to a different type of tag like an iframe tag or a strip tag that's another perfect example of using the tag processor because as you can imagine if you're needing to add some attribute to a strip tag and you break the strip tag then you break all the code that is going to be running with that strip tag so whenever you need to make changes to HTML think about how you're going to do it think about what you've already discussed I'm not saying you must use the HTML tag processor for everything I'm a firm believer knowing all the tools available just as we had with knowing all the functions available to check the post time know all the tools available and then find the right one that works for your environment for your use case but the HTML tag processor is a new and exciting addition to WordPress it's one that is as far as I can understand it was required or requested by block developers and that's where the process HTML on the front end and that's where the sort of impetus from this came from and Dennis has really spent a lot of time on making sure it's performance making sure it's HTML5 specific and valid so do check it out do play with it take a look at some of the examples and then send feedback there are some links in this article right at the bottom there are some links to things that are being made that you can follow just scroll down to the bottom here even talks about CSS classes all of that some more resources all these things that I've shared with you all here and then there's a GitHub tracking issue where they're sort of tracking all of the changes that are there and this has been closed currently so any new changes will probably be added and then motion in the future okay any other questions around all that any other comments anything anybody wants to say before we call it a day and have some water while I wait alright thank you all for joining it was lovely to see many of you again and the new folks who are joining us for the first time you're very very welcome next week we're going to be diving into an API that I have been wanting to play with for a long time and it's the interactivity API if you've never seen an activity API before I suggest going to check it out because it does some really cool things but next week we're going to be diving into it we're going to be learning how it works this is another workshop that I attended recently I still haven't figured it out for myself I still haven't played with it but if you want to see how it works there is a there is a demo of what is possible with the interactivity API that I'm going to share with you it's this live movie site and I'm not going to do anything I'm not going to click any buttons but I highly recommend checking that out because kind of the functionality that it opens up on a WordPress site is kind of really cool and so that's what we're going to be diving into next week understanding how it works, what it can do if you want to see what's possible go and check out this demo site it's really really exciting to me alright thank you all for joining I hope you enjoy the rest of your Thursday ooh Adrian mentions next Thursday is a holiday in the US that's a great point hmm so maybe we won't do it next Thursday maybe we'll wait are the US folks around the following Thursday Adrian just give me a nod maybe we'll push it out to next Thursday because I always forget about Thanksgiving this Thanksgiving right so that's a very valid point we'll push it out to the following week this is one of the other nice things because I'm so focused on learning pathways I don't have to do a workshop every week so I can take a skip for Thanksgiving next week which is perfect so I'll push it out for next week and we'll see from there Valerie had a question around the best software to do prototypes for an API Valerie my personal preference for that is a piece of software called Postman I hope this is what you're asking me but I use Postman for doing any kind of API testing and API prototypes so if that's what you're looking for I recommend checking that out it's at postman.com great otherwise folks then I won't see you next week Thursday those of you in the US please enjoy your Thanksgiving I will have a big meal on your behalf that evening how about that and then I'll see you again in two weeks time have a lovely rest of your Thursday and rest of your weekend and great have a good one bye