WP Queries in PHP and JavaScript – Building a custom Avatar block

So recently I was working on this webmasters site for the new podcast that I’ve been working on and I wanted to have profile pictures of speakers so that you could see like who was on the episode.

I didn’t want to use you know the full thumbnail graphics.

I wanted just like their headshot as kind of a little like icon so you could see kind of the different people’s faces without seeing the same thumbnail graphically over and over.

So what I ended up doing is installing a plugin that’s part of this seriously simple podcasting like suite of plugins that they have.

This one is a guests or technically it’s a speakers taxonomy that works with your episode custom post type or your post type for episodes.

So it lets you basically assign different speakers to episodes and I think what’s probably more useful for is if you have like a lot of like recurring speakers your podcast will have a couple of different posts or something like that and then you can see these like taxonomy pages where you know you can see all of the episodes with that particular guest.

I’m not super worried about that part right now.

I have those pages like no indexed for now but I just wanted some way to kind of categorize and hopefully reuse these over time as I’m hoping to get some of these guests to come back and talk about different topics.

So I saw the plugin.

It’s technically speaker but I changed it to guest with like a little filter and then I wanted to have this image so that is not a core feature having an image.

It’s really just the taxonomy.

So I actually added a very very very old plugin.

Let me see if I can find it.

WP term images by triple J.

I mean this plugin hasn’t been tested hasn’t been updated in four years doesn’t have a lot of active installs.

Most people would say probably don’t install this plugin but I know you know that he’s a good developer he’s going to take care of this plugin if it ever needed to.

This kind of came around from like the WordPress 4.4 arrow where they were where there was no custom fields and custom metadata on taxonomy terms and that became part of core.

So this was like a bunch of plugins that kind of worked for that.

So I installed it.

It worked pretty fine.

It basically gives you like a little image field that you can add to show on your taxonomy and then it does literally nothing else.

So it doesn’t show it anywhere.

Doesn’t like give you a block to use it or anything cool with that right.

So that’s when I decided I need to make a custom block and I thought this would be a great opportunity to see how this custom block worked and how I had to think through some of the issues because what I first thought was I really just want the image from the taxonomy.

So I’ll just put an image block there and use something like the block bindings API to replace that image you know programmatically under the hood.

So I put the image block there.

I have all the full controls and styling and everything in the image block but it would you know and it would block bindings like sync the URL of the image to pull it from whoever was the speaker attached to that post seems like a good idea in theory did not actually pan out mainly because it’s a taxonomy which means theoretically I could have multiple guests in the future which would mean it’s not just one image it’d be multiple images for that particular post so up one post might have one image one post might have three images because you can assign you know multiple guests or taxonies to a single post so I couldn’t just do one image block.

I thought maybe like a gallery block and then it goes inside to the images and so I just got too confusing and I didn’t really like that I just there wasn’t a good upper like place to do it and then I thought I mean I could do this with PHP very easily so why not just make a custom block and use some PHP to render this and I did so let’s take a look at that custom block we can do it we can look at it here first and you can see how ridiculously simple it is so it’s a custom block it just says term image and has like a few basic styles but it doesn’t even have like like you can see the images are like border radius I couldn’t even get that block support to work so it just has a few basic styles and settings I think at some point I need to determine like right now it’s hard coded in a lot of places it would probably need a few more settings to be something usable but that’s basically all it is I pop it inside the query loop and it just handles everything for me so let’s just take a quick look at how the block works and then and I think what will be useful is to see how I did it in PHP and then how I had to go back and do it in JavaScript to get it to show up here inside the block editor which I think for most people would be the hardest part.

