#114 Query Block Improvements and Terrible Branding ![rw-book-cover](https://wsrv.nl/?url=https%3A%2F%2Fcdn.wpcafe.show%2Fwp-content%2Fuploads%2F2021%2F02%2F17131034%2Fwpcafe-podcast-image-sq-.jpg&w=100&h=100) ## Metadata - Author: [[WP Café]] - Full Title: #114 Query Block Improvements and Terrible Branding - Category: #podcasts - URL: https://share.snipd.com/episode/9654132a-ce73-43f7-af08-9de6b77b9fa7 ## Document Notes ## Highlights - **SEO Title Debugging with Yoast** - Mark Wilkinson spent over an hour debugging an SEO page title issue caused by Yoast SEO hijacking the title filter. - Yoast uses a pre-filter that blocks other title filters, complicating custom code for SEO titles. Transcript: Mark Wilkinson I'm sat there just thinking, I hate doing this. Yeah. So it was a bug where we'd been talking over the last few weeks about this idea we've had for SEO on job boards and things. And I noticed that, so what I'd done is I'd set the page title tag to be like this dynamic page title, you know, like accountancy jobs in London or whatever it was. And when I put it onto this site that we're integrating it with, it just didn't work. The title tag just was back to the old one. Like the, I think it was just using the archive title, the standard one. Keith Devon Yeah. Mark Wilkinson And so I just went and look how I did it again. And then, so I did a bit of debugging like, and just worked out that the filter that I was using, there seems to be the new way of doing it, which is, I think it's the filter called document Title parts. And then there's the old way of doing it, which is like filtering the WP title. And I couldn't get any of them to fire. Like I had my function there, I hooked it in. And then right at the start of my function, I was just like doing, this, error log this, just to see nothing fired. It just didn't work at all. I'm like, this is ridiculous. So I'm sure this works. So I went back to my original site, and yeah, there and all, it works perfectly. So anyway, an hour and a half later, it turns out that Yoast SEO is essentially hijacking the title. I haven't delved into it too much, so I apologize if I'm doing them with injustice here. This is the matter title tag, right? Yeah, the title tag of the page, essentially. You've seen the tab, the bit in the tab at the top. And essentially, there's like the function that outputs that title has, and I don't know why they do this it has like a a pre-filter so you can do something before the filters before the Title's been generated and then it's got like a a filter that runs when the title's been generated just before it gets returned so that developers can change it but if the pre-filtered One detects any sort of content the rest of them just don't run. What Yoast was doing is they were using the top one, the first one in the function, and passing something to it so the rest of them don't get run. And then they hook their own filter in, WPSCO underscore title, to that. Which just complicates things. It took me ages to work it out. ([Time 0:02:21](https://share.snipd.com/snip/a63a2d55-938b-410d-8234-c7ba54348a4f)) - **Elementor Gap Debugging Frustration** - Keith Devon struggled with a mysterious big gap under a shortcode on smaller screens in Elementor. - The gap was outside shortcode output and related to confusing Flexbox behavior, causing hours of frustration. Transcript: Keith Devon Been in, as you know, debug hell today with something to do with Elementor. Well, my initial thought was, this is an Elementor problem, and I'm going to prove that it's an Elementor problem and wash my hands of it. But the kind of more i kind of dug into this it was like but it only happens when we use our short code so there's like there's definitely something about what we're doing that's causing This problem but yeah essentially we're using a short code in elementor to output some jobs and on smaller screen sizes there's a massive gap under our shortcode but it appears that The gap is kind of outside of our shortcode output yeah like the shortcode output itself isn't creating the gap if you like inspect it but it is somehow it's utterly bizarre and i've tried Turning off every css rule and tweaking this and tweaking that and going up the tree in terms of right is it is it this container that's set to has a weird flexbox rule or a weird like mobile Specific rule nothing i cannot find the problem it's doing and i don't know what to do now because I've spent like hours trying to fix this issue I'm no further along I'm just like this Could be one of those moments where I need to get my head up and think there is another way to do this but I don't know what it is and I don't know how much more time to give this and just I don't Give the client their money back and say I'm really sorry I can't figure this out I don't like when do we draw that line I don't know. Not yet. Mark Wilkinson Not yet. I don't think, no. It's just a weird one, isn't it? And we say, like, a big gap. It's like a 4,000 pixel gap at the bottom. It's something to do with Flexbox. Keith Devon It's something to do with Flexbox, but I can't work out why. Because if I change the align self property to start, it breaks the layout, but it fixes this gap underneath. So I'm just like, yeah. Mark Wilkinson Do you know what Mark just put in there? And I did think about this when we ended the call. Is there an unclosed div somewhere? Maybe. But then why wouldn't that happen on other sites that we've installed this on? I would have thought that would rear its head on other things. How am I going to find that? Don't look in the inspector. I had that the other day. Look in the source. No, don't look in the inspector because it self-closes things, doesn't it? Yeah, the inspector corrects things. It's like the formatted markup. It's how it's rendered. The browser is like... That's what we're looking for, rendered. Whereas the source is like, this is what was sent to the browser. Keith Devon Yeah, yeah, nice markup. I might try that. Oh, goodness me. Mark Wilkinson Yeah, it's really, really confusing. It's the opposite, like too many closing divs for one open div. Yeah. Like I said, I would have thought that would cause issues on other sites. Yeah. And again, with Elementor, you do have like a lot of divs, don't you? A lot of nested divs. Yeah, exactly. Keith Devon I don't know. I don't know. Yeah, it's bizarre. But yeah, I need to try to get to the bottom of that one. But yeah, that's what I've been working on. ([Time 0:06:10](https://share.snipd.com/snip/9ccadd17-17e0-4f53-9fdb-e376fff251c7)) - **WordPress 6.8 Focuses on Polish** - WordPress 6.8 focuses on polishing existing features like the query loop, including fixing sticky posts behavior. - The release seems low-key, aiming to improve and fix bugs rather than adding major new features. Transcript: Mark Wilkinson Let's move on. Move on um so we've got a few things to chat through today the first one is something that i saw that is hopefully coming in wordpress 6.8 which i believe for those that don't know, is a mid-April Launch. It looks a bit of a low-key launch, a low-key sort of release to me. Is that because none of the automatic engineers are working on WordPress anymore? Possibly, but there doesn't seem to be sort of like a big focus on this one. Actually, I mean, it could be good. It could be like, let's just fix some stuff and, you know, make a release of that, which is kind of sometimes a good thing. Rather than focusing on new stuff all the time, let's go back and look at the stuff that needs building on and making better and fixing the bugs or, you know, hail. Anyway, this particular one was to do with the query block, which we used quite extensively in our recent build, actually. We did quite a lot of query block loops on different pages. And there was a few bugs with the query loop. And actually, the title of this in the roadmap post on WordPress, make.wordpress core, is polishing the query loop. So presumably, they are in the same picture that we need to fix these things. And there was an issue with sticky posts, which you had actually, you being Keith, had actually mentioned in a GitHub issue that was a problem. So hopefully they're going to be fixing that where ignore sticky posts kind of doesn't do anything or it creates some weird results in the, in the block. So, and it's very unintuitive for a user. So I thought that was an interesting one that was going to be fixed. Well, hopefully going to be fixed. Um, so yeah, that, that was all. And the rest of 6.8, to be honest, like I said, there wasn't much that I thought, wow, you know, that's going to be a few design improvements, just a few tweaks to that. Nothing that I thought was amazing. Some stuff coming for like classic themes as well. Trying to bring stuff into classic themes as well as themes where they can. Interesting. I know there's a lot of people who want but you know it's up to you whatever you do what you do yeah nothing else that I could see that was like classic themes what what does the classic theme Keith Devon Mean these days who uses classic themes most people they don't know do they they use... Okay, they do. But what do you mean by a classic? What's the definition of a classic theme? Mark Wilkinson I don't know what's the answer, but I understand it to be a theme that doesn't have a theme, Jason. Yeah. Keith Devon I think. It's basically the block editor and the full site editor are not enabled. No, I would say the block editor can be enabled, but not the full site editor. Mark Wilkinson So it's like a PHP rendered theme, your template, it's a.php, the PHP templates, not HTML templates. That's as far as I understood it. Keith Devon So people are still using the block editor. So that makes sense. When I hear classic theme these days, I think like pre-block editor, like pre-Gutenberg. No, I don't think so. I think you're right. Mark Wilkinson Yeah. So there's a lot of what is being built that sometimes they don't get to use, but actually they could. I think that's what the sort of push for is. I know Peter, who listens to this podcast, I'm not sure he's here today, has often said there's things that we could use in the block edition, the full site editor, that would work quite Well in classic themes, but not necessarily are. But why aren't they? Keith Devon There he is. Hey, hello, Peter. He says, hello, classic themes use customizer and don't have the site editor slash full site editing. Yep. Makes sense. Okay. So, yeah, lots of people will still be using that. And anybody that's using something like Elementor is probably on a classic theme, although... I don't know, actually. I'm guessing. I don't know if Elementor is compatible with full-site editing in any way, or the block editor, or anything. Yeah. Mark Wilkinson It's not compatible with our shortcut at the moment, that's for sure. It's certainly not. Keith Devon And that's all Elementor's fault, I'm sure of it. So yeah, nothing too exciting then in this which is, I don't know. Not massively. Mark Wilkinson But I mean, that might change because it says on the post, like, none of this is set in stone. It's like stuff that we're just thinking about and it might not be done or new stuff might be done. ([Time 0:11:10](https://share.snipd.com/snip/005b649b-5b6c-4206-8a60-dc691ab7ca71)) - **Understanding Classic WordPress Themes** - "Classic themes" in WordPress now means PHP-rendered themes without full site editing enabled. - Many sites still use block editor but not full site editing, explaining continued classic theme usage. Transcript: Keith Devon What does the classic theme mean these days who uses classic themes most people they don't know do they they use... Okay, they do. But what do you mean by a classic? What's the definition of a classic theme? Mark Wilkinson I don't know what's the answer, but I understand it to be a theme that doesn't have a theme, Jason. Yeah. Keith Devon I think. It's basically the block editor and the full site editor are not enabled. No, I would say the block editor can be enabled, but not the full site editor. Mark Wilkinson So it's like a PHP rendered theme, your template, it's a.php, the PHP templates, not HTML templates. That's as far as I understood it. Keith Devon So people are still using the block editor. So that makes sense. When I hear classic theme these days, I think like pre-block editor, like pre-Gutenberg. No, I don't think so. I think you're right. Mark Wilkinson Yeah. So there's a lot of what is being built that sometimes they don't get to use, but actually they could. I think that's what the sort of push for is. I know Peter, who listens to this podcast, I'm not sure he's here today, has often said there's things that we could use in the block edition, the full site editor, that would work quite Well in classic themes, but not necessarily are. But why aren't they? Keith Devon There he is. Hey, hello, Peter. He says, hello, classic themes use customizer and don't have the site editor slash full site editing. Yep. ([Time 0:13:36](https://share.snipd.com/snip/13dcc855-b92a-4aa5-9146-3ea24f60f34c)) - **Fix Core UX Before New Features** - Prioritize improving core WordPress user experience before adding complex features like collaboration. - Focus on fixing inconsistencies between classic dashboard and new editing tools to improve usability for most users. Transcript: Keith Devon I really hope that we can just, I think people have said this already that we can just like pause a bit and work fix some of the stuff that we already have like the little things like i've Probably even mentioned this before but the fact that when you're in like the full site editor or the block editor you have to click on the logo of your site to kind of get back like that's Your kind of back button but then as soon as you're in the kind of classic dashboard i'll call it it's something completely different like that the whole interface is completely different And the ui and everything about it it's just it's garbage like There's so much about what's there already that it's just feels so broken. Please, can we just fix all of that stuff? Even if we just made it look all the same, just trying to get some parity between the classic dashboard and the new stuff, I don't't know yeah we're just seem to keep moving forward with These things like well we're probably not anymore moving forward with any of this stuff but like um you know there's the the whole gutenberg roadmap you know the multilingual stuff Or the uh what are they called the collaboration bit which is the next bit it's like wait what just just hang on a second like can we just fix what's there and then move to that why are we not Fixing the pages menu before we're moving into collaboration because like is collaboration really the thing that's going to drive this project forward or is it just it not being shit I i don't know there's like there's obviously a balance there but it just feels like we're taking off in this direction going so fast down this path and then just completely ignoring The actual core experience of using wordpress which is in that dashboard and switching between these two paradigms it's i don't know sorry little rant came out of of nowhere but it's I i just don't understand it really like if i was i think if i was matt and i think when he did his speed build challenge he kind of got a taste of this you know if i was matt i and you'd log into Wordpress or watch someone log into WordPress or someone who's a Squarespace. I'm not saying Squarespace is good or better in any way. But someone that's come from a non-WordPress world that wants to use this product, watch them. Like, watch what happens. It's not good. Like, it's not good. And, like, we just don't need all the fanciness we need the core product to be better like the stuff that people do 99 of the time is just like logging in finding a page editing editing a Page like writing a blog post like all that stuff just like come on let's just stop and fix it. And if this whole drama causes like... Causes that to be fixed. Yeah, causes that to be fixed. And Matt to kind of put some of the big hairy ghouls aside, big hairy audacious ghouls, put those on the back burner while stuff's going on. And maybe a few of us, not me, because I don't contribute in that way, but maybe some of the community can step in and start making some of these small improvements while the pace of development Is slowed. ([Time 0:16:05](https://share.snipd.com/snip/eec9cc9f-9ed4-4652-bf72-7d8fc1538b02)) - **Full Site Editing UI Confusion** - Jamie Marsland argues WordPress' full site editing interface is confusing for users compared to older customizer-based themes. - The current building blocks exist, but the UI requires a radical rethink to be user-friendly. Transcript: Mark Wilkinson All this leads me into a video that I watched. We'll jump around the little list of things we're going to talk about here because it all leads into a video I watched from Jamie Marsland two days ago, which was Does WordPress Need a Radical Rethink? I don't know if you've seen the video, but Jamie sort of like talks about a lot of this stuff. You know Jamie is all up for the full-site editing and block editor, has some wonderful videos explaining how to do things. So he's definitely in the camp that the block editor and the full- editing is awesome and is the way to go but the video was essentially saying how poor a lot of this stuff is and how on earth Do you expect a user to be able to to do some of this stuff um and i couldn't agree more in his example he he showed, he talked about how many people he's trained on WordPress and five years Ago, he could get people sort of editing websites really quickly and understanding because they use the customizer and obviously the customizer has drawbacks, but the example he Was using, I think he said it was called the Bloxy theme, which I've never come across, but it was so easy just to be able to see the customizer. Oh, I want my new page template. I want a sidebar on the right or the left. And it was just so easy to change. In the full site editing, where would you go? Like, do you go into a page? Do you go into a template? I mean, I know we know, but it must be very difficult for a user, you know, and even like the command palette, you type that and you type page and then you get so many options with different Icons. They all say page or pages. Like what am I supposed to click on? So is there a way of – well, there is a way. I just think he's right. He's essentially right. Surely we could do this so much better. Now all the building blocks are in place and the things behind the scenes. Is it not just a matter of a new admin almost? ([Time 0:23:20](https://share.snipd.com/snip/4e0dfd7d-3aa7-42bb-89fa-f7886f7c6719)) - **Raise Brand Issues Tactfully** - Raise brand guideline issues with clients closer to final sign-off, not too early in the project. - Frame concerns in terms of accessibility and design challenges while offering solutions to show expertise. Transcript: Keith Devon I feel bad. I kind of feel bad talking about this in a way. I think terrible is harsh. Oh, I don't. Do that? I don't, no. So I'm obviously not going to name names, uh, but we were sent some brand guidelines recently for a project, um, that we may be working on. Um, I'm always excited to get brand guidelines. I like, I like looking at them and then starting to think about like, Oh yeah, how could we interpret that, uh, into, into a web design. And this thing is about 40 pages of PDF. It's something like 40 pages, 35 pages or something like that. And I think about 30 of the pages are about the logo. And really interestingly, at the start of the document, it says, our brand is more than just a logo. Is it? Because that's all I can say. So it's like, I'm going to say it's a crap logo to start with. And then there's like 30, 30 odd pages about like how not to make the logo worse. I argue that you can't really make it too much worse. So like, don't squish it. Don't rotate it. Don't change it to these colors. Don't make it a square. Blah, blah, blah, blah, blah. This is how to add it to a PDF. This is how it looks on the side of a taxi. This is how it looks. It's just awful, awful. And then so I'm scrolling down through all this stuff. Logo, logo, logo, logo, logo, logo. And then it says our brand i'm like oh sorry what have i been looking at so far because i thought these were the brand guidelines but now i'm at the our brand section and it was a page on typography And it basically said we use ariel and this other font i was like right great no, no typographic hierarchy, no idea about, you know, I don't know, things like line heights or, you know, When to use this font or that font. Just these are the two fonts. This one was using the logo. This is the other one, which is Ariel, by the way, which is just like, oh my God, seriously. But yeah, so, and then, and then it went back to the logo after that and showed the logo on a badge and the logo on a such and such. Mark Wilkinson Can you not take that as a positive though in that you've got free reign for all of those things? Keith Devon How do I know because I'm supposed to adhere to these brand guidelines so I now have to use a crap logo Arial potentially this other font which is worse looking than Ariel if they have a License for it and then sorry i didn't get to the i didn't get to the color palette which was horrific um so there's there's a really there's quite a nice color as their main brand color Um and then it was black and white i'm like okay fine and then there was like the secondary color palette and it sees like four or five colors that just look awful together and look awful With the original color i'm just like where did those come from and to top it all off this client wants uh how do you say it wcag or how do you say that word? The accessibility guidelines. Anyway, AA accessibility compliance. And the logo, the color palette is not accessible. So I cannot use their primary color with white. So yeah, I'm just absolutely flabbergasted and there's a couple of things one someone's paid money for this someone's received money for this it just looks like a copy and paste job Like someone has literally taken the brand guidelines they've done for the 200 clients previously swapped the color, designed a crap logo, and then that job done. So there's that. And now I'm in the situation where like, what do I do? Because I don't think I can actually build them. I certainly can't build them an accessible website using those colors. I don't think I can even make it look good, like using those fonts and those colors. Like it would be a real, real challenge. So what do I do now? Do I just say, well, that's what they've asked me to do. So I'm just going to do my best. Do I raise it? They literally just had this done. So it's not like they're going to have an appetite for me to upsell them a branding process. So I don't know. What are your thoughts? I'm in a ranty mood. Mark Wilkinson So you're not a fan then? I want to know who... Keith Devon I don't want to know who they're at, actually. Mark Wilkinson I agree with a lot of it. Yes. But I think... So what do we do now? We do nothing at the moment because we're still in the stage of, you know, we haven't even sent a proposal or anything, so that's fine. These are all things we need to solve as and when we're closest to the end game of getting the job or i've got the job yeah do you think so so because my my natural inclination is to go back Keith Devon To them and say this is how i feel and you know the things aren't accessible and it's going to be hard to make that look good because you know your current website uses these different fonts And these different color palette and it actually looks quite good so i you might be going a step backwards if you if if you make me kind of follow these guidelines um i i i think this isn't Mark Wilkinson The time and steve just says here like raise it definitely raise it and i think we should raise it definitely but just not not now's not the right time for me if we get down to the last one Or two or whatever then yeah we can raise it and say okay got some issues here and because you think it'll put you think it'll put them off or you think that it's just not worth our time at This point i think a bit of both i think a bit of both. I think, you know, and I'm saying I agree with you, but the look and feel of something is subjective to a person looking at it. They might love the logo and the colour scheme. I know the colour scheme's got issues with things, but there are things we can do about that. There's solutions to all this. So I just think we're not at that stage yet where um where we need to deal with it and when we are that stage we should deal with it definitely we shouldn't skirt the issue this this is interesting Keith Devon So mark has sent a comment if you tell them now that might well help you win the project i can see that working because it looks like we're giving it thought. It looks like we care. It looks like, like Mark says, it'll help show your expertise ([Time 0:32:32](https://share.snipd.com/snip/2c5f876a-03b8-44f8-be8c-e644cf638811)) - **Builder Transparency on Extension Issues** - When building their house extension, an unexpected bathroom obstacle arose, needing tile removal and redecoration. - The builder explained clearly, easing concerns and leading to a successful solution with budget agreed upfront. Transcript: Mark Wilkinson And the builder, when he was putting the, what do they call them, to hold the ceiling up? Acros? Acros, that's it. So when he's putting those up, he couldn't get them in the right position because there's something in the way in the bathroom upstairs. So he said to us, you know, I'm going to have to take all the tiles off the bathroom to be able to get these acros in the right place. And he was like, you could tell he was really nervous. He was like, you know, this is going to cost more money because we're going to have to redecorate the bathroom and everything. And he said, but having explained what it was and showing us, it was like, well, you could never know that when you're quoted. Like you would never know that until you'd literally pulled the bricks out and seen it. ([Time 0:42:29](https://share.snipd.com/snip/3c72d6be-0f25-4a8f-8f97-6f0b8cb42bbd)) - **Responsive Images 'sizes=auto' Issues** - WordPress introduced sizes='auto' attribute for responsive images to enhance performance with lazy loading. - It breaks images using CSS object-fit and aspect-ratio, causing wrong image size selection and blurry visuals. Transcript: Mark Wilkinson It's WordPress seems to have started adding a size is auto attribute to all images. And it appears to be breaking things left, right, and center for us. Yeah. Have we spoken about this before? I'm not sure. We may have done this. It came up again this week, didn't it? Keith Devon Yeah, it's just something to look out for. So this is for responsive images. And so with responsive images you can add a source set attribute and you can tell the browser these are all the versions of this image at different widths so it can serve the right one yeah In theory um so if if the it's it's all right it's difficult because i've got to go right back to start the story which i won't because i don't have enough time but so we're talking about Responses images so you give it a source attribute you list out all the images and then you would do uh have a sizes attribute as well and typically you would say something like um is it? Min width, max width. It's like a CSS query where you say up to a certain screen size, the image will be 100%. After that, it's a maximum of X. And I think by default, WordPress would take maybe like the image size that you've selected. So if you've said like display this is a large image uh the maximum width will be like 1024 pixels for example right that's that's all very well if your image is always kind of full width So picks up the full kind of screen or viewport um but obviously images sit within containers and there's no way to kind of represent that uh in your sizes attribute uh without being very Very labor intensive so for every image on the site you say, this is in this column. And when it's at this screen width, that column is 230 pixels wide. So blah, blah, blah. It's just impossible. So what the boffins in the CSS world figured out was that we now have a lazy loading attribute. So you can declare that an image can be lazy loaded so now the browser can load the css before it loads the image so now it knows in theory yeah it knows the size of the image yeah um that it's Going to render um before the image actually has to load so because of that they've introduced this as sizes equals auto keyword. So like the auto bit being the new bit. And that basically just says, if this is a lazy loaded image, wait until we know what size it is and then just like serve the correct image from the source set. That's how it's supposed to work. And it does. It sounds great, but it doesn't work it doesn't work because we use uh aspect ratio and like what's it called contain what's like contain and cover and i forgot i've completely forgotten The object it Object fit. Is it object fit? Something like that. I think it is. Object fit. Yeah, I think that's right. So we quite often just say we want this image to be a square. So the original image file might be a portrait or landscape or whatever. For this image card, for this little module on the website, we want the image to render as a square. And the easiest way to do that is for just me and the css just to say uh aspect ratio one object fit cover right and then that'll just beautifully kind of crop the image for us with css it's Lovely and it always works but the problem with that then is that the image the size of the image the width of the image does not correspond to the the visual rendered width that you're Seeing so it's it's it's now choosing the wrong image from the source set so what's what's been happening with us is that it's been choosing an image that's too small too small uh and that Appears really grainy. So we've actually, like on most of our projects recently, we've had to go and turn this off, which is really frustrating because potentially there's some really, really big performance Improvements using this method. But it just doesn't work that well for this. And I don't know how to – maybe we can. Maybe we can target the specific elements where we're using object fit um like the specific blocks and just turn it off for those or use some kind of string replace or or something we should Probably look into it more because turning off that feature entirely does not feel right because it is such a good performance win. But there you go. Just something if you're wondering why your images are blurry, that might be why. Mark Wilkinson If they are, you've got to filter wp image tag add auto sizes and just return false and it will turn it off, which is what we had to do. It just seems like a function that shouldn't do that, really. ([Time 0:45:38](https://share.snipd.com/snip/50bb9ecd-a3de-44da-96db-378b4b23eae3))