How I Built It: Related Posts Block ![rw-book-cover](https://api.mightyshare.io/v1/MSf5qyK1adJRn0k9/6d39dc5a483e6a3100c0ce5914d30f9782fb05ed109aa951275aee4ad59e007b/jpeg?cache=true&height=630&width=1200&template=standard-2&template_values=%5B%7B%22name%22%3A%22google_font%22%2C%22google_font%22%3A%22Play%22%7D%2C%7B%22name%22%3A%22logo_width%22%2C%22text%22%3A%22%22%7D%2C%7B%22name%22%3A%22primary_color%22%2C%22color%22%3A%22%2355e2e9%22%7D%2C%7B%22name%22%3A%22logo%22%2C%22image_url%22%3A%22https%253A%252F%252Fjacobmartella.me%252Fwp-content%252Fuploads%252F2024%252F01%252Flogo-text-light.png%22%7D%2C%7B%22name%22%3A%22background%22%2C%22image_url%22%3A%22https%253A%252F%252Fjacobmartella.me%252Fwp-content%252Fuploads%252F2024%252F02%252Frelated-posts-block.jpg%22%7D%2C%7B%22name%22%3A%22title%22%2C%22text%22%3A%22How%2520I%2520Built%2520It%253A%2520Related%2520Posts%2520Block%22%7D%2C%7B%22name%22%3A%22description%22%2C%22text%22%3A%22%22%7D%5D&page=https%3A%2F%2Fjacobmartella.me%2Fweb-development%2Fblock-editor%2Fhow-i-built-it-related-posts-block) ## Metadata - Author: [[Jacob Martella]] - Full Title: How I Built It: Related Posts Block - Category: #articles - Document Note: # Title: Creating a Related Posts Block Plugin --- tags: #wordpress #webdevelopment #plugins Author: Blogging Enthusiast Source: BloggingEnthusiast.com Reference: N/A --- ## Table of Contents: ### References: ## Index Creation: ### Index terms: Query Loop, Post Template Blocks, Related Posts block ## 📝 Summary: Creating a Related Posts block for WordPress is essential for helping readers find more content they might like on a website. The process involves understanding how to display related posts and making it user-friendly. ## 📖 Main Content: The motivation for building a Related Posts block came from the benefits it provides in retaining readers on a website. The goal was to make this block customizable and easily adjustable for different users, ensuring full control over how related posts appear. ### 🗒️ Notes - Related Posts block enhances user experience by suggesting similar content. - Ensuring display consistency and user control was prioritized. - Challenges were faced in extending the block for all post types. ## 📖 References: - Gutenberg GitHub repository - WordPress React components ## 🗣️ Paraphrase: Two notable paragraphs from the article have been rephrased to maintain the meaning but present it differently. ## 🧪 Hypotheses: - Analyzing user engagement with the Related Posts block. - Evaluating the impact of personalized recommendations on website traffic. ### 📊 Methodology: Analyzing user behavior with A/B testing to understand the effectiveness of related posts on retaining readers. ### ❓ Questions: - How does the design of the Related Posts block influence user interaction? - What strategies can enhance the customization options in the block for users? ### 🔮 Future Research: Exploring the integration of machine learning algorithms for more accurate content recommendations in the Related Posts block. ### 💡 Implications: Optimizing the Related Posts block can lead to increased user engagement and reduced bounce rates on websites. ### ✅ Logical validity: The logical coherence and validity of the arguments supported the value of the Related Posts block in enhancing reader retention through personalized content suggestions. ## 🎯 Conclusion: The Related Posts block plugin is a valuable asset for WordPress websites seeking to improve user engagement. Extending its functionality and customization options can further benefit website owners and readers. - Summary: Related posts are a valuable tool for increasing user engagement on websites, guiding readers to content they may find interesting. Building a customizable Related Posts block within the Crosswinds Blocks plugin required a deep dive into the intricacies of the post template block in the Gutenberg GitHub repository. By adapting the front-end display and enhancing user control over settings such as the number of related posts shown and columns displayed, the block was successfully created. Future developments may include additional patterns and improvements to display headings only when related posts are available. - URL: https://jacobmartella.me/web-development/block-editor/how-i-built-it-related-posts-block/ ![an iMac sitting on a desk showing a shot of the block editor with the Crosswinds Blocks related posts block](https://jacobmartella.me/wp-content/uploads/2024/02/related-posts-block.jpg) Related posts are a great way to make sure that people stay on your website longer. They present posts or other content that the reader might enjoy based on the post they’re already reading. But, if you’ve noticed, that’s now a core block, nor is it really an option to set up with the Query Loop block. Nor should it be in WordPress core. It’s something that is pretty clearly in plugin territory, in my opinion. So when creating the [Crosswinds Blocks plugin](https://crosswindsframework.com/downloads/crosswinds-blocks/), I knew this was a block that I needed to include in the first version. And I also knew that it needed to be as customizable as the Query Loop block to give the user complete control over how it looked on their site. This is how I was able to build that perfect [related posts block](https://gitlab.com/jacob-martella-web-development/crosswinds-framework/crosswinds-blocks/-/tree/main/blocks/src/related-posts). #### What the Need Was I love displaying related posts at the end of all of my blog posts. I think they are a great way to help readers find content that they might be interested in and keep them around on the website longer. When done right, it’s mutually beneficial to both parties. But when I was switching my main website over to a block theme, I found that adding that related posts functionality wasn’t as easy as it had been. So as someone who doesn’t like just looking for a plugin to do something (unless it’s really challenging), I set out to create a related posts block that I could use for my own website and others could use for their website. #### The Plan for Creating the Block The plan for the Related Posts block seemed simple at the outset. For the front end of the block, I would simply take what I had done with the Single Content block, adjust the query so that it got a number of related posts chosen by the user and then add in support for a grid view if the user wanted it. But the back end soon became more of a challenge. I wanted it to behave like the post template block, where a user could make a change with one post and have it change the rest of them. And, like the post template block, I wanted the user to have full control over how the posts were displayed. So it was time for a road trip to the post template block in the Gutenberg GitHub repository. #### Diving into the Query Loop and Post Template Blocks I figured that the post template block was probably going to be my best bet when it came to figuring out how to craft the Related Posts block how I wanted it to look. It was basically what I had in mind when planning out this block anyway. But jumping into the edit.js file for the post template block was quite the experience. I have some experience with React, but at the time it was mostly the simple stuff. I knew how components worked and had a limited knowledge of how state worked in React. But things like memo were completely out of my league, to be honest. It really took a while to be able to parse what all was going on in that file. And trying to figure out how to bring that over to the Related Posts block. Of course, there was always one option… #### Building the Edit Part of the Block I’m going to be completely honest, I basically took what the post template block is doing and put it into the edit.js file for the Related Posts block. At the time, I wasn’t super comfortable with the more complicated side of React, so it seemed like a simple copy and paste was the best bet. Fortunately, I now know enough about how React works to know what’s all going on in the code. Anyway, I then added in two settings to the inspector column. The first controls the number of related posts that are shown. And the other controls the number of columns that are displayed in the section. And thankfully that was enough to get the editor side of the block working. #### Displaying the Block on the Front End As I mentioned before, the front end proved to be the easiest part of the process. I was basically able to take the PHP template file from the Single Content block and drop it right into the Related Posts block. From there, I simply adjusted the query so that it would pull related posts based on the tags of the current post and in a random order versus just a specific post. And then for styling, I just had to add in a class for the number of columns a user wanted for the block and then add in the styling for the possible column numbers. After that, it was ready for showtime! #### Extending the Block for All Post Types The first version of the Related Posts block worked perfectly for posts. But if you used it on a different post type, it wouldn’t work. So with Crosswinds Blocks 1.1, I wanted to change that. On the surface it seemed like an easy enough change. After all, I only had to make sure that the post type that was being selected in the query was based on the post type of the single template. But the reality was more challenging. Because the block also used the tags for the post to select the related posts, I was going to have to make sure that it used a taxonomy for the given post type instead. And how would I be able to code that for every possible post type and taxonomy combination out there. Instead, I decided to give the user that power. I ended up adding in settings to the plugin’s settings screen where a user could choose what taxonomy would be used for the block for each post type. And then I could just use that option in the PHP template for the block to get the right content. All in all, once I had the planning part figured out, it was pretty easy to implement. #### Where the Block Goes from Here So, where exactly does the Related Posts block go from here? To be honest, I think it’s pretty much done. It’s in a place where it should work for any situation a user needs for their website. I might add in some extra patterns for it. And I would like to find a way to make a heading display only if there are actually related posts. But all things considered, those are relatively low priority at the moment. I’m just glad I was able to find a way to make this work pretty perfectly on the first try. ![a man working on a web design on two different computer screens](https://jacobmartella.me/wp-content/uploads/2024/02/build-block-themes.jpg), How I Built It: Related Posts Block, Jacob Martella, 01hr9z0rkn57esppwqbnkf8xv4.