So I’m here in the repo for this website it’s pretty basic website it’s just the all the themes there’s not a lot of like custom code to it but I have a little plug in just with some you know basic functionality that I needed to add to it so I updated my plug into support a block it also does things like load like a little custom CSS for some of the seriously simple plug in blocks stuff like that but let’s just take a look at this term image block that I created so this is the block.json very simple the main thing here is you know I named the block I did all that kind of normal stuff I tried to put on some like block supports but it wasn’t really working that well and there were some that I didn’t feel like I needed like background color text color I don’t need those at all I turn on the box shadow and I don’t think that it seems to be working that well and then I turn on the dimensions that doesn’t seem to be working either I’m not fully sure why and I could not find any of the border controls that’s the one I really wanted I wanted I wanted can you define the image with an I can you define the border color and style and radius I wanted all that could not find it here I’m guessing it’s still experimental and whatnot the key part here though is this uses context what uses context as it basically says like hey there’s going to be a block this box going to be inside other blocks so it needs to get information from its parent blocks I need to have access to that information so I need to know like the post ID the post type the query ID in our case we really just need the post ID but you know because the block is going to show up inside of this post template it needs to know which post we’re looking at so it can pull the right terms and pull the right image and so let’s start with the render dot PHP because I think that’s a little bit easier to understand it’s you know this is how we would have written it for years and years using PHP templating and WordPress so I think this is like very clean and easy to understand I get the post ID from that context that we just talked about so when you’re inside of a block you can’t really use like get the ID type functions it’s very annoying it’s very inconsistent but it’s not really a safe way to do it so inside of a block you get the post ID from the blocks context and then there’s that speaker taxonomy right so I just get the terms for the speaker for this post ID and if there are none I just drop out I don’t render the block at all that’s depends on you how you want to style it and stuff but if you’re on the front end of the site and there’s no guests just doesn’t show it now if there are guests the outer container of the block will show but as it loops through each speaker because remember there could be multiple speakers it has to get the image from that term meta and if there’s no image it doesn’t return it so this is a little bit of an inconsistency right like I should probably do all this work outside of the template and find out if there’s any images to show before I get to hear right that would probably make more sense so place for me to optimize if it does get the image then it just spits out you know the thumbnail size version of the speakers image because I’m just getting the the you know it’s just like get post meta it’s just get term meta so pretty simple very easy to understand it happens in the order that you see it probably could optimize this stuff here to get that out of the templating and do all the logic more appear but otherwise pretty good the only other thing I added is a little bit of CSS I am like I said I wanted a border radius I wanted you know to control it I also wanted if you had like more than one speaker instead of the circles being next to each other the the next ones would kind of overlap a tiny bit you get like this little overlapping effect where the circles kind of touch each other so really basic styles I mean I would love for this to be controlled in the block like in the block editor it’s not I think it’s okay then I had to make you know this work inside the block editor that’s where I got tripped up I tried to make a video doing it in real time but I had forgotten so much block stuff that it was it was kind of a disaster so we’re going to jump over to the edit dot j s file this is really the only other important file in this block and what the edit dot j s file is is this is basically handles this you know viewing it inside the block editor so that so once I made the render dot PHP worked perfectly well on the front end the the block showed it was great getting it to show the image here a little bit harder so let’s see we’re going to skip through all of this but I will say you have to kind of get used to using this and get used to using react things like use state and use effect those were really important I kept forgetting about use effect and it was punishing me for it and you will use use select which is kind of the WordPress way to get data from it’s kind of like think of it as like a it’s the WP query or like you know the way that you query data from from WordPress and that comes out of this WordPress data package so these are kind of the critical things that you have to get really comfortable with when working in blocks.

So let’s jump in here inside of my edit function first I get that post ID from the context post ID so in that case let’s go here very similar right we’re just getting the context out of there and then I’m using state to save something so you know it’s a lot better to put data into state instead of just defining variables so.

I need the image URLs right because I need to loop through those URLs for all the avatars so I’m just setting up a little place to hold it a little empty array and it gives me a little function and I’ll be able to manage that later and the reason I’m doing state is because when the block editor first loads I might not have that data yet I’m like a waiting for the block editor to run all of its JavaScript and give it to me so I need a little place to hold it up here in state already a little harder than PHP.

This whole function I’m not going to lie get up copilot wrote it for me because I always struggle to go through and find all the exact ways to do it and then there’s like new ways to do it and there was like the old with select there’s always like confusing stuff it wrote this for me but it’s generally looks.

Pretty much the same which is I’m trying to get those terms right I’m trying to get this function right here post ID taxonomy in JavaScript it’s a little bit more confusing because I’m querying the rest API I don’t have those like nice and easy rappers that I have in PHP.

Little more work but essentially I’m going to get all the speaker taxonomy records for that post ID and I’m going to pass the post ID as sort of a dependency to make sure that if the post ID updates it gets you know refreshes those terms.

And then terms will probably be empty for a while right I’m waiting for terms to have something but what I’m essentially doing is using a use effect which basically says hey pay attention to terms if it changes do this data if it doesn’t change don’t keep doing this.

And at some point it’s going to check that terms if there’s any terms in it it’s going to pull out all the URLs for the image and it’s going to set them here and so that piece right there is pretty critical it’s probably also the piece that I didn’t do here which is like do the URLs outside of the templating logic so in some ways this is kind of nice.

And then finally the block itself it renders if there’s some image URLs it loops through them and shows the image pretty basic image map here.

And then if there’s no images at all it just shows a placeholder that says hey there is no image for the speaker or there’s no speakers assigned or something like that so it’s just kind of you can see the block there but you know nothing too exciting so.

It’s honestly not a lot of code but it’s a lot of knowledge that took me a while to remember because it’s just so different than this which always feels a lot simpler and easier to do both examples of code that really needs some improvements this was really like thrown together and all that sort of stuff but overall pretty good and I’ll just throw in one last thing that I really actually struggled with is.

This image right here is part of the term but it did not show up in the block editor in the rest API at all so like when you get information in the block editor you’re getting it through the rest API which means that information has to show up in the rest API.

That was a huge thing that I really struggled with getting it to show up because like I said that plug in is from the WordPress 4.4 era before like the rest API was even a twinkle in you know Ryan mcuse I or whatever so it’s not.

Really set up to support that at all so what I had to do well one last little thing I’ll show you just to give you the full thing I had to register my own field on the rest API endpoint for speakers so speakers gets its own rest API endpoint because it’s its own taxonomy full of its own data.

And it has all the you know important information for each speaker but it didn’t have the image so I had to write this little function it’s pretty basic but it just adds the image to the rest API result for each speaker passes the ID of the image and just a URL to make it easy for me.

And so this was pretty simple I will say I did spend way too much time trying to do like modify the endpoint or like modify the term meta like when you register the term meta turn on the show is rest is true and none of that worked and I was getting very frustrated this worked pretty well so.

So that was really the only extra functionality so at the end of the day what did I learn number one is that I need to if you’re not building blocks a lot there’s a lot of little weird things that you kind of forget about that was definitely part of it.

Number two it’s very easy to do the stuff in PHP and I understand that it’s a lot harder to do it in the JavaScript side but as you get more familiar with it and more familiar with react conventions you can definitely get further than you think with a lot less code than you think.

Number three AI code editor at least for my sake get up copilot did okay it didn’t do great there was a lot of weird stuff a lot of weird moving parts a custom taxonomy a custom metafield like it was a little too abstract I think for copilot at least really give me great results I ended up having to kind of hand code a lot of it.

I probably should try ask her sir to see what it thinks but it works maybe I’ll optimize this if other people are using the WP term images plugin and you want like a block that actually like gives you the full styling and pulls those term images into your template.

Let me know I’ll definitely work on an open source it if people want it.

It is open source it’s in my repo and if you haven’t already please check out this web masters.fm it’s new podcast I have interviews with very cool people already up and more coming and it’s really geared towards people that are masters of the web doing very cool things.